:root {
  --bg: #0a0a0c;
  --panel: rgba(18, 18, 22, 0.86);
  --line: #2a2a33;
  --text: #e8e8ec;
  --dim: #8b8b96;
  --acc: #ff2d55;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 'Segoe UI', system-ui, sans-serif;
  user-select: none; -webkit-user-select: none;
}
button { font-family: inherit; }

#world {
  position: fixed; inset: 0; display: block;
  image-rendering: pixelated; cursor: crosshair;
  background: radial-gradient(circle at 50% 40%, #14141a 0%, #0a0a0c 80%);
}
/* Иконки Lucide — локальные SVG через маску, перекраска через currentColor */
.ic { display: inline-block; width: 1em; height: 1em; background: currentColor; vertical-align: -0.125em;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic-paintbrush { --m: url(/icons/paintbrush.svg); }
.ic-eraser    { --m: url(/icons/eraser.svg); }
.ic-bomb      { --m: url(/icons/bomb.svg); }
.ic-hand      { --m: url(/icons/hand.svg); }
.ic-plus      { --m: url(/icons/plus.svg); }
.ic-minus     { --m: url(/icons/minus.svg); }
.ic-maximize  { --m: url(/icons/maximize.svg); }
.ic-swords    { --m: url(/icons/swords.svg); }
.ic-radio     { --m: url(/icons/radio.svg); }
.ic-flag      { --m: url(/icons/flag.svg); }
.ic-skull     { --m: url(/icons/skull.svg); }
.tool .ic, #zoom button .ic { font-size: 23px; }

/* ── Верхняя панель ── */
#bar {
  position: fixed; top: 0; left: 0; right: 0; height: 50px;
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
  background: linear-gradient(180deg, rgba(10,10,12,.95), rgba(10,10,12,.4) 70%, transparent);
  z-index: 10; pointer-events: none;
}
.brand { font-weight: 800; letter-spacing: 4px; font-size: 18px; flex-shrink: 0; }
.brand span { color: var(--acc); }
.meta { color: var(--dim); font-size: 13px; margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.meta #online, .meta #alive { color: var(--text); font-weight: 700; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 8px #34c759; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* война фракций */
.war { flex: 1; max-width: 460px; height: 22px; display: flex; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); background: #15151a; }
.war .seg { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 11px;
  font-weight: 700; color: rgba(0,0,0,.65); transition: width .6s ease; min-width: 0; overflow: hidden; white-space: nowrap; }

/* ── Инструменты ── */
#tools {
  position: fixed; left: 14px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(10px); z-index: 11;
}
.tool {
  width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  background: #1c1c22; color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; transition: .12s;
}
.tool:hover { background: #26262e; transform: translateY(-1px); }
.tool.active { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: 0 0 16px rgba(255,45,85,.5); }
.sep { height: 1px; background: var(--line); margin: 2px 0; }
.swatch { display: block; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; }
.swatch input { width: 200%; height: 200%; transform: translate(-25%, -25%); border: none; padding: 0; cursor: pointer; background: none; }
#palette { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
#palette .p { width: 20px; height: 20px; border-radius: 5px; cursor: pointer; border: 1px solid rgba(255,255,255,.12); transition: .1s; }
#palette .p:hover { transform: scale(1.18); }

/* ── Зум ── */
#zoom {
  position: fixed; left: 14px; bottom: 14px; z-index: 11;
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(10px);
}
#zoom button { width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
  background: #1c1c22; color: var(--text); border: 1px solid var(--line); border-radius: 9px; transition: .12s; }
#zoom button:hover { background: #2a2a33; }
#zlevel { text-align: center; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ── Заряд ── */
#charge { position: fixed; left: 84px; bottom: 18px; width: 168px; z-index: 11; }
.cbar { height: 10px; background: #15151a; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
#cfill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff8a00, #ffd60a); transition: width .12s; }
#cfill.low { background: linear-gradient(90deg, #ff2d55, #ff8a00); }
.clabel { font-size: 11px; color: var(--dim); margin-top: 4px; }
.clabel #cval { color: var(--text); font-weight: 700; }

/* ── Правая колонка ── */
#side { position: fixed; right: 14px; top: 62px; bottom: 76px; width: 240px;
  display: flex; flex-direction: column; gap: 12px; z-index: 11; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; backdrop-filter: blur(10px); overflow: hidden; }
.card.grow { flex: 1; display: flex; flex-direction: column; }
.card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.card h3 .ic { font-size: 15px; }
#board { list-style: none; display: flex; flex-direction: column; gap: 7px; }
#board li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
#board .rank { color: var(--dim); width: 14px; flex-shrink: 0; }
#board .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#board .ct { color: var(--acc); font-variant-numeric: tabular-nums; font-weight: 700; }
#board .bar { height: 3px; background: var(--acc); border-radius: 2px; margin-top: 3px; opacity: .5; }
#feed { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
#feed .ev { color: var(--dim); display: flex; align-items: flex-start; gap: 6px; animation: fade .4s; }
#feed .ev .ic { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
#feed b { color: var(--text); }
@keyframes fade { from { opacity: 0; transform: translateX(8px); } }

