/* ============================================================
   KARA ALTIN — Endüstriyel HUD teması
   Mat metal, bakır, ham petrol. Glow / text-shadow / blur yok.
   Derinlik = ton farkı + çizgi + pah kırıklı köşe.
   ============================================================ */

/* ---------------- FONTLAR (SIL OFL, eskioyun ile aynı paket) ---------------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/jetbrains-mono-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/jetbrains-mono-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------- TOKEN ---------------- */
:root {
  --bg: #0f1012;
  --bg2: #17191c;
  --panel: #17191c;
  --panel2: #1e2125;
  --panel3: #262a2f;
  --line: #2b2f35;
  --line2: #3b4047;
  --txt: #d3d6da;
  --dim: #8c939c;
  --dim2: #5f6670;
  --acc: #b9814f;
  --acc2: #cf9d6d;
  --acc-dim: #7e5737;
  --acc-hover: #946843;
  --acc-ink: #f3e7db;
  --steel: #8f989f;
  --crude: #0a0a09;
  --ok: #84a06e;
  --warn: #c49b4b;
  --bad: #b0604f;
  --star: #c49b4b;
  --teal: #4fd6c3;
  --news-w: #f2f8f7;
  --font: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --r-sm: 2px;
  --r: 2px;
  --r-lg: 2px;
  --chamfer: 9px;
  --shadow: none;
  --shadow-sm: none;
  --glass: rgba(23,25,28,.94);
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: dark;
}
body.theme-1 { /* gündüz — açık platin */
  --bg: #d4d6d8; --bg2: #e3e4e5; --panel: #e3e4e5; --panel2: #ebeced; --panel3: #f2f2f3;
  --line: #bcc0c4; --line2: #9fa4a9; --txt: #1d2024; --dim: #50575f; --dim2: #7a8189;
  --acc: #8a5a33; --acc2: #6e4527; --acc-dim: #b08661; --acc-hover: #74492a; --acc-ink: #fbf6f0;
  --steel: #5b636b; --crude: #28241f; --ok: #4f6e3e; --warn: #8f6a22; --bad: #92463a;
  --glass: rgba(227,228,229,.94); --shadow: 0 14px 40px rgba(30,32,35,.35); --shadow-sm: 0 6px 18px rgba(30,32,35,.25);
  color-scheme: light;
}
body.theme-2 { /* kehribar */
  --bg: #120e08; --bg2: #191309; --panel: #191309; --panel2: #201810; --panel3: #292015;
  --line: #322618; --line2: #42321f; --txt: #efe1c9; --dim: #a08d6f; --dim2: #6f6150;
  --acc: #c9974f; --acc2: #e0b06a; --acc-dim: #7e5737; --acc-hover: #946843; --acc-ink: #f3e7db;
  --glass: rgba(26,19,10,.94);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--txt);
  font: 500 14px/1.5 var(--font);
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; }
::selection { background: var(--acc-dim); color: var(--acc-ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* pah kırıklı levha (sol-üst + sağ-alt köşe kesik) */
.plate-hud {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line2);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* ---------------- ÜST BAR ---------------- */
#top {
  display: flex; align-items: stretch; gap: clamp(3px, .45vw, 8px);
  padding: clamp(5px, .55vw, 8px) clamp(6px, .8vw, 12px);
  background: var(--panel);
  border-bottom: 1px solid var(--line2);
  min-height: clamp(70px, 7.8vh, 82px);
  height: clamp(70px, 7.8vh, 82px);
  flex: 0 0 auto;
  position: relative;
  z-index: 10;
}
#top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--acc-dim);
}
.brand { display: flex; align-items: center; gap: 10px; padding-right: 14px; border-right: 1px solid var(--line); flex: 0 1 clamp(220px, 16vw, 290px); min-width: 220px; overflow: visible; }
.logo {
  width: 46px; height: 46px; position: relative; flex: 0 0 auto;
}
.logo img, .logo svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: var(--r); display: block;
}
.brand h1 { font-family: var(--display); font-size: clamp(13px, 1vw, 17px); letter-spacing: .18em; color: var(--txt); font-weight: 700; white-space: nowrap; }
.brand .op { font: 600 10px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-top: 2px; white-space: nowrap; }
.brand .val { font: 600 clamp(9px, .68vw, 11px) var(--mono); letter-spacing: 0; color: var(--acc); margin-top: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.stat {
  display: flex; flex-direction: column; justify-content: center;
  flex: .9 1 0; min-width: 0; padding: clamp(3px, .4vw, 5px) clamp(5px, .65vw, 10px);
  border: 1px solid var(--line);
  background: var(--panel2);
  transition: border-color .14s var(--ease);
}
.stat:hover { border-color: var(--acc-dim); }
.stat.wide { flex: 1.7 1 0; min-width: 0; }
.stat.narrow { flex: .72 1 0; min-width: 0; }
.stat label { font: 600 clamp(7px, .55vw, 9px)/1.15 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: visible; text-overflow: clip; }
.stat label em { font-style: normal; color: var(--dim2); letter-spacing: .06em; text-transform: none; }
.stat b {
  font: 700 clamp(10px, .9vw, 16px)/1.2 var(--mono); color: var(--txt);
  font-variant-numeric: tabular-nums;
  margin: 2px 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat i { font-style: normal; font-size: 10px; color: var(--dim); font-family: var(--mono); }
.stat i.ok { color: var(--ok); }
.stat i.warn { color: var(--warn); }

.bar { height: 5px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin: 3px 0; }
.bar div {
  height: 100%; width: 0%; transition: width .3s var(--ease);
  background: var(--acc);
  border-radius: 0;
}

.top-actions { display: flex; align-items: center; gap: clamp(2px, .35vw, 5px); margin-left: auto; flex: 0 0 auto; min-width: 0; position: relative; }
.top-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; display: flex; align-items: stretch; gap: 4px; padding: 6px; min-width: max-content; background: var(--glass); border: 1px solid var(--line2); border-top: 2px solid var(--acc); clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)); box-shadow: var(--shadow-sm); }
.top-menu[hidden] { display: none !important; }
.top-menu .tbtn { flex: 0 0 auto; }
.top-menu .online { align-self: center; }
.menu-toggle { flex: 0 0 auto; }
.menu-toggle.on { color: var(--acc2); border-color: var(--acc); }
.tbtn {
  background: var(--panel2);
  color: var(--dim); border: 1px solid var(--line2);
  flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  padding: clamp(5px, .5vw, 7px) clamp(5px, .7vw, 10px); font: 600 clamp(7px, .62vw, 10px) var(--display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  border-radius: var(--r); white-space: nowrap;
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.tbtn:hover {
  border-color: var(--steel); color: var(--txt);
}
.tbtn:active { transform: translateY(1px); }
.tbtn.icon { flex: 0 0 auto; padding: clamp(5px, .5vw, 7px) clamp(7px, .75vw, 11px); font-size: clamp(10px, .75vw, 12px); }
.tbtn.icon svg { display: block; width: 14px; height: 14px; }
.tbtn .badge {
  font-style: normal; background: var(--acc-dim); color: var(--acc-ink);
  padding: 1px 6px; border-radius: var(--r); font-size: 9px;
  margin-left: 4px; font-weight: 700; letter-spacing: .08em; font-family: var(--mono);
}
.syncstate { display: block; font-size: 8px; letter-spacing: .05em; margin-top: 1px; font-family: var(--mono); }
.syncstate.ok { color: var(--ok); }
.syncstate.warn { color: var(--warn); }
.online {
  font-size: 9px; color: var(--dim2); letter-spacing: .1em; margin-left: 4px; font-family: var(--display);
  max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.modal.on ~ #toasts { top: auto; bottom: 56px; }

/* ---------------- ANA ---------------- */
#main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

#stage { position: relative; flex: 1; min-height: 0; background: var(--crude); }
#field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#field:active { cursor: grabbing; }

/* kenar gölgelik — göz ortaya gider */
#stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    linear-gradient(to bottom, rgba(6,7,8,.55), transparent 92px),
    linear-gradient(to top, rgba(6,7,8,.45), transparent 110px);
}
body.theme-1 #stage::after {
  background:
    linear-gradient(to bottom, rgba(40,44,48,.28), transparent 92px),
    linear-gradient(to top, rgba(40,44,48,.22), transparent 110px);
}

/* paneller (saha üstü) — pah kırılmış mat levha */
.panel {
  position: absolute;
  background: var(--glass);
  border: 1px solid var(--line2);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  z-index: 5;
  animation: panelIn .3s var(--ease) both;
}
.panel::before {
  content: ""; position: absolute; left: 0; top: 0; width: calc(var(--chamfer) + 10px); height: 2px; background: var(--acc-dim);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.panel.right { right: 12px; top: 12px; width: clamp(250px, 24vw, 360px); }
.panel.bottom { top: auto; bottom: 12px; width: 264px; }

#expansion { left: 12px; top: 12px; width: 246px; padding: 10px 12px; }
.phead {
  font: 600 11px/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--acc);
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  padding-right: 26px;
  white-space: nowrap;
}
.phead span { margin-left: auto; font: 400 11px var(--mono); color: var(--txt); flex-shrink: 0; }
.phead em { font-style: normal; font-size: 9px; color: var(--dim2); letter-spacing: .08em; margin-left: auto; }
.phead::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 auto;
  background: var(--acc);
  transform: rotate(45deg);
}
.pbar { height: 5px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.pbar div {
  height: 100%; background: var(--acc);
  width: 0%;
  transition: width .3s linear;
}
.prow { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); margin-top: 6px; font-family: var(--mono); }

/* İnşaat sırası: dikey liste — küçük resim · tesis adı · süre · iptal */
#queue-panel { padding: clamp(8px, .7vw, 10px) clamp(8px, .9vw, 12px); }
#queue { display: flex; flex-direction: column; gap: 4px; }
.qrow {
  position: relative; display: flex; align-items: center; gap: 7px;
  min-width: 0; border: 1px solid var(--warn); background: var(--bg);
  margin: 0; padding: 4px 22px 4px 5px; min-height: 34px; overflow: hidden;
  border-radius: var(--r); transition: border-color .14s, background .14s;
}
.qrow.idle { border-style: dashed; background: rgba(196,155,75,.045); }
.qrow.idle:hover { background: rgba(196,155,75,.12); border-color: var(--acc2); }
.qthumb { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 4px; background: rgba(0,0,0,.22); }
.qplus { width: 22px; flex: 0 0 auto; text-align: center; color: var(--warn); font: 400 17px/1 var(--font); }
.qfill {
  position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none;
  background: rgba(185,129,79,.16);
  transition: width .3s linear;
}
.qtxt { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.qtxt b { display: block; font-size: 8.5px; font-weight: 500; letter-spacing: .03em; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtxt span { display: block; font-size: 8px; color: var(--acc); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtxt .idle-t { color: var(--dim); font-family: var(--font); }
.pnote { font-size: 8.5px; color: var(--dim2); margin-top: 6px; line-height: 1.4; }

#abil-panel { left: 12px; bottom: 12px; padding: 10px 12px; width: 364px; }
#abilities { display: flex; gap: 7px; }
.abil {
  position: relative; flex: 1;
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-bottom: 3px solid var(--line2);
  color: var(--txt); cursor: pointer; padding: 7px 4px 5px; text-align: center;
  display: flex; flex-direction: column; gap: 1px; overflow: hidden;
  border-radius: var(--r); font-family: var(--font);
  transition: border-color .14s var(--ease), transform .14s var(--ease);
}
.abil:hover { border-color: var(--acc); transform: translateY(-2px); }
.abil:active { transform: translateY(0); }
.abil.hot { border-color: var(--acc-dim); border-bottom-color: var(--acc); }
.abil.locked { opacity: .5; filter: grayscale(.4); }
.akey {
  position: absolute; left: 4px; top: 4px; font: 400 10px/15px var(--mono);
  color: var(--txt); background: var(--bg); border: 1px solid var(--line2);
  width: 16px; height: 16px; text-align: center;
}
.aname { font: 600 9px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; margin-top: 13px; white-space: nowrap; }
.asub { font-size: 8px; color: var(--dim); white-space: nowrap; }
.acd { font-size: 8.5px; font-family: var(--mono); color: var(--acc); margin-top: 3px; white-space: nowrap; }
.acd-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: rgba(185,129,79,.2); pointer-events: none;
  transition: height .2s linear;
}

/* saha araç çubuğu: saat/hava + yakınlaştırma — tüm temalara uyumlu */
#field-tools {
  position: absolute; right: 14px; bottom: 14px; z-index: 6;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--tbtn-line); border-radius: 10px;
  background: linear-gradient(155deg, var(--ui0), var(--ui1));
  font-family: var(--mono); font-size: 10.5px; color: var(--ui-txt2);
  box-shadow: var(--shadow-sm);
}
#field-tools #zoomlvl { color: var(--acc2); font-weight: 700; }
#field-tools .zbtn { color: var(--tbtn-txt); }
#field-tools .zbtn:hover { color: var(--tbtn-txt-h); border-color: var(--acc); }
#field-tools .ft-sep { width: 1px; height: 14px; background: var(--ui-line2); }
.zbtn {
  background: var(--bg); border: 1px solid var(--line2); color: var(--dim);
  width: 22px; height: 22px; cursor: pointer; line-height: 1; border-radius: var(--r);
  transition: color .14s, border-color .14s;
}
.zbtn:hover { border-color: var(--acc); color: var(--acc2); }

