:root {
  --bg: #0b0d10;
  --panel: rgba(12, 14, 18, 0.78);
  --line: rgba(255, 255, 255, 0.14);
  --text: #e8e4d8;
  --muted: #a39d8c;
  --gold: #e7c36a;
  --hp: #c8312c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font: 14px/1.35 "Segoe UI", system-ui, -apple-system, sans-serif; }
#gl, #ov { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#gl { cursor: crosshair; }
#ov { pointer-events: none; }
#stage { z-index: 41; position: fixed; left: calc(50% - 512 * var(--u, 1px)); top: 0; width: calc(1024 * var(--u, 1px)); height: 100%;
  pointer-events: none; }
#stage > * { pointer-events: auto; }
/* buttons the original draws over the main bar's transparent corner (586 Ayarlar, 339 VIP, 578 mail): same box as
   #stage, above the main bar (z 50) so the bar's 1024x114 box does not swallow their clicks */
#stage-top { z-index: 51; position: fixed; left: calc(50% - 512 * var(--u, 1px)); top: 0; width: calc(1024 * var(--u, 1px));
  height: 100%; pointer-events: none; }
#stage-top > * { pointer-events: auto; }
#perf { position: fixed; left: 8px; top: 8px; z-index: 50; padding: 4px 8px; border-radius: 4px; background: rgba(0,0,0,.55);
  color: #d6f5c8; font: 600 12px/1.35 ui-monospace, Menlo, Consolas, monospace; white-space: pre; pointer-events: none; }
#loading { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); color: #e7c36a; font-size: 18px;
  text-shadow: 0 1px 3px #000; pointer-events: none; }
.cq-chatlog { pointer-events: none; }   /* clicks go through the chat text to the world (user: click / jump there); names and Alt-mode lines stay clickable */
.mm-host { position: fixed; right: 0; top: 0; }   /* radar flush in the top-right corner like the original */
.cq-npc .npcinput { display: block; margin-top: calc(6 * var(--u)); }
.revive { text-align: center; }

/* login / register / character screens: front.css */

#hud { position: fixed; left: 12px; top: 12px; pointer-events: none; }
#me { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 220px; }
#me b { color: var(--gold); }
#me-lv, #me-pos { color: var(--muted); font-size: 12px; }
.bar { position: relative; height: 14px; margin: 6px 0 4px; background: rgba(0,0,0,.5); border-radius: 3px; overflow: hidden; }
.bar > div { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--hp); }
.bar > span { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 14px; }

#chat { position: fixed; left: 12px; bottom: 12px; width: min(520px, calc(100vw - 24px)); }
#log { max-height: 30vh; overflow-y: auto; padding: 6px 8px; background: rgba(0,0,0,.35); border-radius: 6px 6px 0 0;
  font-size: 13px; text-shadow: 0 1px 1px #000; scrollbar-width: thin; }
#log div { white-space: pre-wrap; word-break: break-word; }
#log .c2000 { color: #fff; } #log .c2001 { color: #ff9cf2; } #log .c2003 { color: #9cf5ff; }
#log .c2004 { color: #9cff9c; } #log .c2005, #log .c2500 { color: #ffd36b; } #log .c2021 { color: #b3c7ff; }
#log .local { color: var(--muted); font-style: italic; }
#chatform { display: flex; gap: 4px; }
#chatform select, #chatform input { background: rgba(0,0,0,.6); color: var(--text); border: 1px solid var(--line);
  padding: 6px 8px; font-size: 13px; }
#chatform input { flex: 1; min-width: 0; border-radius: 0 0 6px 0; }
#chatform select { border-radius: 0 0 0 6px; }

/* full-screen toggle (top-left, under the status panel area; sharp text glyph) */
#fullscreen-btn { position: fixed; right: 8px; bottom: 8px; z-index: 50; width: 30px; height: 30px; padding: 0;
  font: 18px/28px system-ui, sans-serif; color: #f1e2b8; background: #13283a; border: 1px solid #c6b28c;
  border-radius: 4px; cursor: pointer; opacity: .8; }
#fullscreen-btn:hover { opacity: 1; background: #1d3a52; }
#sound-btn { position: fixed; right: 44px; bottom: 8px; z-index: 50; width: 30px; height: 30px; padding: 0;
  font: 15px/28px system-ui, sans-serif; color: #f1e2b8; background: #13283a; border: 1px solid #c6b28c;
  border-radius: 4px; cursor: pointer; opacity: .8; }
#sound-btn:hover { opacity: 1; background: #1d3a52; }