/* ── Чат ── (правее кнопок, уже в 1.2×) */
#chat { position: fixed; left: 84px; bottom: 66px; width: 267px; z-index: 11; }
#messages { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; padding-right: 4px; }
#messages .msg { font-size: 13px; background: var(--panel); padding: 5px 10px; border-radius: 10px; width: fit-content; max-width: 100%; backdrop-filter: blur(6px); animation: fade .3s; }
#messages .who { font-weight: 700; }
#chatForm input { width: 100%; padding: 11px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); outline: none; backdrop-filter: blur(10px); }
#chatForm input:focus { border-color: var(--acc); }
#chatForm input:disabled { opacity: .6; cursor: default; }
#chatErr { display: none; font-size: 12px; color: #ff6b6b; background: var(--panel); border: 1px solid rgba(255,107,107,.4); padding: 5px 10px; border-radius: 9px; margin-bottom: 6px; width: fit-content; max-width: 100%; backdrop-filter: blur(6px); }
#chatErr.show { display: block; animation: fade .25s; }

/* ── Ворота ── */
#gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, #141420, #050507); }
.gatebox { text-align: center; max-width: 480px; padding: 30px; }
.gatebox h1 { font-size: 64px; font-weight: 900; letter-spacing: 10px; margin-bottom: 18px;
  background: linear-gradient(90deg, #ff2d55, #ff8a00); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(255,45,85,.4); }
.gatebox p { color: var(--dim); line-height: 1.7; margin-bottom: 22px; }
.gatebox p b { color: var(--text); }
.flabel { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin-bottom: 10px; }
.flabel b { color: var(--text); }

/* вход / регистрация */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; background: #0e0e12; padding: 4px; border-radius: 12px; }
.tabs button { flex: 1; padding: 9px; border: none; border-radius: 9px; background: transparent; color: var(--dim); font-weight: 600; cursor: pointer; transition: .15s; }
.tabs button.active { background: var(--acc); color: #fff; }
.autherr { min-height: 18px; color: #ff6b6b; font-size: 13px; margin: -6px 0 12px; }
.linkbtn { background: none !important; border: none; color: var(--dim) !important; font-size: 12px; cursor: pointer; margin-top: 12px; box-shadow: none !important; padding: 6px !important; width: auto !important; }
.linkbtn:hover { color: var(--text) !important; transform: none !important; }
#authPanel button#authBtn, #factionPanel button#enter { width: 100%; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; background: var(--acc); color: #fff; border: none; border-radius: 12px; transition: .15s; letter-spacing: 1px; }
#authPanel button#authBtn:hover, #factionPanel button#enter:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 30px rgba(255,45,85,.4); }
#authPanel button#authBtn:disabled { opacity: .5; cursor: default; }
#factionPick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
#factionPick .fac { padding: 12px; border-radius: 12px; border: 2px solid var(--line); background: #111; cursor: pointer; transition: .15s; display: flex; align-items: center; gap: 10px; }
#factionPick .fac:hover { transform: translateY(-2px); }
#factionPick .fac.sel { border-color: var(--c); box-shadow: 0 0 22px -4px var(--c); }
#factionPick .swt { width: 22px; height: 22px; border-radius: 6px; background: var(--c); flex-shrink: 0; }
#factionPick .fac span { font-weight: 700; }
.gatebox input { width: 100%; padding: 14px 18px; font-size: 16px; text-align: center; background: #111; border: 1px solid var(--line); border-radius: 12px; color: var(--text); outline: none; margin-bottom: 14px; }
.gatebox input:focus { border-color: var(--acc); }
.gatebox #enter { width: 100%; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; background: var(--acc); color: #fff; border: none; border-radius: 12px; transition: .15s; letter-spacing: 1px; }
.gatebox #enter:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 30px rgba(255,45,85,.4); }
.rules { margin-top: 20px; color: #555; font-size: 12px; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #2e2e38; border-radius: 3px; }

/* ── Мобильные ── */
@media (max-width: 760px) {
  #bar { height: 44px; padding: 0 12px; gap: 10px; }
  .brand { font-size: 15px; letter-spacing: 2px; }
  .meta { font-size: 11px; }
  .war { display: none; }

  /* инструменты — компактная вертикаль слева */
  #tools { left: 8px; padding: 6px; gap: 5px; border-radius: 12px; }
  .tool, .swatch { width: 38px; height: 38px; }
  .tool .ic { font-size: 19px; }
  #palette { grid-template-columns: 1fr 1fr; gap: 3px; }
  #palette .p { width: 16px; height: 16px; }

  /* зум — в правый нижний угол, компактно */
  #zoom { left: auto; right: 8px; bottom: 8px; flex-direction: row; align-items: center; padding: 5px; gap: 4px; }
  #zoom button { width: 36px; height: 36px; }
  #zlevel { min-width: 34px; }

  /* заряд — узкая полоса сверху по центру под баром */
  #charge { left: 56px; right: 12px; width: auto; bottom: auto; top: 50px; }

  /* лента — компактная карточка справа сверху, всегда видна */
  #side { left: auto; right: 8px; top: 80px; bottom: auto; width: 150px; max-height: 34vh; }
  #boardCard { display: none; }
  .card { padding: 8px 10px; }
  .card.grow { max-height: 34vh; }
  #feed { font-size: 11px; gap: 4px; }

  /* чат — снизу на всю ширину, всегда виден */
  #chat { left: 8px; right: 8px; width: auto; bottom: 52px; }
  #messages { max-height: 26vh; }
  #chatForm input { padding: 10px 12px; }

  .gatebox { padding: 22px; }
  .gatebox h1 { font-size: 40px; letter-spacing: 4px; }
  .gatebox p { font-size: 13px; }
  #factionPick { gap: 8px; }
  #factionPick .fac { padding: 10px; }
}