/* Yüzer dünya haritası butonu */
.fab-world {
  position: absolute; right: 14px; bottom: 78px; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), var(--acc-dim));
  border: 2px solid rgba(240,230,205,.25);
  color: #1a140a; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .18s var(--ease), box-shadow .18s, background .18s;
}
.fab-world:hover { transform: scale(1.08); box-shadow: 0 12px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2); background: linear-gradient(135deg, var(--acc-hover), var(--acc)); }
.fab-world:active { transform: scale(.96); }
.fab-world svg { width: 28px; height: 28px; stroke: currentColor; }

.chat-row.news b { letter-spacing: .5px; }
.chat-row.news.good > b { color: var(--ok); font-weight: 700; }
.chat-row.news.good > span { color: var(--ok); font-weight: 600; }
.chat-row.news.bad > b { color: var(--bad); font-weight: 700; }
.chat-row.news.bad > span { color: var(--bad); font-weight: 600; }
.chat-row.news.ev > b { color: var(--teal); font-weight: 700; }
.chat-row.news.ev > span { color: var(--teal); font-weight: 600; }
.chat-row.news.war > b { color: var(--dim2); font-weight: 700; }
.chat-row.news.war > span { color: var(--news-w); font-weight: 600; }

/* ---------------- ALT ---------------- */
#bottom {
  flex: 0 0 auto; display: flex; height: clamp(236px, 31vh, 322px);
  border-top: 2px solid var(--line2); background: var(--bg2);
}
#left-bottom { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#right-panel {
  width: clamp(300px, 30vw, 420px); border-left: 1px solid var(--line2);
  display: flex; flex-direction: column;
  background: var(--panel);
}

#tabs-bar {
  display: flex; align-items: center; border-bottom: 1px solid var(--line);
  padding: 0 10px; background: var(--panel2);
}
#tabs { display: flex; flex: 1 1 auto; min-width: 0; }
.tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--dim); padding: 11px 15px; cursor: pointer;
  font: 600 11px var(--display); letter-spacing: .14em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
  position: relative; top: 1px;
  transition: color .14s, border-color .14s;
  flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap;
}
.tab i { font-style: normal; color: var(--dim2); font-size: 10px; transition: color .14s; }
.tab:hover { color: var(--txt); border-bottom-color: var(--line2); }
.tab.on {
  color: var(--acc2); border-bottom-color: var(--acc);
}
.tab.on i { color: var(--acc); }

#qty { display: flex; gap: 4px; }
.qtyb {
  background: var(--bg); border: 1px solid var(--line2); color: var(--dim);
  padding: 5px 11px; cursor: pointer; font: 600 10px var(--display); letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--r);
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.qtyb:hover { border-color: var(--acc-dim); color: var(--txt); }
.qtyb.on {
  background: var(--acc-dim); color: var(--acc-ink); border-color: var(--acc); font-weight: 700;
}

#facs {
  flex: 1; overflow-y: auto; padding: 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 11px; align-content: start;
}
#facs::-webkit-scrollbar { width: 9px; }
#facs::-webkit-scrollbar-track { background: transparent; }
#facs::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 0; border: 2px solid var(--bg2); }
#facs::-webkit-scrollbar-thumb:hover { background: var(--acc-dim); }

.fac {
  display: flex; gap: 11px; align-items: center;
  background: var(--panel2);
  border: 1px solid var(--line); padding: 11px; border-radius: var(--r);
  transition: border-color .14s var(--ease);
}
.fac:hover { border-color: var(--acc-dim); }
.fac-ico {
  width: 56px; height: 56px; flex: 0 0 auto;
  background: var(--panel3);
  border: 1px solid var(--line2); color: var(--dim);
  display: flex; align-items: center; justify-content: center;
  font: 700 10px var(--display); letter-spacing: .1em;
  border-radius: var(--r);
}
.fac:hover .fac-ico { color: var(--acc2); border-color: var(--acc-dim); }
.fac-ico { overflow: hidden; padding: 0; }
.fac-ico canvas { width: 100%; height: 100%; display: block; }
.fac-body { flex: 1; min-width: 0; }
.fac-name { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.fac-name .lv { font-size: 10px; color: var(--acc); font-family: var(--mono); font-weight: 400; }
.fac-out { font-size: 10px; color: var(--dim); margin-top: 3px; font-family: var(--mono); }
.fac-meta { font-size: 10px; color: var(--dim2); margin-top: 3px; }
.fac-buy {
  min-width: 132px;
  background: var(--acc-dim);
  border: 1px solid var(--acc-dim); color: var(--acc-ink);
  padding: 11px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  align-items: center; border-radius: var(--r); font-family: var(--font);
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.fac-buy .lbl { font: 700 10px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.fac-buy .pr { font-size: 12px; font-family: var(--mono); font-weight: 700; }
.fac-buy:hover { background: var(--acc-hover); border-color: var(--acc); }
.fac-buy:active { transform: translateY(1px); }
.fac-buy.poor { background: var(--panel3); color: var(--dim); border-color: var(--line2); }
.fac-buy.poor:hover { background: var(--panel3); border-color: var(--line2); transform: none; }
.fac-buy.off {
  background: transparent; color: var(--dim2); cursor: not-allowed;
  border: 1px dashed var(--line2);
}
.fac-buy.off:hover { transform: none; background: transparent; }
.fac-buy .locked { letter-spacing: 2px; }

/* ---------------- BORSA / SEVKİYAT ---------------- */
#rtabs {
  display: flex; border-bottom: 1px solid var(--line);
  background: var(--panel2);
}
#rtabs button {
  flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--dim); padding: 11px; cursor: pointer;
  font: 600 11px var(--display); letter-spacing: .14em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: color .14s;
}
#rtabs button:hover { color: var(--txt); }
#rtabs button.on {
  color: var(--acc2); border-bottom-color: var(--acc);
}
#rtabs .live {
  font-style: normal; font: 700 8px var(--mono); color: var(--ok); border: 1px solid var(--ok);
  padding: 1px 5px; border-radius: var(--r); animation: pulse 2s steps(2, jump-none) infinite;
}
@keyframes pulse { 0%,100%{ opacity: 1; } 50% { opacity: .45; } }

#rp-borsa, #rp-sevkiyat { flex: 1; overflow-y: auto; padding: 10px 12px; }
#rp-borsa::-webkit-scrollbar, #rp-sevkiyat::-webkit-scrollbar { width: 9px; }
#rp-borsa::-webkit-scrollbar-thumb, #rp-sevkiyat::-webkit-scrollbar-thumb {
  background: var(--line2); border-radius: 0; border: 2px solid transparent; background-clip: padding-box;
}

#products { display: flex; gap: 5px; margin-bottom: 8px; }
.prod {
  flex: 1; background: var(--bg); border: 1px solid var(--line); color: var(--dim);
  padding: 5px 2px; cursor: pointer; font: 600 9px var(--display); letter-spacing: .08em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border-radius: var(--r);
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.prod i { font-style: normal; font-size: 8px; color: var(--dim2); letter-spacing: .1em; }
.prod:hover { border-color: var(--line2); color: var(--txt); }
.prod.on {
  border-color: var(--acc); color: var(--acc2); font-weight: 700;
  background: rgba(185,129,79,.12);
}
.prod.off { opacity: .35; cursor: not-allowed; }

.bhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.bprice { font-family: var(--mono); font-size: 24px; color: var(--txt); font-weight: 700; font-variant-numeric: tabular-nums; }
.delta { font-size: 11px; font-family: var(--mono); margin-left: 6px; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--bad); }
.trend {
  font: 700 9px var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px;
  border-radius: var(--r);
}
.trend.up { color: var(--ok); border: 1px solid var(--ok); background: rgba(132,160,110,.08); }
.trend.down { color: var(--bad); border: 1px solid var(--bad); background: rgba(176,96,79,.08); }

.chartwrap {
  position: relative; height: 96px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden; margin-bottom: 8px;
}
#chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.axes {
  position: absolute; right: 6px; top: 6px; bottom: 6px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 9px; color: var(--dim2); font-family: var(--mono); pointer-events: none;
}

.stockrow {
  display: flex; align-items: center; gap: 8px; font: 600 10px var(--display); color: var(--dim);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 7px;
}
.stockrow b { font-size: 17px; color: var(--txt); font-family: var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.autosell {
  margin-left: auto; display: flex; align-items: center; gap: 6px; cursor: pointer;
  font: 600 9px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  background: var(--bg); border: 1px solid var(--line); padding: 5px 8px; border-radius: var(--r);
  transition: color .14s, border-color .14s;
}
.autosell:hover { border-color: var(--acc-dim); color: var(--txt); }
.autosell input { accent-color: var(--acc); }

.sellrow { display: flex; gap: 7px; margin-bottom: 8px; }
.sell {
  flex: 1; background: var(--panel3); border: 1px solid var(--line2); color: var(--txt);
  padding: 9px; cursor: pointer; font: 600 11px var(--display); letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--r);
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.sell:hover { border-color: var(--acc); color: var(--acc2); }
.sell.main {
  background: var(--acc-dim); color: var(--acc-ink); font-weight: 700; border-color: var(--acc); flex: 1.6;
}
.sell.main:hover { background: var(--acc-hover); color: var(--acc-ink); }

.hint { font-size: 10px; color: var(--dim2); line-height: 1.55; }
.hint.dim { opacity: .8; }

.svhead { display: flex; gap: 9px; margin-bottom: 11px; }
.svhead > div {
  flex: 1; border: 1px solid var(--line); padding: 9px;
  background: var(--bg); border-radius: var(--r);
}
.svhead label { display: block; font: 600 9px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 3px; }
.svhead b { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }

#routes { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.route {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); transition: border-color .14s;
}
.route:hover { border-color: var(--line2); }
.route.off { opacity: .45; }
.route b { font-size: 10px; letter-spacing: .1em; color: var(--acc); width: 90px; font-weight: 700; text-transform: uppercase; font-family: var(--display); }
.route span { font-size: 10px; color: var(--dim); flex: 1; }
.route em { font-style: normal; font-size: 10px; font-family: var(--mono); color: var(--txt); }

/* ---------------- YARDIM ---------------- */
#help {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: center;
  padding: 6px 12px; background: var(--bg); border-top: 1px solid var(--line);
  font: 600 9px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--dim2);
  overflow: hidden; flex-wrap: wrap; row-gap: 5px; column-gap: 12px;
}
#help span {
  border: 1px solid var(--line); background: var(--panel2);
  padding: 2px 7px; border-radius: var(--r); white-space: nowrap;
}
#help .mp {
  margin-left: auto; color: var(--acc); letter-spacing: .14em;
  border-color: var(--acc-dim); background: rgba(126,87,55,.18);
}

/* gizli konsol modu (H) */
body.hidden-ui #top, body.hidden-ui #bottom, body.hidden-ui #help,
body.hidden-ui #abil-panel, body.hidden-ui #expansion, body.hidden-ui #queue-panel,
body.hidden-ui #events-panel { display: none !important; }
body.hidden-ui #field-tools { z-index: 20; }

