/* окно клиента Blockfall: рамка, заголовок, HUD поверх мира, чат мира, ярлык на панели */

.gw {
  position: fixed;
  right: var(--s6);
  bottom: 56px;
  z-index: 48;
  width: var(--gw-w, 460px);
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  box-shadow: 0 14px 34px -16px #000, 0 0 0 1px #04060866;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--txt-1);
  animation: gwIn 190ms var(--ease-drawer) both;
}
.gw::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent;
}
.gw.is-leaving { animation: gwOut 170ms ease-in both; }

/* ── заголовок ────────────────────────────────────────────────────── */
.gw__bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: 22px;
  padding: 0 2px 0 var(--s2);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border-bottom: 1px solid var(--line);
  cursor: move;
  user-select: none;
  touch-action: none;
}
.gw[data-drag="on"] .gw__bar { cursor: grabbing; }
.gw__bar:focus-visible { outline-offset: -2px; }

.gw__cube {
  width: 10px;
  height: 11px;
  flex: none;
  background: linear-gradient(135deg, var(--acc-ai) 0 48%, var(--safe) 48% 100%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.gw__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--txt-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gw__ping {
  color: var(--txt-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gw__ctl { display: flex; flex: none; }
.gw__btn {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--txt-2);
  line-height: 1;
}
.gw__btn:hover { color: var(--txt-0); background: var(--bg-2); }
.gw__btn--dock:hover { color: var(--danger); }

/* ── тело: мир и слой интерфейса ──────────────────────────────────── */
.gw__body {
  position: relative;
  height: var(--gw-h, 300px);
  background: var(--bg-0);
  overflow: hidden;
}
.gw__canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.gw__hud {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 3px var(--s2) var(--s2);
  pointer-events: none;
  text-shadow: 0 1px 2px #05070ac9;
}
.gw__top { display: flex; align-items: baseline; gap: var(--s2); }
.gw__gap { margin-left: auto; }
.gw__nick { color: var(--acc-ai); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw__stat, .gw__coords { color: var(--txt-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gw__coords { color: var(--txt-2); }

/* ── чат мира ─────────────────────────────────────────────────────── */
.gw__chat {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 92%;
  margin-bottom: var(--s1);
}
.gw__line {
  padding: 0 4px;
  background: #07090b99;
  color: var(--txt-1);
  animation: gwLine 200ms ease-out both;
}
.gw__line.is-old { animation: none; }
.gw__line--sys { color: var(--acc-user); }
.gw__line--bad { color: var(--danger); }
.gw__chat .gw__line:nth-last-child(4) { opacity: .7; }
.gw__chat .gw__line:nth-last-child(n+5) { opacity: .45; }

/* ── полоски и пояс ───────────────────────────────────────────────── */
.gw__bottom { display: grid; gap: 3px; justify-items: center; }
.gw__gauges { display: flex; align-items: center; gap: var(--s3); }
.gw__gauge { display: flex; align-items: center; gap: var(--s1); }
.gw__glabel { color: var(--txt-2); }
.gw__track {
  position: relative;
  width: 88px;
  height: 7px;
  background: #07090bd9;
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.gw__track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 7px, #0b0e12b3 7px 8px);
}
.gw__fill { display: block; height: 100%; width: 100%; background: var(--danger); transition: width 200ms linear; }
.gw__gauge--food .gw__fill { background: var(--warn); }
.gw__gauge.is-low .gw__track { animation: gwLow 900ms ease-in-out infinite alternate; }

.gw__hotbar { display: flex; gap: 2px; }
.gw__slot {
  position: relative;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: #07090bd9;
  border: 1px solid var(--line-2);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.gw__slot.is-sel { border-color: var(--acc-ai); background: #0b1a14e0; }
.gw__mark { color: var(--txt-0); font-weight: 400; }
.gw__slot[data-tier="0"] .gw__mark { color: var(--txt-2); opacity: .45; }
.gw__slot[data-tier="3"] .gw__mark, .gw__slot[data-tier="4"] .gw__mark { color: var(--acc-user); }
.gw__slot[data-tier="5"] .gw__mark, .gw__slot[data-tier="6"] .gw__mark { color: var(--rare); }
.gw__n {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 8px;
  font-style: normal;
  color: var(--money);
  font-variant-numeric: tabular-nums;
}

/* ── состояния окна ───────────────────────────────────────────────── */
.gw[data-shade="on"] .gw__body { height: 0; }
.gw[data-shade="on"] { box-shadow: 0 8px 20px -14px #000; }

.gw[data-alert="1"]::after { box-shadow: inset 0 0 0 1px #f0b42940; }
.gw[data-alert="1"] .gw__ping { color: var(--warn); }
.gw[data-alert="2"]::after {
  box-shadow: inset 0 0 0 1px var(--danger);
  animation: gwPulse 1100ms ease-in-out infinite alternate;
}
.gw[data-alert="2"] { border-color: #4a2020; }
.gw[data-alert="2"] .gw__ping { color: var(--danger); }

.gw[data-ban="on"] { filter: saturate(.15); border-color: var(--danger); }
.gw[data-ban="on"] .gw__hotbar, .gw[data-ban="on"] .gw__gauges { opacity: .4; }
.gw[data-ban="on"] .gw__canvas { cursor: not-allowed; }

.gw[data-size="s"] { font-size: 9px; }
.gw[data-size="s"] .gw__glabel { display: none; }
.gw[data-size="s"] .gw__track { width: 62px; }
.gw[data-size="s"] .gw__slot { width: 17px; height: 17px; }
.gw[data-size="s"] .gw__chat .gw__line:nth-last-child(n+4) { display: none; }
.gw[data-size="l"] { font-size: var(--fs-ui); }
.gw[data-size="l"] .gw__slot { width: 24px; height: 24px; }
.gw[data-size="l"] .gw__track { width: 110px; height: 8px; }

/* ── ярлык на панели ──────────────────────────────────────────────── */
.gw-dock {
  position: fixed;
  right: var(--s6);
  bottom: 56px;
  z-index: 47;
}
.gw-dock__btn {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 3px var(--s2);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--txt-1);
  font-size: var(--fs-ui);
  box-shadow: 0 8px 20px -14px #000;
  animation: gwIn 160ms var(--ease-drawer) both;
}
.gw-dock__btn:hover { color: var(--txt-0); border-color: var(--acc-ai); }
.gw-dock__btn.is-hot {
  color: var(--danger);
  border-color: var(--danger);
  animation: gwHot 1100ms ease-in-out infinite alternate;
}

@keyframes gwIn {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes gwOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(12px) scale(.94); }
}
@keyframes gwLine {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@keyframes gwPulse { from { opacity: .3; } to { opacity: 1; } }
@keyframes gwLow { from { box-shadow: none; } to { box-shadow: 0 0 0 1px var(--danger); } }
@keyframes gwHot { from { box-shadow: 0 8px 20px -14px #000; } to { box-shadow: 0 0 0 1px var(--danger); } }

/* ── доступность и адаптив ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gw, .gw.is-leaving, .gw::after, .gw__line, .gw-dock__btn, .gw-dock__btn.is-hot,
  .gw__gauge.is-low .gw__track { animation: none !important; }
  .gw__fill { transition: none !important; }
}
body[data-motion="off"] .gw,
body[data-motion="off"] .gw.is-leaving,
body[data-motion="off"] .gw::after,
body[data-motion="off"] .gw__line,
body[data-motion="off"] .gw-dock__btn,
body[data-motion="off"] .gw-dock__btn.is-hot,
body[data-motion="off"] .gw__gauge.is-low .gw__track { animation: none !important; }
body[data-motion="off"] .gw__fill { transition: none !important; }

body[data-contrast="high"] .gw__line { background: #07090be6; }
body[data-contrast="high"] .gw__coords { color: var(--txt-1); }

@media (max-width: 1279px) {
  .gw, .gw-dock { bottom: 40px; }
}

/* узкий экран: окно живёт вкладкой снизу, перетаскивание выключено */
@media (max-width: 899px) {
  .gw {
    left: var(--s2) !important;
    right: var(--s2) !important;
    top: auto !important;
    bottom: calc(var(--h-tab) + var(--h-foot) + var(--s2)) !important;
    width: auto !important;
  }
  .gw__body { height: min(46vh, 260px) !important; }
  .gw__bar { cursor: default; }
  .gw__btn--size { display: none; }
  .gw-dock {
    right: var(--s2);
    bottom: calc(var(--h-tab) + var(--h-foot) + var(--s2));
  }
}