/* ---------------- MODALLER ---------------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(6,6,7,.68);
  display: none; align-items: center; justify-content: center; z-index: 100;
}
.modal.on { display: flex; }
.modal.on .sheet { animation: sheetIn .24s var(--ease) both; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.sheet {
  width: 720px; max-width: 94vw; max-height: 88vh; overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-top: 2px solid var(--acc);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.sheet::-webkit-scrollbar { width: 9px; }
.sheet::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 0; border: 2px solid transparent; background-clip: padding-box; }
.sheet.narrow { width: 460px; }
.mhead {
  display: flex; align-items: center; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel2);
}
.mhead h2 { font-size: 15px; letter-spacing: .18em; text-transform: uppercase; flex: 1; color: var(--acc2); font-weight: 700; }
.close {
  background: var(--panel3); border: 1px solid var(--line2); color: var(--dim);
  width: 30px; height: 30px; cursor: pointer; border-radius: var(--r);
  transition: color .14s, border-color .14s, transform .2s;
}
.close:hover { color: var(--txt); border-color: var(--acc); transform: rotate(90deg); }

#tasks-tabs {
  display: flex; border-bottom: 1px solid var(--line); background: var(--panel2);
}
#tasks-tabs button {
  flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--dim); padding: 11px; cursor: pointer;
  font: 600 10px var(--display); letter-spacing: .16em; text-transform: uppercase;
  transition: color .14s;
}
#tasks-tabs button:hover { color: var(--txt); }
#tasks-tabs button.on {
  color: var(--acc2); border-bottom-color: var(--acc);
}

#tasks-body { padding: 10px 18px 18px; }
.task {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  transition: background .14s;
}
.task:hover { background: rgba(255,255,255,.02); }
.task .tick { width: 20px; text-align: center; color: var(--dim2); font-size: 14px; }
.task.done .tick { color: var(--ok); }
.task.active .tick { color: var(--acc); }
.task .tbody b { display: block; font-size: 12px; }
.task .tbody span { font-size: 10px; color: var(--dim); }
.task.done .tbody b { color: var(--dim); text-decoration: line-through; }
.task.active {
  background: rgba(185,129,79,.08);
  border-left: 3px solid var(--acc);
}
.task .trw { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--acc); font-weight: 700; }

.pz { padding: 18px; }
.pzrow {
  display: flex; justify-content: space-between; padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.pzrow:nth-child(odd) { background: rgba(255,255,255,.02); }
.pzrow label { font: 600 10px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.pzrow b { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.bigbtn {
  width: 100%; margin-top: 16px;
  background: var(--acc-dim);
  border: 1px solid var(--acc); color: var(--acc-ink);
  padding: 14px; font: 700 13px var(--display); letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; border-radius: var(--r);
  transition: background .14s var(--ease);
}
.bigbtn:hover { background: var(--acc-hover); }
.bigbtn:active { transform: translateY(1px); }
.bigbtn.off {
  background: var(--panel3); color: var(--dim2); cursor: not-allowed;
  border-color: var(--line2); transform: none;
}

.bhead3 { display: flex; border-bottom: 1px solid var(--line); background: var(--panel2); }
.bhead3 button {
  flex: 1; background: none; border: none; border-bottom: 2px solid transparent; color: var(--dim);
  padding: 13px; font: 600 10px var(--display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: color .14s;
}
.bhead3 button.on { color: var(--acc2); border-bottom-color: var(--acc); }
.bhead3 button:disabled { opacity: .35; cursor: not-allowed; }

#board-body { padding: 16px 18px; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; height: 174px; margin-bottom: 16px; }
.pod {
  width: 144px; background: var(--panel2);
  border: 1px solid var(--line2); border-top: 3px solid var(--line2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 8px; position: relative; border-radius: var(--r) var(--r) 0 0;
}
.pod.p1 { height: 164px; border-top-color: var(--acc); background: rgba(185,129,79,.08); }
.pod.p2 { height: 132px; }
.pod.p3 { height: 106px; }
.pod b { font-size: 12px; }
.pod span { font-size: 10px; color: var(--acc); font-family: var(--mono); }
.pod em { position: absolute; top: 6px; right: 8px; font-style: normal; color: var(--dim2); font-size: 11px; }

.blist { display: flex; flex-direction: column; }
.brow {
  display: flex; align-items: center; gap: 10px; padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  transition: background .14s;
}
.brow:hover { background: rgba(255,255,255,.02); }
.brow i { font-style: normal; color: var(--dim2); font-size: 10px; width: 28px; font-family: var(--mono); }
.brow b { flex: 1; font-size: 12px; font-weight: 500; }
.brow span { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.brow.me {
  border-left: 3px solid var(--acc);
  background: rgba(185,129,79,.08);
}
.on-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
}

/* dilemma */
.modal.dilemma .sheet {
  border-color: var(--acc);
  padding-bottom: 18px;
}
.dl-timer { height: 5px; background: var(--bg); overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; }
#dl-bar {
  height: 100%; background: var(--acc);
  width: 100%;
  transition: width .3s linear;
}
#modal-dilemma h2 { padding: 16px 20px 4px; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--acc2); font-weight: 700; }
#modal-dilemma p { padding: 0 20px 12px; color: var(--dim); font-size: 12px; line-height: 1.55; }
#dl-opts { display: flex; flex-direction: column; gap: 9px; padding: 4px 20px 0; }
.dl-opt {
  background: var(--bg); border: 1px solid var(--line2); color: var(--txt); text-align: left;
  padding: 13px 15px; cursor: pointer; display: flex; align-items: center; gap: 10px;
  border-radius: var(--r); font-family: var(--font);
  transition: border-color .14s var(--ease);
}
.dl-opt b { flex: 1; font-size: 12px; font-weight: 500; }
.dl-opt span { font-family: var(--mono); color: var(--acc); font-size: 12px; }
.dl-opt:hover { border-color: var(--acc); }
.dl-opt.def { border-style: dashed; opacity: .85; }

/* ---------------- TOAST ---------------- */
#toasts {
  position: fixed; top: 88px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 7px; z-index: 200; pointer-events: none;
}
.toast {
  background: var(--glass);
  border: 1px solid var(--line2); border-left: 3px solid var(--acc);
  padding: 9px 16px; font-size: 11px; letter-spacing: .04em;
  border-radius: var(--r); min-width: 260px; text-align: center;
  box-shadow: var(--shadow-sm);
  animation: toastIn .24s var(--ease) both;
}
.toast.out { animation: toastOut .24s var(--ease) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }
.toast.ok { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }
.toast.bad { border-left-color: var(--bad); }
.toast.star { border-left-color: var(--star); color: var(--star); }

/* ---------------- LEVHA SÜSÜ: perçin ---------------- */
.panel::after, .sheet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 6px 6px, rgba(255,255,255,.09) 1.6px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) 6px, rgba(255,255,255,.09) 1.6px, transparent 2px),
    radial-gradient(circle at 6px calc(100% - 6px), rgba(255,255,255,.09) 1.6px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), rgba(255,255,255,.09) 1.6px, transparent 2px);
}
body.theme-1 .panel::after, body.theme-1 .sheet::after {
  background-image:
    radial-gradient(circle at 6px 6px, rgba(0,0,0,.14) 1.6px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) 6px, rgba(0,0,0,.14) 1.6px, transparent 2px),
    radial-gradient(circle at 6px calc(100% - 6px), rgba(0,0,0,.14) 1.6px, transparent 2px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), rgba(0,0,0,.14) 1.6px, transparent 2px);
}
.sheet { position: relative; }

/* dar ekran */
@media (max-width: 1280px) {
  #right-panel { width: clamp(300px, 29vw, 348px); }
  .stat { padding: 4px 7px; }
  .brand { min-width: 154px; }
  .brand h1 { font-size: 14px; letter-spacing: .16em; }
  .panel.right { width: clamp(250px, 24vw, 320px); }
}
@media (max-width: 1200px) {
  #top { height: auto; min-height: 58px; flex-wrap: wrap; row-gap: 6px; padding-bottom: 10px; }
  .top-actions { margin-left: auto; flex-basis: 100%; order: 20; }
}

@media (max-width: 720px) {
  #bottom { height: clamp(210px, 35vh, 280px); }
  #right-panel { width: 38vw; min-width: 250px; }
  #tabs-bar { overflow: hidden; padding: 0 6px; }
  #tabs { overflow-x: auto; }
  #tabs .tab { flex: 0 0 auto; padding-inline: 10px; }
  #queue-panel { right: 8px; left: 8px; top: 148px; width: auto; max-height: 42%; overflow-y: auto; }
  .panel.right { right: 8px; }
}

/* ---------------- MEKANİKLER: seri / dünya hedefi / düello / sezon ---------------- */

#streak-stat b { color: var(--acc2); }
#streak-stat i.ok { color: var(--ok); }

#wgoal { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line2); }
#wg-fill { background: var(--ok); }
#wg-pct { color: var(--ok) !important; }


#board-season {
  margin: 0 16px 12px; padding: 9px 12px; text-align: center;
  background: var(--bg); border: 1px solid var(--acc-dim); border-radius: var(--r);
  font-family: var(--mono); font-size: 12px; color: var(--acc2); letter-spacing: .05em;
}
.brow .blg {
  font-size: 8px; letter-spacing: .1em; color: var(--dim); border: 1px solid var(--line2);
  padding: 2px 5px; border-radius: var(--r); white-space: nowrap; font-family: var(--display); font-weight: 700; text-transform: uppercase;
}
.brow .bpts { color: var(--acc); font-size: 11px; white-space: nowrap; }
.rbtn {
  background: var(--acc-dim); color: var(--acc-ink);
  border: 1px solid var(--acc); font: 700 9px var(--display); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r);
  cursor: pointer; font-family: var(--font); white-space: nowrap;
  transition: background .14s, transform .14s;
}
.rbtn:hover { background: var(--acc-hover); transform: translateY(-1px); }
.rbtn:active { transform: none; }

/* ============================================================
   ORDU / SALDIRI / SAVUNMA / SOHBET / TAMİRAT
   ============================================================ */

.qcancel {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 17px; height: 17px; border-radius: var(--r);
  border: 1px solid var(--line2); background: var(--bg);
  color: var(--bad); font-size: 10px; line-height: 1; cursor: pointer;
  transition: border-color .14s, color .14s;
}
.qcancel:hover { border-color: var(--bad); color: var(--txt); }
.qfill.wait { background: rgba(140,147,156,.14); }

.fac.rep { border-color: var(--bad); }
.fac.rep .fac-out { color: var(--bad); font-weight: 700; }

#clock-stat b { letter-spacing: .05px; }
#clock-stat i { font-style: normal; font-size: 11px; color: var(--dim); }
#atk-stat b, #def-stat b { font-family: var(--mono); }
#atk-stat i, #def-stat i { font-style: normal; font-size: 11px; color: var(--dim); }

.war-sect { font: 600 10px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 8px 0 5px; }
.war-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 4px; }
.war-kind {
  border: 1px solid var(--line); background: var(--bg);
  border-radius: var(--r); padding: 6px 7px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  transition: border-color .14s;
}
.war-kind b { font-size: 10.5px; color: var(--txt); }
.war-kind span { font-size: 9px; color: var(--dim); font-family: var(--mono); }
.war-kind.on { border-color: var(--acc); background: rgba(185,129,79,.1); }
.war-kind.on b { color: var(--acc2); }

.war-go { display: flex; gap: 6px; margin-top: 10px; }
.war-go select {
  flex: 1; min-width: 0; background: var(--bg); color: var(--txt);
  border: 1px solid var(--line2); border-radius: var(--r); padding: 8px;
  font-size: 12px;
}
.war-fire {
  border: 1px solid var(--bad); background: #7e3a2e;
  color: var(--acc-ink); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 14px; border-radius: var(--r); cursor: pointer; transition: background .14s;
}
.war-fire:hover:not(:disabled) { background: #94483a; }
.war-fire:disabled { opacity: .45; cursor: not-allowed; }
.war-inc-row {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--line); background: var(--bg);
  border-radius: var(--r); padding: 6px 9px; margin: 3px 0;
}
.war-inc-row b { font-size: 11px; color: var(--txt); }
.war-inc-row span { font-size: 10px; color: var(--dim); font-family: var(--mono); }
.war-inc-row.incoming { border-color: var(--bad); background: rgba(176,96,79,.1); }
.war-inc-row.incoming b { color: var(--bad); }

.war-rep { margin-top: 6px; }
.rep-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--bad);
  background: rgba(176,96,79,.1); border-radius: var(--r); margin-bottom: 4px;
}
.rep-row b { font-size: 11px; color: var(--bad); }
.rep-row span { font-size: 10px; font-family: var(--mono); color: var(--dim); }

/* ---- canlı sohbet ---- */
#rp-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
#chat-log {
  flex: 1; min-height: 140px; overflow-y: auto;
  border: 1px solid var(--line); background: var(--bg);
  border-radius: var(--r); padding: 6px; margin-bottom: 6px;
}
.chat-row {
  display: flex; gap: 7px; align-items: baseline;
  font-size: 11.5px; padding: 3px 4px; border-radius: var(--r);
  line-height: 1.35; word-break: break-word;
}
.chat-row:hover { background: rgba(255,255,255,.02); }
.chat-row em { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--dim2); flex-shrink: 0; }
.chat-row b { color: var(--acc); cursor: pointer; font-size: 11.5px; flex-shrink: 0; }
.chat-row b:hover { text-decoration: underline; }
.chat-row span { color: var(--txt); }
.chat-row.sys { background: rgba(185,129,79,.08); }
.chat-row.sys b { color: var(--ok); }
.chat-row.sys span { color: var(--txt); }
.chat-row-input { display: flex; gap: 6px; }
.chat-row-input input {
  flex: 1; min-width: 0; background: var(--bg); color: var(--txt);
  border: 1px solid var(--line2); border-radius: var(--r); padding: 8px; font-size: 12px;
  font-family: var(--font);
}
.chat-row-input input:focus { outline: none; border-color: var(--acc); }
.chat-row-input .sell { min-width: 84px; }

/* ---- profil modalı ---- */
.pf-load { padding: 24px; text-align: center; color: var(--dim); font-size: 12px; }
.pf-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px; margin-bottom: 12px;
}
.pf-grid > div {
  border: 1px solid var(--line); background: var(--bg);
  border-radius: var(--r); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.pf-grid label { font: 600 9.5px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.pf-grid b { font-size: 15px; font-family: var(--mono); color: var(--acc); }
.pf-actions { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.dq-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.dq-actions .bigbtn { margin-top: 0; }
.dq-actions .bigbtn.dq-no { background: #7e3a2e; border-color: var(--bad); color: var(--acc-ink); }
.dq-text { margin: 6px 0 10px; font-size: 13px; }

/* ---- bas-tut yatay sürükleme ---- */
.drag-scroll { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.drag-scroll::-webkit-scrollbar { display: none; }
.drag-scroll:active { cursor: grabbing; }

#rtabs.drag-scroll button, #tabs.drag-scroll .tab, #qty.drag-scroll .qtyb { flex: 1 0 auto; }
#right-panel > div[id^="rp-"] { min-height: 0; }
#rp-chat { height: auto; flex: 1; }

/* ordu sekmeleri */
.war-full { grid-column: 1 / -1; }
.war-kinds .war-sect { grid-column: 1 / -1; margin: 0 0 2px; }
.war-rep { display: flex; flex-direction: column; gap: 4px; }
.war-go .war-fire { flex-shrink: 0; }
#facs .war-kind b { white-space: normal; word-break: break-word; line-height: 1.25; }

/* panel tutamcı */
.drag-handle {
  position: absolute; top: 0; right: 0;
  min-width: 28px; min-height: 19px; padding: 2px 7px 3px; cursor: grab; user-select: none; touch-action: none;
  font-size: 11px; line-height: 1.2; letter-spacing: .1em;
  color: var(--dim2); background: var(--panel3);
  border-left: 1px solid var(--line2); border-bottom: 1px solid var(--line2);
  z-index: 6;
}
.drag-handle:hover { color: var(--acc2); border-color: var(--acc); }
.panel.dragging { opacity: .96; z-index: 30; box-shadow: var(--shadow); }
.panel.dragging .drag-handle { cursor: grabbing; color: var(--acc2); }

/* panel küçültme düğmesi (tutamcın solunda) — simge durumu kayda yazılır */
.min-btn {
  position: absolute; top: 0; right: 28px;
  min-width: 24px; min-height: 19px; padding: 2px 8px 3px;
  font-size: 12px; line-height: 1.2; font-weight: 700;
  color: var(--dim2); background: var(--panel3);
  border: 0; border-left: 1px solid var(--line2); border-bottom: 1px solid var(--line2);
  cursor: pointer; z-index: 6; user-select: none;
}
.min-btn:hover { color: var(--acc2); }
.panel.min .min-btn { color: var(--acc2); }

/* küçültülmüş panel: yalnızca başlık kalır, gövde gizlenir */
#stage .panel.min > :not(.phead):not(.drag-handle):not(.min-btn) { display: none; }
.panel.min .phead { margin-bottom: 0; }

/* tesis/ordu kartları — otomatik ölçek */
#facs {
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: clamp(7px, 0.6vw, 10px);
  padding: clamp(8px, 0.8vw, 12px);
  align-content: start;
}
.fac {
  gap: clamp(8px, 0.7vw, 12px);
  padding: clamp(8px, 0.7vw, 11px);
  border-radius: var(--r);
  align-items: center;
}
.fac:hover { transform: translateY(-1px); }
.fac-ico {
  width: clamp(34px, 2.6vw, 42px); height: clamp(34px, 2.6vw, 42px);
  font-size: clamp(8px, 0.6vw, 9.5px); letter-spacing: .06em;
  border-radius: var(--r); border: 1px solid var(--line2);
}
.fac-body { flex: 1 1 auto; min-width: 0; }
.fac-name { font-size: clamp(10.5px, 0.78vw, 12.5px); gap: 6px; line-height: 1.25; }
.fac-name .lv { font-size: clamp(8.5px, 0.6vw, 10px); flex-shrink: 0; }
.fac-out {
  font-size: clamp(8.5px, 0.6vw, 9.5px); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fac-meta {
  font-size: clamp(8.5px, 0.6vw, 9.5px); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fac-buy {
  min-width: clamp(78px, 5.4vw, 104px);
  padding: clamp(7px, 0.6vw, 10px) clamp(8px, 0.7vw, 12px);
  gap: 2px; border-radius: var(--r); flex-shrink: 0;
}
.fac-buy .lbl { font-size: clamp(8px, 0.58vw, 9.5px); letter-spacing: .08em; white-space: nowrap; }
.fac-buy .pr { font-size: clamp(9.5px, 0.72vw, 12px); white-space: nowrap; }
.fac-buy:hover { transform: translateY(-1px); }
.fac-buy:active { transform: translateY(0); }
.war-kinds { grid-template-columns: repeat(auto-fit, clamp(84px, 6vw, 120px)); gap: clamp(3px, 0.3vw, 5px); }
.war-kind { padding: clamp(5px, 0.4vw, 7px) clamp(6px, 0.5vw, 9px); gap: 2px; border-radius: var(--r); }
.war-kind b { font-size: clamp(8.5px, 0.62vw, 10.5px); }
.war-kind span { font-size: clamp(7.5px, 0.55vw, 9px); }
.war-sect { font-size: clamp(8.5px, 0.62vw, 10px); margin: 5px 0 4px; letter-spacing: .12em; }
.war-go { gap: clamp(5px, 0.4vw, 8px); }
.war-go select { font-size: clamp(9.5px, 0.68vw, 11.5px); padding: clamp(6px, 0.5vw, 8px) 8px; border-radius: var(--r); }
.war-fire { padding: clamp(7px, 0.55vw, 10px) clamp(14px, 1vw, 20px); font-size: clamp(9.5px, 0.7vw, 11.5px); border-radius: var(--r); }
.rep-row { font-size: clamp(8.5px, 0.62vw, 10px); }
.rep-row b { font-size: clamp(9px, 0.66vw, 10.5px); }
.rep-row span { font-size: clamp(8.5px, 0.62vw, 10px); }
#facs .hint { font-size: clamp(8.5px, 0.62vw, 10px); line-height: 1.45; }

/* ---- üst bar taşınca ---- */
.top-actions { row-gap: 4px; }
.online { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }
.sellrow { flex-wrap: wrap; }
.sell { white-space: nowrap; }
.bhead { flex-wrap: wrap; row-gap: 4px; }
.stockrow { flex-wrap: wrap; row-gap: 4px; }

/* ---------------- DÜNYA HARİTASI ---------------- */
#modal-world .sheet.wide { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 0; }
#modal-world .mhead { flex: 0 0 auto; background: rgba(23,25,28,.98); border-bottom: 1px solid var(--line); }
#modal-world .hint { flex: 0 0 auto; margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--dim); line-height: 1.45; }
#world-wrap {
  position: relative; flex: 1 1 auto;
  width: 100%; height: 100%;
  background: #0c1218; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: grab;
}
#world-wrap.grabbing { cursor: grabbing; }
#world-stage {
  position: relative; line-height: 0;
  transform-origin: 0 0; will-change: transform;
  user-select: none;
}
#world-canvas {
  display: block; width: 100%; height: 100%;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
#world-over { position: absolute; inset: 0; pointer-events: none; }
#world-players { position: absolute; inset: 0; pointer-events: none; }
#world-zoomhint {
  position: absolute; left: 12px; bottom: 10px; z-index: 15;
  font: 600 9px var(--display); letter-spacing: .14em; text-transform: uppercase; color: rgba(240,230,205,.55);
  background: rgba(10,14,20,.6); border: 1px solid var(--acc-dim);
  border-radius: var(--r); padding: 4px 8px; pointer-events: none;
}

.wm-p {
  position: absolute; transform: translate(-50%, -82%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  pointer-events: auto; cursor: pointer; z-index: 5;
  transition: filter .15s;
}
.wm-p:hover { filter: brightness(1.2); z-index: 8; }
.wm-p .wm-rig { color: var(--acc); filter: drop-shadow(0 0 4px rgba(240,189,109,.30)); }
.wm-p.mine .wm-rig { color: #3ecf6e; filter: drop-shadow(0 0 5px rgba(62,207,110,.40)); }
/* pompa hareketi: yürüyen kiriş sallanır, krank çarkı döner */
.wm-rig .wm-beam { transform-box: view-box; transform-origin: 16.2px 12.6px; animation: wmBob 2.8s ease-in-out infinite alternate; }
.wm-rig .wm-crank { transform-box: view-box; transform-origin: 24.8px 19.2px; animation: wmSpin 2.8s linear infinite; }
@keyframes wmBob { from { transform: rotate(-5.5deg); } to { transform: rotate(5.5deg); } }
@keyframes wmSpin { to { transform: rotate(360deg); } }

/* üs altı isim etiketi */
.wm-tag {
  position: relative; margin-top: 3px; max-width: 104px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 9px var(--display); letter-spacing: .1em; text-transform: uppercase;
  color: #f4e7c9; background: rgba(9,13,19,.82);
  border: 1px solid rgba(214,160,86,.5); border-radius: var(--r);
  padding: 2px 6px 2px 7px;
  box-shadow: 0 2px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
  backdrop-filter: blur(2px);
}
.wm-tag::before {
  content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-bottom: 4px solid rgba(214,160,86,.55);
}
.wm-tag em { font-style: normal; color: #3ecf6e; margin-right: 3px; }
.wm-p.mine .wm-tag {
  color: #dcffe9; border-color: rgba(62,207,110,.6); background: rgba(7,19,12,.85);
  box-shadow: 0 2px 12px rgba(62,207,110,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
.wm-p.mine .wm-tag::before { border-bottom-color: rgba(62,207,110,.7); }
.wm-p:hover .wm-tag { color: #fff; border-color: var(--acc); }
.wm-p.mine:hover .wm-tag { border-color: #3ecf6e; }

#world-incoming { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
/* saldırı rotası etiketi — koyu zemin, degrade çerçeve, rozet + süre + ilerleme şeridi */
.wm-inc {
  position: absolute; transform: translate(-50%, -50%); z-index: 6;
  display: flex; flex-direction: column;
  border: 1px solid transparent; border-radius: 7px; overflow: hidden;
  background:
    linear-gradient(180deg, #1b1e26 0%, #14161d 52%, #0d0f14 100%) padding-box,
    linear-gradient(135deg, rgba(255,226,152,.95), rgba(216,162,88,.7) 42%, rgba(112,78,28,.9) 78%, rgba(240,192,96,.85)) border-box;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 4px 14px rgba(0,0,0,.7),
    0 0 18px rgba(240,192,96,.22),
    inset 0 1px 0 rgba(255,255,255,.07);
}
.wm-inc-row { display: flex; align-items: center; gap: 6px; padding: 4px 9px; white-space: nowrap; }
.wm-inc-badge {
  display: inline-block;
  font: 700 8.5px var(--display); letter-spacing: .13em; text-transform: uppercase;
  color: #241705;
  background: linear-gradient(180deg, #ffe7ae, #e4ad52);
  border-radius: 4px; padding: 2px 6px 1px;
  box-shadow: 0 0 9px rgba(240,192,96,.4), inset 0 1px 0 rgba(255,255,255,.55);
}
.wm-inc-arrow { color: #f5c96a; font: 700 11px var(--display); text-shadow: 0 0 7px rgba(240,192,96,.65); }
.wm-inc-target {
  font: 700 10.5px var(--display); letter-spacing: .045em; color: #fff;
  max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.95);
}
.wm-inc-time {
  font: 700 9.5px var(--mono); letter-spacing: .02em; color: #ffd98a;
  background: rgba(240,192,96,.10); border: 1px solid rgba(240,192,96,.38);
  border-radius: 999px; padding: 1.5px 7px 1px;
}
.wm-inc-prog {
  display: block; height: 2px;
  background: linear-gradient(90deg, rgba(240,192,96,.3), #f0c060 55%, #ffeab2);
  box-shadow: 0 0 7px rgba(240,192,96,.55);
}
.wm-inc.incoming {
  background:
    linear-gradient(180deg, #251518 0%, #1b0f12 52%, #12090b 100%) padding-box,
    linear-gradient(135deg, rgba(255,158,146,.95), rgba(231,76,60,.75) 42%, rgba(120,28,20,.9) 78%, rgba(255,110,94,.85)) border-box;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 4px 14px rgba(0,0,0,.7),
    0 0 18px rgba(231,76,60,.28),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.wm-inc.incoming .wm-inc-badge {
  color: #2b0907;
  background: linear-gradient(180deg, #ffa89b, #de5a4a);
  box-shadow: 0 0 9px rgba(231,76,60,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.wm-inc.incoming .wm-inc-target { color: #fff1ee; }
.wm-inc.incoming .wm-inc-time { color: #ffb9ad; background: rgba(231,76,60,.12); border-color: rgba(231,76,60,.42); }
.wm-inc.incoming .wm-inc-prog {
  background: linear-gradient(90deg, rgba(231,76,60,.35), #e74c3c 55%, #ffa89b);
  box-shadow: 0 0 7px rgba(231,76,60,.6);
}
.wm-inc-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wm-plane-wrap { position: absolute; pointer-events: none; z-index: 5; transform: translate(-50%,-50%); will-change: left, top; }
.wm-plane-wrap .wm-plane { width: 22px; height: 22px; color: #f0c060; }
.wm-plane-wrap .wm-plane.inc { color: #e74c3c; }
.wc-inc-banner { margin: 6px 0 8px; padding: 6px 8px; border-radius: var(--r); background: rgba(50,10,10,.85); border: 1px solid var(--bad); color: #ffd0d0; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.wc-inc-warn { font-size: 12px; font-weight: 700; color: #ffd0d0; }

#world-card {
  position: absolute; top: 14px; right: 14px; z-index: 20;
  width: 250px; padding: 14px 14px 12px;
  background: rgba(23,25,28,.96);
  border: 1px solid var(--line2); border-top: 2px solid var(--acc);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  pointer-events: auto;
}
#world-card.hidden { display: none; }
#world-card h3 { margin: 0 0 10px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc2); }
#world-card h3 em { font-style: normal; font-size: 10px; color: #3ecf6e; }
#world-card .close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; font-size: 12px; }
.wc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.wc-grid label { display: block; font: 600 9px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.wc-grid b { font-size: 13px; color: var(--txt); }
.wc-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 11px; color: var(--dim); }
.wc-row b { color: var(--txt); }
.wc-hint { font-size: 10px; color: var(--dim); margin: 0 0 10px; line-height: 1.4; }
#world-card .tbtn { width: 100%; margin-top: 6px; }
.world-war-menu { margin: 8px 0 6px; border: 1px solid var(--line2); background: var(--bg); }
.world-war-menu summary { cursor: pointer; list-style: none; padding: 7px 9px; color: var(--acc2); font: 700 10px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.world-war-menu summary::-webkit-details-marker { display: none; }
.world-war-menu summary::before { content: '+'; display: inline-block; width: 15px; color: var(--warn); font: 700 14px/1 var(--mono); }
.world-war-menu[open] summary::before { content: '−'; }
.world-war-menu summary b { float: right; color: var(--txt); font: 600 9px var(--mono); letter-spacing: 0; text-transform: none; }
.world-war-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 0 5px 5px; }
.world-war-kind { min-width: 0; padding: 6px; text-align: left; color: var(--dim); background: var(--panel2); border: 1px solid var(--line); cursor: pointer; border-radius: var(--r); }
.world-war-kind b, .world-war-kind span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.world-war-kind b { color: var(--txt); font-size: 9px; }
.world-war-kind span { margin-top: 2px; color: var(--dim); font: 8px var(--mono); }
.world-war-kind:hover, .world-war-kind.on { border-color: var(--acc); background: rgba(185,129,79,.12); }
.world-war-kind.on b { color: var(--acc2); }
.world-war-go { border-color: var(--bad); background: #7e3a2e; color: var(--acc-ink); }
.world-war-go:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.3); }

/* ============================================================
   VISUAL SYSTEM V2 — operasyon merkezi HUD
   Daha belirgin hiyerarsi, guvenli kart araliklari ve responsive akış.
   ============================================================ */
:root {
  --bg: #081116;
  --bg2: #0d1a20;
  --panel: #101d23;
  --panel2: #15262d;
  --panel3: #1c3239;
  --line: #203941;
  --line2: #35515a;
  --txt: #e4edf0;
  --dim: #91a8ae;
  --dim2: #607b83;
  --acc: #d99b4d;
  --acc2: #f0bd6d;
  --acc-dim: #805a32;
  --acc-hover: #a97239;
  --acc-ink: #fff3df;
  --steel: #9db7bd;
  --crude: #061016;
  --ok: #69c49d;
  --warn: #e0ad58;
  --bad: #d06a5b;
  --star: #f0bd6d;
  --teal: #4fd6c3;
  --news-w: #f2f8f7;
  --glass: rgba(13, 27, 33, .96);
  --shadow: 0 16px 36px rgba(0, 0, 0, .28);
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, .24);
  --chamfer: 0;
  /* --- yüzey token'ları (tema duyarlı arayüz) — varsayılan: gece petrol --- */
  --page-a: #1d3941; --page-b: #050b0e;
  --stage-bg: #061015;
  --ui0: #13252c; --ui1: #0d1a20; --ui-line: #3a5961; --ui-line2: #2d4b54; --ui-hi: #45626a;
  --card0: rgba(24,43,50,.98); --card1: rgba(14,27,33,.98); --card-line: #29444c;
  --pnl0: rgba(16,34,41,.97); --pnl1: rgba(9,20,25,.97); --pnl-line: #35535c;
  --elev0: rgba(25,47,54,.98); --elev1: rgba(15,31,37,.98);
  --tile: #0a171c; --tile-line: #37535b; --well: #071217; --well-line: #2a444c;
  --tbtn-bg: #162b32; --tbtn-line: #35525a; --tbtn-txt: #a4bbc0; --tbtn-hov: #1d3840; --tbtn-txt-h: #fff1d5;
  --menu-bg: rgba(12,28,34,.98);
  --tabbar-bg: rgba(21,43,50,.84); --mhead-bg: rgba(21,45,52,.8);
  --sheet0: #13272f; --sheet1: #0c181e;
  --ui-txt: #eef4f4; --ui-txt2: #cfe0e0;
  --lbl: #8faab1; --lbl2: #66838b; --info: #76919a;
  --amber-line: #7d5a33; --qrow-bg: rgba(4,13,17,.62);
  --burn-bg: rgba(96,26,12,.28); --burn-tx: #ffab6a;
  --btn0: #a46e38; --btn1: #704b2a; --btn0h: #c28a4c; --btn1h: #8d5d30;
  --brand1: #d9a24f; --brand2: #f7d79b; --brand3: #fff3d8;
  --brand-txt: #f4e5cf; --brand-sh: rgba(0,0,0,.5); --brand-glow: rgba(217,155,77,.18);
  --op-txt: #d5e6e8; --val-k: #86a0a7; --val-b: #ffd98c;
}

body.theme-0 {
  --bg: #081116; --bg2: #0d1a20; --panel: #101d23; --panel2: #15262d; --panel3: #1c3239;
  --line: #203941; --line2: #35515a; --txt: #e4edf0; --dim: #91a8ae; --dim2: #607b83;
  --acc: #d99b4d; --acc2: #f0bd6d; --acc-dim: #805a32; --acc-hover: #a97239; --acc-ink: #fff3df;
  --steel: #9db7bd; --crude: #061016; --ok: #69c49d; --warn: #e0ad58; --bad: #d06a5b; --star: #f0bd6d;
  --teal: #4fd6c3; --news-w: #f2f8f7;
  --glass: rgba(13,27,33,.96);
}
/* --- TEMA 1 — AÇIK (deniz/platin, soğuk) --- */
body.theme-1 {
  --bg: #dce5e6; --bg2: #e8eff0; --panel: #edf3f3; --panel2: #f6f9f8; --panel3: #dce8e8;
  --line: #c1d0d2; --line2: #9db3b7; --txt: #14252a; --dim: #4c656b; --dim2: #738b90;
  --acc: #9a622d; --acc2: #7b481f; --acc-dim: #bd9163; --acc-hover: #79491f; --acc-ink: #fff9ef;
  --steel: #4d6970; --crude: #c6d4d5; --ok: #3f805f; --warn: #946b25; --bad: #a34d40; --star: #946b25;
  --teal: #1c8578; --news-w: #16333a;
  --glass: rgba(237,243,243,.96);
  --shadow: 0 16px 36px rgba(44,58,62,.22); --shadow-sm: 0 8px 20px rgba(44,58,62,.16);
  --page-a: #f2f7f7; --page-b: #c3d2d4;
  --stage-bg: #061015;
  --ui0: #f4f8f8; --ui1: #e4edee; --ui-line: #b3c6c9; --ui-line2: #c5d4d6; --ui-hi: #a3b8bc;
  --card0: rgba(247,251,251,.98); --card1: rgba(232,240,241,.98); --card-line: #bcd0d2;
  --pnl0: rgba(247,251,251,.97); --pnl1: rgba(233,241,242,.97); --pnl-line: #b3c6c9;
  --elev0: rgba(242,248,248,.98); --elev1: rgba(228,238,239,.98);
  --tile: #eef4f4; --tile-line: #c5d4d6; --well: #dfe9ea; --well-line: #c5d4d6;
  --tbtn-bg: #eaf1f1; --tbtn-line: #b3c6c9; --tbtn-txt: #3d5c63; --tbtn-hov: #e0eaea; --tbtn-txt-h: #14252a;
  --menu-bg: rgba(244,249,249,.98);
  --tabbar-bg: rgba(228,238,239,.86); --mhead-bg: rgba(228,238,239,.86);
  --sheet0: #f4f8f8; --sheet1: #e6efef;
  --ui-txt: #14252a; --ui-txt2: #33535c;
  --lbl: #4c656b; --lbl2: #6b858c; --info: #5d7a82;
  --amber-line: #ad8a56; --qrow-bg: rgba(0,0,0,.05);
  --burn-bg: rgba(178,80,44,.14); --burn-tx: #a8501f;
  --btn0: #8a5a2a; --btn1: #66411c; --btn0h: #a06f3c; --btn1h: #7d5222;
  --brand1: #9a621f; --brand2: #bd8a3e; --brand3: #e0b064;
  --brand-txt: #6b4a1f; --brand-sh: rgba(255,255,255,.55); --brand-glow: rgba(154,98,31,.15);
  --op-txt: #2f4a50; --val-k: #6b858c; --val-b: #7b481f;
}
/* --- TEMA 2 — KOYU (kehribar/zeytin) --- */
body.theme-2 {
  --bg: #11120f; --bg2: #1a1c16; --panel: #1d2019; --panel2: #28291f; --panel3: #343326;
  --line: #3b3a2b; --line2: #5c5540; --txt: #f1e7d3; --dim: #b0a388; --dim2: #82785f;
  --acc: #d69a48; --acc2: #f2bd6b; --acc-dim: #855d31; --acc-hover: #a97136; --acc-ink: #fff4df;
  --steel: #a3a79b; --crude: #0d100e; --ok: #7bb480; --warn: #d2a449; --bad: #c46a55; --star: #e1af59;
  --teal: #54d8c2; --news-w: #f4f6ee;
  --glass: rgba(29,32,25,.97);
  --shadow: 0 16px 36px rgba(0,0,0,.3); --shadow-sm: 0 8px 20px rgba(0,0,0,.26);
  --page-a: #2f2a1a; --page-b: #0a0906;
  --stage-bg: #0a0907;
  --ui0: #2b2416; --ui1: #191309; --ui-line: #5c5540; --ui-line2: #3b3a2b; --ui-hi: #6b5f42;
  --card0: rgba(48,42,28,.98); --card1: rgba(30,26,18,.98); --card-line: #4a4028;
  --pnl0: rgba(38,33,22,.97); --pnl1: rgba(24,20,13,.97); --pnl-line: #5c5540;
  --elev0: rgba(52,46,30,.98); --elev1: rgba(34,29,19,.98);
  --tile: #1d1a12; --tile-line: #4a4028; --well: #120f08; --well-line: #423a26;
  --tbtn-bg: #2a2416; --tbtn-line: #4a4028; --tbtn-txt: #b0a388; --tbtn-hov: #352d1c; --tbtn-txt-h: #f6ecd8;
  --menu-bg: rgba(28,24,14,.98);
  --tabbar-bg: rgba(43,37,24,.85); --mhead-bg: rgba(43,37,24,.82);
  --sheet0: #241f14; --sheet1: #171208;
  --ui-txt: #f1e7d3; --ui-txt2: #d6c9ab;
  --lbl: #b0a388; --lbl2: #82785f; --info: #96896c;
  --amber-line: #7d6233; --qrow-bg: rgba(8,7,4,.6);
  --burn-bg: rgba(96,26,12,.28); --burn-tx: #ffab6a;
  --btn0: #a4702f; --btn1: #6e4a1e; --btn0h: #c08a44; --btn1h: #8a5c28;
  --brand1: #d9a24f; --brand2: #f7d79b; --brand3: #fff3d8;
  --brand-txt: #f6ecd8; --brand-sh: rgba(0,0,0,.5); --brand-glow: rgba(217,155,77,.18);
  --op-txt: #e6ddc8; --val-k: #9c9077; --val-b: #ffd98c;
}
/* --- TEMA 3 — AÇIK (çöl kumu, sıcak) --- */
body.theme-3 {
  --bg: #e7ddc6; --bg2: #efe7d2; --panel: #f3ecda; --panel2: #f9f4e6; --panel3: #e3d7bb;
  --line: #cdbf9f; --line2: #ab9c7d; --txt: #2c2416; --dim: #6b5e46; --dim2: #8c7e63;
  --acc: #96631f; --acc2: #7a4e18; --acc-dim: #c09a63; --acc-hover: #7d5219; --acc-ink: #fffaf0;
  --steel: #6e5f42; --crude: #d8cbac; --ok: #3f7a4e; --warn: #8f6a22; --bad: #a84a38; --star: #8f6a22;
  --teal: #1f7f74; --news-w: #1f2b22;
  --glass: rgba(243,236,218,.96);
  --shadow: 0 16px 36px rgba(74,62,38,.24); --shadow-sm: 0 8px 20px rgba(74,62,38,.16);
  --page-a: #f7f0dd; --page-b: #cfc0a0;
  --stage-bg: #0d0b07;
  --ui0: #f7f1e0; --ui1: #e9dfc6; --ui-line: #c9b998; --ui-line2: #d6c9ad; --ui-hi: #b09e7c;
  --card0: rgba(251,246,233,.98); --card1: rgba(238,229,209,.98); --card-line: #c9b998;
  --pnl0: rgba(251,246,233,.97); --pnl1: rgba(240,231,211,.97); --pnl-line: #c9b998;
  --elev0: rgba(246,240,226,.98); --elev1: rgba(235,226,206,.98);
  --tile: #f0e8d4; --tile-line: #cdbf9f; --well: #e4d9be; --well-line: #cdbf9f;
  --tbtn-bg: #efe7d2; --tbtn-line: #c9b998; --tbtn-txt: #5c5138; --tbtn-hov: #e5dac0; --tbtn-txt-h: #2c2416;
  --menu-bg: rgba(248,242,229,.98);
  --tabbar-bg: rgba(236,226,206,.86); --mhead-bg: rgba(236,226,206,.86);
  --sheet0: #f7f1e0; --sheet1: #ece2cb;
  --ui-txt: #2c2416; --ui-txt2: #514733;
  --lbl: #6b5e46; --lbl2: #8c7e63; --info: #7a6c50;
  --amber-line: #b08b52; --qrow-bg: rgba(0,0,0,.05);
  --burn-bg: rgba(178,80,44,.14); --burn-tx: #a8501f;
  --btn0: #8f5f26; --btn1: #6b451c; --btn0h: #a5713a; --btn1h: #7d5222;
  --brand1: #96631f; --brand2: #ba8a3c; --brand3: #dcae60;
  --brand-txt: #6b4a1f; --brand-sh: rgba(255,255,255,.55); --brand-glow: rgba(150,99,31,.16);
  --op-txt: #4a3f2b; --val-k: #8c7e63; --val-b: #7a4e18;
}
/* --- TEMA 4 — KOYU (bordo füme) --- */
body.theme-4 {
  --bg: #190d11; --bg2: #221218; --panel: #26141a; --panel2: #301a21; --panel3: #3c222a;
  --line: #442430; --line2: #5f3542; --txt: #f4e6e0; --dim: #ba9891; --dim2: #8d6d68;
  --acc: #d97a4f; --acc2: #f09a6a; --acc-dim: #8a4a30; --acc-hover: #b05f3a; --acc-ink: #fff1e9;
  --steel: #b39aa0; --crude: #120a0d; --ok: #6fbd92; --warn: #e0ad58; --bad: #d05a4a; --star: #e8a06a;
  --teal: #4fd6c3; --news-w: #f7eeea;
  --glass: rgba(38,20,26,.96);
  --shadow: 0 16px 36px rgba(0,0,0,.34); --shadow-sm: 0 8px 20px rgba(0,0,0,.3);
  --page-a: #3a1c24; --page-b: #0a0507;
  --stage-bg: #0d0709;
  --ui0: #2d161d; --ui1: #1c0f13; --ui-line: #5f3542; --ui-line2: #442430; --ui-hi: #6b3f4c;
  --card0: rgba(48,26,33,.98); --card1: rgba(30,16,20,.98); --card-line: #4c2933;
  --pnl0: rgba(40,22,28,.97); --pnl1: rgba(26,14,18,.97); --pnl-line: #5f3542;
  --elev0: rgba(54,30,37,.98); --elev1: rgba(36,19,24,.98);
  --tile: #1e1014; --tile-line: #4c2933; --well: #140a0d; --well-line: #47242e;
  --tbtn-bg: #2b161d; --tbtn-line: #4c2933; --tbtn-txt: #c9a2a4; --tbtn-hov: #38202a; --tbtn-txt-h: #fff1e9;
  --menu-bg: rgba(30,16,20,.98);
  --tabbar-bg: rgba(48,26,33,.85); --mhead-bg: rgba(48,26,33,.82);
  --sheet0: #2b161d; --sheet1: #1c0f13;
  --ui-txt: #f4e6e0; --ui-txt2: #dcc0c0;
  --lbl: #ba9891; --lbl2: #8d6d68; --info: #a5837c;
  --amber-line: #8a5a3a; --qrow-bg: rgba(12,6,8,.6);
  --burn-bg: rgba(120,30,20,.3); --burn-tx: #ffab8a;
  --btn0: #a4563a; --btn1: #74381f; --btn0h: #c06a48; --btn1h: #8a4527;
  --brand1: #d9a24f; --brand2: #f7d79b; --brand3: #fff3d8;
  --brand-txt: #f6e3d5; --brand-sh: rgba(0,0,0,.5); --brand-glow: rgba(217,122,79,.2);
  --op-txt: #e8d2d2; --val-k: #a8888a; --val-b: #ffd98c;
}
/* --- TEMA 5 — AÇIK (adaçayı, doğal) --- */
body.theme-5 {
  --bg: #e5ebe1; --bg2: #eef3e9; --panel: #f1f6ee; --panel2: #f8fbf5; --panel3: #dde7d7;
  --line: #c5d1bd; --line2: #a4b59b; --txt: #20301f; --dim: #55705a; --dim2: #7c9280;
  --acc: #7d5a22; --acc2: #644716; --acc-dim: #b1955f; --acc-hover: #684a18; --acc-ink: #fbf8ef;
  --steel: #5a7060; --crude: #cdd8c6; --ok: #3f7a4e; --warn: #8f6a22; --bad: #a84a3a; --star: #8f6a22;
  --teal: #1f7f74; --news-w: #16301f;
  --glass: rgba(241,246,238,.96);
  --shadow: 0 16px 36px rgba(52,70,54,.22); --shadow-sm: 0 8px 20px rgba(52,70,54,.15);
  --page-a: #f6faf2; --page-b: #c9d8c2;
  --stage-bg: #0a0d09;
  --ui0: #f4f9f0; --ui1: #e6ede1; --ui-line: #b7c6ae; --ui-line2: #cdd8c5; --ui-hi: #9cb094;
  --card0: rgba(247,251,244,.98); --card1: rgba(233,240,228,.98); --card-line: #c0cfb8;
  --pnl0: rgba(247,251,244,.97); --pnl1: rgba(234,241,229,.97); --pnl-line: #b7c6ae;
  --elev0: rgba(243,248,239,.98); --elev1: rgba(231,239,225,.98);
  --tile: #eef4ea; --tile-line: #c5d1bd; --well: #e2eadc; --well-line: #c5d1bd;
  --tbtn-bg: #ecf3e8; --tbtn-line: #b7c6ae; --tbtn-txt: #45604c; --tbtn-hov: #e0e9db; --tbtn-txt-h: #20301f;
  --menu-bg: rgba(244,249,240,.98);
  --tabbar-bg: rgba(230,238,225,.86); --mhead-bg: rgba(230,238,225,.86);
  --sheet0: #f4f9f0; --sheet1: #e8f0e3;
  --ui-txt: #20301f; --ui-txt2: #3c5544;
  --lbl: #55705a; --lbl2: #7c9280; --info: #68826f;
  --amber-line: #a8885a; --qrow-bg: rgba(0,0,0,.05);
  --burn-bg: rgba(178,80,44,.14); --burn-tx: #a8501f;
  --btn0: #7c5c26; --btn1: #5c421a; --btn0h: #92703a; --btn1h: #6e4f20;
  --brand1: #7d5a22; --brand2: #a07c36; --brand3: #c9a35c;
  --brand-txt: #5c451c; --brand-sh: rgba(255,255,255,.55); --brand-glow: rgba(125,90,34,.15);
  --op-txt: #3c5144; --val-k: #7c9280; --val-b: #644716;
}

body {
  background: radial-gradient(circle at 50% -20%, var(--page-a) 0, var(--bg) 44%, var(--page-b) 100%);
  color: var(--txt);
}

button, input, select { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }

#top {
  gap: 7px;
  padding: 9px 12px;
  min-height: 84px;
  height: clamp(76px, 8.5vh, 92px);
  background: linear-gradient(180deg, var(--ui0) 0%, var(--ui1) 100%);
  border-bottom: 1px solid var(--ui-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
#top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--acc), var(--steel) 48%, var(--acc));
  opacity: .8;
}
#top::after { height: 1px; background: rgba(217,155,77,.5); }
.brand {
  gap: 12px;
  padding-right: 16px;
  border-right-color: var(--ui-line2);
  flex: 0 1 clamp(230px, 17vw, 310px);
  min-width: 210px;
}
.logo {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.28));
  animation: logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
.logo::before {
  content: ""; position: absolute; inset: -9px; border-radius: 20px; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(240,189,109,.30), rgba(240,189,109,.05) 58%, transparent 72%);
  animation: logoGlow 5s ease-in-out infinite;
}
@keyframes logoGlow { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
.brand-txt { min-width: 0; }
.brand h1 { color: var(--brand-txt); letter-spacing: .14em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand h1 {
    background: linear-gradient(to right, var(--brand1) 0%, var(--brand2) 25%, var(--brand3) 50%, var(--brand2) 75%, var(--brand1) 100%);
    background-size: 200% 100%;
    background-position: 0% center;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 1px 0 var(--brand-sh)) drop-shadow(0 0 10px var(--brand-glow));
    animation: brandSheen 9s linear infinite;
  }
}
@keyframes brandSheen { 0% { background-position: 0% center; } 100% { background-position: -200% center; } }
.brand .op { display: flex; align-items: center; gap: 6px; color: var(--op-txt); letter-spacing: .18em; margin-top: 3px; }
.brand .op .op-badge {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  font: 700 8px var(--display); color: #23150a; letter-spacing: 0;
  background: radial-gradient(circle at 35% 30%, #ffe7b3, #e2ae57 45%, #a06a24);
  box-shadow: 0 0 0 1px rgba(255,231,179,.45), 0 0 8px rgba(226,174,87,.35), inset 0 -1px 2px rgba(90,55,10,.55);
}
.brand .op span:not(.op-badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.brand .val { display: flex; align-items: baseline; gap: 6px; color: var(--acc2); margin-top: 2px; }
.brand .val .val-k { font: 600 8.5px var(--display); letter-spacing: .18em; color: var(--val-k); }
.brand .val b { font: 700 clamp(10px, .72vw, 12px) var(--mono); color: var(--val-b); text-shadow: 0 0 9px rgba(240,189,109,.3); font-variant-numeric: tabular-nums; }
.stat {
  min-height: 62px;
  padding: 6px 10px;
  border-color: var(--card-line);
  border-radius: 8px;
  background: linear-gradient(155deg, var(--card0), var(--card1));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.12);
}
.stat:hover { border-color: var(--acc-dim); transform: translateY(-1px); }
.stat label { color: var(--lbl); letter-spacing: .12em; }
.stat label em { color: var(--lbl2); }
.stat b { color: var(--ui-txt); }
.stat i { color: var(--info); }
.stat i.ok { color: var(--ok); }
.stat i.warn { color: var(--warn); }
.bar { height: 6px; background: var(--well); border-color: var(--well-line); border-radius: 99px; }
.bar div { background: linear-gradient(90deg, var(--acc-dim), var(--acc2)); border-radius: 99px; }
.top-actions { gap: 5px; }
.tbtn {
  border-color: var(--tbtn-line);
  border-radius: 7px;
  background: var(--tbtn-bg);
  color: var(--tbtn-txt);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.tbtn:hover { border-color: var(--acc); color: var(--tbtn-txt-h); background: var(--tbtn-hov); }
.tbtn.icon { color: var(--acc2); }
.top-menu {
  border-color: var(--ui-hi);
  border-top-color: var(--acc);
  border-radius: 10px;
  background: var(--menu-bg);
  box-shadow: var(--shadow);
}

#stage {
  background: var(--stage-bg);
  isolation: isolate;
}
#stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(92,155,165,.06), transparent 22%, transparent 78%, rgba(217,155,77,.045));
}
#stage::after {
  z-index: 3;
  background: linear-gradient(to bottom, rgba(3,10,13,.52), transparent 100px), linear-gradient(to top, rgba(3,9,12,.48), transparent 130px);
}
.panel {
  background: linear-gradient(155deg, var(--pnl0), var(--pnl1));
  border: 1px solid var(--pnl-line);
  border-radius: 12px;
  clip-path: none;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel::before { width: 58px; height: 3px; background: linear-gradient(90deg, var(--acc), transparent); }
.panel::after { opacity: .65; }
.panel.right { right: 14px; top: 14px; width: clamp(280px, 25vw, 390px); }
.panel.bottom { bottom: 14px; }
/* SAHA GENİŞLETME: kompakt gerçek ölçü (scale transform'u yok — yazılar net kalır) */
#expansion { left: 14px; top: 14px; width: 216px; padding: 10px 11px; animation: expPanelIn .3s var(--ease) both; }
@keyframes expPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
#expansion .phead { font-size: 9.5px; letter-spacing: .12em; }
#expansion .phead span { font-size: 9.5px; }
#expansion .prow { font-size: 8.5px; }
#expansion .pbar { height: 4px; }
/* İNŞAAT SIRASI: sahanın solu, dikey liste; SAHA GENİŞLETME'nin altında konumlanır */
#queue-panel { left: 14px; top: 206px; width: 216px; padding: 8px 10px 7px; }
/* SAHA YETENEKLERİ: kompakt */
#abil-panel { left: 14px; bottom: 14px; width: 208px; padding: 8px 10px 7px; }
.phead { color: var(--acc2); letter-spacing: .14em; }
.phead::before { background: var(--acc); box-shadow: 0 0 0 3px rgba(217,155,77,.09); }
.pbar { border-color: var(--well-line); background: var(--well); border-radius: 99px; }
.pbar div { background: linear-gradient(90deg, var(--steel), var(--acc)); border-radius: 99px; }
.prow { color: var(--dim); }
.qrow {
  min-height: 34px;
  border-color: var(--amber-line);
  border-radius: 8px;
  background: var(--qrow-bg);
}
.qrow.idle { background: rgba(217,155,77,.06); border-color: var(--amber-line); }
.qrow.idle:hover { background: rgba(217,155,77,.15); }
.qfill { background: rgba(217,155,77,.22); }
.qtxt b { color: var(--ui-txt); }
.qtxt span { color: var(--acc2); }
.qplus { color: var(--acc2); }
.pnote { color: var(--dim); }
.abil {
  border-color: var(--pnl-line);
  border-bottom-color: var(--ui-hi);
  border-radius: 8px;
  background: linear-gradient(155deg, var(--elev0), var(--elev1));
}
.abil:hover { border-color: var(--acc); box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.abil.hot { border-color: var(--acc); border-bottom-color: var(--acc); background: rgba(217,155,77,.13); }
.akey { border-color: var(--ui-hi); border-radius: 4px; color: var(--ui-txt2); }
.aname { color: var(--ui-txt); }
.asub { color: var(--dim); }
.acd { color: var(--acc2); }
/* kompakt yetenek kartları — %50 genişlikte de yazılar okunur kalır */
#abil-panel .phead em { display: none; }
#abilities { gap: 4px; }
#abil-panel .abil { padding: 5px 2px 4px; }
#abil-panel .akey { width: 13px; height: 13px; font: 400 8px/13px var(--mono); left: 3px; top: 3px; }
#abil-panel .aname { font-size: 8px; line-height: 1.15; margin-top: 11px; letter-spacing: .04em; white-space: normal; }
#abil-panel .asub { display: none; }
#abil-panel .acd { font-size: 7.5px; margin-top: 2px; }
/* kompakt inşaat sırası satırları — dikey liste ölçüsü */
#queue { gap: 4px; }
#queue-panel .qrow { min-height: 32px; }
#queue-panel .qthumb { width: 20px; height: 20px; }
#queue-panel .qplus { width: 20px; font-size: 15px; }
#queue-panel .pnote { margin-top: 5px; line-height: 1.35; }
/* hasarlı liste varken panel alttaki SAHA YETENEKLERİ paneline taşmasın (dar pencerede içeriden kayar) */
#queue-panel.has-reps { overflow-y: auto; }
#queue-panel::-webkit-scrollbar { width: 8px; }
#queue-panel::-webkit-scrollbar-track { background: transparent; }
#queue-panel::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 0; border: 2px solid var(--bg2); }
#queue-panel::-webkit-scrollbar-thumb:hover { background: var(--acc-dim); }
/* DEVRE DIŞI — hasarlı tesis listesi (İNŞAAT SIRASI panelinin alt bölümü) */
#repairs-panel { margin-top: 7px; border-top: 1px solid var(--ui-line2); padding-top: 6px; }
#repairs-panel .qrep-head { font: 600 9px/1 var(--mono); letter-spacing: .14em; color: var(--acc2); margin-bottom: 4px; }
.qrep { display: flex; align-items: center; gap: 5px; min-height: 22px; padding: 2px 6px; margin-bottom: 4px; border: 1px solid var(--amber-line); border-radius: 7px; background: var(--qrow-bg); }
.qrep:last-child { margin-bottom: 0; }
.qrep .qrep-ic { font-size: 10px; line-height: 1; }
.qrep b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 500; color: var(--ui-txt); }
.qrep em { font-style: normal; font-size: 9.5px; color: var(--acc2); white-space: nowrap; }
.qrep.burn { border-color: #a04a30; background: var(--burn-bg); }
.qrep.burn em { color: var(--burn-tx); }
.zbtn { border-color: var(--tbtn-line); border-radius: 6px; background: var(--tile); }

#bottom {
  height: clamp(260px, 33vh, 350px);
  gap: 10px;
  padding: 10px 12px 8px;
  border-top: 1px solid var(--ui-line2);
  background: linear-gradient(180deg, var(--ui1), var(--bg));
}
#left-bottom, #right-panel {
  border: 1px solid var(--ui-line2);
  border-radius: 12px;
  background: linear-gradient(155deg, var(--elev1), var(--pnl1));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
#right-panel { width: clamp(320px, 29vw, 440px); border-left: 1px solid var(--ui-line2); }
#tabs-bar, #rtabs { background: var(--tabbar-bg); border-bottom-color: var(--ui-line2); }
#tabs-bar { padding: 0 12px; }
.tab, #rtabs button { color: var(--dim); }
.tab:hover, #rtabs button:hover { color: var(--ui-txt); }
.tab.on, #rtabs button.on { color: var(--acc2); border-bottom-color: var(--acc); }
.tab i { color: var(--dim2); }
#qty { gap: 5px; }
.qtyb { border-color: var(--tbtn-line); border-radius: 6px; background: var(--tile); }
.qtyb.on { background: var(--btn1); border-color: var(--acc); }
#facs { gap: 10px; padding: 12px; background: rgba(127,127,127,.08); }
.fac {
  gap: 12px;
  padding: 12px;
  min-height: 92px;
  border-color: var(--card-line);
  border-radius: 10px;
  background: linear-gradient(145deg, var(--elev0), var(--elev1));
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}
.fac:hover { border-color: var(--amber-line); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.fac-ico { width: 48px; height: 48px; border-color: var(--tbtn-line); border-radius: 8px; background: var(--tile); color: var(--info); }
.fac:hover .fac-ico { color: var(--acc2); border-color: var(--acc); background: rgba(217,155,77,.1); }
.fac-name { color: var(--ui-txt); align-items: flex-start; }
.fac-title { min-width: 0; flex: 1 1 auto; line-height: 1.2; overflow-wrap: break-word; }
.fac-name .lv { color: var(--acc2); }
.fac-out { color: var(--dim); }
.fac-meta { color: var(--lbl2); }
.fac-buy { min-width: 112px; border-radius: 8px; border-color: var(--acc); background: linear-gradient(155deg, var(--btn0), var(--btn1)); }
.fac-buy:hover { background: linear-gradient(155deg, var(--btn0h), var(--btn1h)); }
.fac-buy.off, .fac-buy.poor { background: var(--tile); border-color: var(--tbtn-line); color: var(--dim2); }

#rtabs button { padding: 13px 8px; }
#rp-borsa, #rp-sevkiyat { padding: 13px 14px; }
#products { gap: 6px; }
.prod { border-color: var(--ui-line2); border-radius: 7px; background: var(--tile); }
.prod.on { border-color: var(--acc); background: rgba(217,155,77,.13); color: var(--acc2); }
.bprice { color: var(--ui-txt); font-size: clamp(22px, 1.7vw, 28px); }
.chartwrap { height: 112px; border-color: var(--card-line); border-radius: 8px; background: var(--tile); }
.autosell, .sell, .route, .svhead > div { border-radius: 7px; }
.sell.main { background: linear-gradient(155deg, var(--btn0), var(--btn1)); }
.sell.main:hover { background: linear-gradient(155deg, var(--btn0h), var(--btn1h)); }
.route { border-color: var(--ui-line2); background: var(--tile); }

#help {
  min-height: 34px;
  gap: 6px;
  padding: 6px 12px;
  background: var(--well);
  border-top-color: var(--card-line);
}
#help span { border-color: var(--card-line); border-radius: 5px; background: var(--tile); color: var(--dim); }
#help .mp { color: var(--acc2); border-color: var(--amber-line); background: rgba(128,90,50,.18); }

.modal { background: rgba(2,8,11,.78); backdrop-filter: blur(4px); }
.sheet { border-color: var(--pnl-line); border-radius: 14px; background: linear-gradient(160deg, var(--sheet0), var(--sheet1)); box-shadow: 0 24px 70px rgba(0,0,0,.44); }
.mhead { padding: 16px 20px; background: var(--mhead-bg); border-bottom-color: var(--ui-line2); }
.mhead h2 { color: var(--acc2); }
.close { border-color: var(--pnl-line); border-radius: 7px; background: var(--tile); }
.close:hover { border-color: var(--acc); color: var(--txt); }
.task:hover, .brow:hover { background: rgba(111,184,194,.06); }
.task.active, .brow.me { background: rgba(217,155,77,.1); }
.bigbtn { border-radius: 8px; background: linear-gradient(155deg, var(--btn0), var(--btn1)); }
.toast {
  min-width: 240px;
  max-width: min(360px, calc(100vw - 36px));
  border-radius: 9px;
  background: var(--menu-bg);
  box-shadow: var(--shadow);
  text-align: left;
}
#toasts {
  top: max(92px, 9vh);
  left: auto;
  right: 18px;
  transform: none;
  align-items: flex-end;
  max-width: min(380px, calc(100vw - 36px));
}

/* Orta ekranlar: statlar okunur kalir, panel alani daralmaz. */
@media (max-width: 1380px) {
  #top { flex-wrap: wrap; height: auto; min-height: 84px; }
  .brand { flex: 1 1 230px; }
  .stat { flex: 1 1 92px; min-width: 92px; }
  .stat.wide { flex: 1.8 1 170px; }
  .top-actions { margin-left: auto; }
  #bottom { height: clamp(250px, 34vh, 330px); }
  #right-panel { width: clamp(300px, 31vw, 390px); }
}

/* Tablet: saha ve ekonomi paneli iki temiz blok halinde akar. */
@media (max-width: 980px) {
  #top { display: grid; grid-template-columns: minmax(180px, 1.35fr) repeat(5, minmax(82px, 1fr)) auto; grid-auto-rows: minmax(58px, auto); overflow: visible; }
  .brand { min-width: 0; }
  .top-actions { grid-column: 1 / -1; justify-content: flex-end; }
  #bottom { height: 46vh; min-height: 330px; }
  #right-panel { width: min(36vw, 360px); min-width: 285px; }
  #facs { grid-template-columns: repeat(auto-fill, minmax(min(235px, 100%), 1fr)); }
  .panel.right { right: 10px; width: min(33vw, 330px); }
  #queue-panel { top: 10px; }
}

/* Telefon: ust bar, saha overlayleri ve alt paneller tek sutun. */
@media (max-width: 720px) {
  body { overflow: auto; }
  #app { min-height: 100dvh; height: auto; }
  #top {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    height: auto;
    max-height: 35dvh;
    overflow-y: auto;
    padding: 9px;
  }
  .brand { grid-column: 1 / -1; min-width: 0; border-right: 0; border-bottom: 1px solid var(--ui-line2); padding: 3px 0 8px; }
  .brand h1 { font-size: 15px; }
  .brand .val { font-size: 10px; }
  .logo { width: 44px; height: 44px; }
  .stat, .stat.wide, .stat.narrow { min-width: 0; flex: 1 1 auto; min-height: 54px; padding: 6px 8px; }
  .stat.wide { grid-column: 1 / -1; }
  .stat label { font-size: 8px; }
  .stat b { font-size: clamp(11px, 3.5vw, 16px); }
  .stat i { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top-actions { grid-column: 1 / -1; width: 100%; justify-content: stretch; }
  .menu-toggle { width: 100%; }
  .top-menu { left: 0; right: 0; top: calc(100% + 5px); display: grid; grid-template-columns: repeat(2, 1fr); min-width: 0; }
  .top-menu .online { grid-column: 1 / -1; }
  #main { min-height: 0; }
  #stage { flex: 0 0 54dvh; min-height: 360px; }
  #bottom { flex: 0 0 auto; height: auto; min-height: 0; flex-direction: column; padding: 8px; gap: 8px; }
  #left-bottom { flex: 0 0 400px; min-height: 400px; }
  #right-panel { flex: 0 0 360px; width: 100%; min-width: 0; }
  #tabs-bar { overflow: hidden; }
  #tabs { overflow-x: auto; }
  #tabs .tab { flex: 0 0 auto; padding: 12px 13px; }
  #facs { grid-template-columns: 1fr; }
  .fac { min-height: 84px; }
  #expansion { left: 9px; top: 9px; width: calc(50% - 14px); }
  #queue-panel { top: 9px; right: 9px; width: calc(50% - 14px); }
  #abil-panel { left: 9px; bottom: 9px; width: calc(50% - 14px); }
  #field-tools { right: 9px; bottom: 9px; padding: 4px 7px; font-size: 10px; }
  .fab-world { right: 9px; bottom: 52px; }
  #abilities { gap: 4px; }
  .aname { font-size: 8px; }
  .asub { font-size: 7px; }
  #help { overflow-x: auto; flex-wrap: nowrap; min-height: 36px; }
  #help .mp { margin-left: 0; }
  .sheet, .sheet.narrow { width: calc(100vw - 20px); max-width: none; max-height: 90dvh; }
  .mhead { padding: 13px 14px; }
  .mhead h2 { font-size: 13px; }
  #toasts { top: 10px; right: 10px; max-width: calc(100vw - 20px); }
  .toast { min-width: 0; width: min(340px, calc(100vw - 20px)); }
}

@media (max-width: 480px) {
  #top { max-height: 40dvh; }
  #stage { flex-basis: 58dvh; min-height: 410px; }
  #expansion { width: calc(100% - 18px); }
  #queue-panel { top: 124px; left: 9px; right: 9px; width: auto; }
  #abil-panel { left: 9px; right: 9px; width: auto; }
  #queue { gap: 3px; }
  #queue-panel .qrow { min-height: 42px; }
  #bottom { padding: 6px; }
  #left-bottom { flex-basis: 450px; min-height: 450px; }
  #right-panel { flex-basis: 390px; }
  .fac-buy { min-width: 92px; }
  .fac-name { font-size: 11px; }
  .fac-out, .fac-meta { font-size: 9px; }
  .sellrow { display: grid; grid-template-columns: 1fr 1fr; }
  .sell.main { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Son katman: HUD degerleri dar kartlarda kesilmesin. */
#top { flex-wrap: wrap; height: auto; min-height: 92px; align-content: stretch; }
.stat { flex: 1 1 112px; min-width: 112px; }
.stat.wide { flex: 1.75 1 210px; min-width: 210px; }
.stat.narrow { flex: .85 1 94px; min-width: 94px; }
.stat label { overflow: hidden; text-overflow: ellipsis; }
.stat b { font-size: clamp(10px, .72vw, 14px); letter-spacing: -.06em; overflow: visible; text-overflow: clip; }
.stat i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.narrow i { font-size: clamp(8px, .55vw, 10px); letter-spacing: -.04em; }

.fac.focus {
  animation: facilityFocus 1.6s var(--ease) both;
  border-color: var(--acc2);
  box-shadow: 0 0 0 2px rgba(240,189,109,.24), 0 12px 24px rgba(0,0,0,.3);
}
@keyframes facilityFocus {
  0%, 100% { transform: translateY(0); }
  12%, 28% { transform: translateY(-3px); }
}

@media (max-width: 980px) {
  #top { display: grid; grid-template-columns: minmax(180px, 1.35fr) repeat(5, minmax(82px, 1fr)) auto; grid-auto-rows: minmax(58px, auto); }
  .stat, .stat.wide, .stat.narrow { min-width: 0; flex: auto; }
}

@media (max-width: 720px) {
  .stat, .stat.wide, .stat.narrow { min-width: 0; }
}

/* ---------------- DÜNYA OLAYLARI PANELİ (saha) ----------------
   Aktif olayları özellik + geri sayım ile listeler; boşken gizlenir. */
#events-panel {
  left: 0; right: 0; top: 14px;
  margin: 0 auto;
  width: min(248px, 34vw);
  padding: 8px 10px 9px;
  z-index: 5;
}
#events-panel .phead { margin-bottom: 6px; font-size: 9.5px; letter-spacing: .12em; }
#events-panel .phead span { font-size: 9.5px; }
#ev-list { display: flex; flex-direction: column; gap: 5px; }
.evrow {
  position: relative;
  padding: 5px 8px 6px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
}
.evrow.pos { border-left-color: var(--ok); }
.evrow.neg { border-left-color: var(--bad); }
.ev-top { display: flex; align-items: center; gap: 5px; }
.ev-top b {
  font: 700 8.5px var(--display); letter-spacing: .07em; color: var(--txt);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev-top i {
  margin-left: auto; flex-shrink: 0;
  font: 700 8px var(--mono); font-style: normal;
  padding: 1px 5px; border-radius: 999px; border: 1px solid transparent;
}
.evrow.pos .ev-top i {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.evrow.neg .ev-top i {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 45%, transparent);
  background: color-mix(in srgb, var(--bad) 12%, transparent);
}
.ev-ds { margin-top: 3px; font-size: 8.5px; line-height: 1.45; color: var(--dim); }
.ev-time { margin-top: 4px; font: 700 8.5px var(--mono); color: var(--acc2); letter-spacing: .04em; }
.ev-bar { margin-top: 3px; height: 3px; border-radius: 2px; background: rgba(127,127,127,.18); overflow: hidden; }
.ev-bar i { display: block; height: 100%; border-radius: 2px; transition: width .35s linear; }
.evrow.pos .ev-bar i { background: linear-gradient(90deg, var(--ok), rgba(255,255,255,.55)); }
.evrow.neg .ev-bar i { background: linear-gradient(90deg, var(--bad), rgba(255,255,255,.45)); }

@media (max-width: 980px) {
  #events-panel { top: 10px; width: min(248px, 34vw); }
}
@media (max-width: 720px) {
  #events-panel {
    left: 9px; right: auto; top: 136px;
    margin: 0; width: calc(50% - 14px);
    max-height: 36%; overflow-y: auto;
  }
}
@media (max-width: 480px) {
  #events-panel {
    left: 9px; right: 9px; top: 368px; bottom: auto;
    margin: 0; width: auto;
    max-height: 20dvh; overflow-y: auto;
  }
}

/* Dünya olayları paneli: gerçek ölçü (scale yok — yazılar net) + sürüklenebilir */
#events-panel {
  animation: evPanelIn .3s var(--ease) both;
}
@keyframes evPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
/* sağ üstteki tutamç yer açsın: olay sayacı düğmenin altında kalmasın */
#events-panel .phead { padding-right: 34px; }

/* ---------------- SALDIRI ALARMI (saha sol üst) ----------------
   Üzerine yolda saldırı varken görünür; SAHA GENİŞLETME panelini geçici olarak aşağı iter. */
#atk-warn {
  position: absolute; left: 14px; top: 14px; z-index: 8;
  pointer-events: none;
  display: none; align-items: center; gap: 8px;
  max-width: calc(100% - 28px);
  padding: 6px 12px 7px 9px;
  border: 1px solid color-mix(in srgb, var(--bad) 55%, transparent);
  border-radius: 11px;
  background: linear-gradient(155deg, rgba(66,17,19,.97), rgba(28,9,11,.97));
  box-shadow: 0 8px 22px rgba(150,25,30,.4);
}
body.atk-alert #atk-warn { display: flex; animation: atkWarnIn .25s var(--ease) both; }
/* Panel sürükleme konumu inline stille yazılır (data-moved işaretlenir): panel HİÇ
   TAŞINMAMIŞSA alarmın altına itilir; kullanıcı taşıdıysa konumu kilitlenmez. */
body.atk-alert #expansion:not([data-moved]) { top: 62px !important; transition: top .22s var(--ease); }
#atk-warn .aw-tri {
  width: 20px; height: 19px; flex: 0 0 auto;
  filter: drop-shadow(0 0 7px rgba(229,72,77,.6));
  animation: atkWarnPulse 1s ease-in-out infinite;
}
#atk-warn b { font: 700 11px var(--display); letter-spacing: .1em; color: #ffd9da; white-space: nowrap; }
#atk-warn i { font: 700 10px var(--mono); font-style: normal; color: #ff9ea2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes atkWarnPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.9); } }
@keyframes atkWarnIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ---- üyelik (bulut senkron) modalı ---- */
#mem-body { padding: 16px 18px 18px; }
.memmsg { min-height: 0; font-size: 11.5px; color: var(--dim); margin: 2px 0 4px; }
.memmsg:empty { display: none; }
.memmsg.bad { color: var(--bad); }
.memmsg.ok { color: var(--ok); }
.memmsg.warn { color: var(--warn); }
.memrow { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; }
.memrow label { font: 600 10px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.memrow input, .memrow select {
  width: 100%; background: var(--bg); color: var(--txt);
  border: 1px solid var(--line2); border-radius: var(--r); padding: 10px;
  font-size: 13px; font-family: var(--font);
}
.memrow input:focus, .memrow select:focus { outline: none; border-color: var(--acc); }
.memq { font-family: var(--mono); font-size: 13px; color: var(--acc2); word-break: break-word; }
.mempass {
  font-family: var(--mono); font-size: 18px; letter-spacing: .06em; color: var(--acc2);
  background: var(--bg); border: 1px dashed var(--acc-dim); border-radius: var(--r);
  padding: 14px; text-align: center; margin: 10px 0; user-select: all; word-break: break-all;
}
.memlinks { display: flex; justify-content: space-between; margin-top: 12px; }
.memlinks a { color: var(--acc2); font-size: 11.5px; cursor: pointer; text-decoration: none; letter-spacing: .06em; }
.memlinks a:hover { text-decoration: underline; }
.bigbtn.memalt { background: var(--panel3); border-color: var(--line2); color: var(--txt); margin-top: 8px; }
.bigbtn.memalt:hover { background: var(--panel2); }

/* operatör adı modalı */
.rname { padding: 16px 18px 18px; }
.rname .hint { margin-top: 2px; }
.rname .hint.bad { color: var(--bad); }