.hud {
  position: relative;
  height: 100dvh;
  width: 100vw;
  background: radial-gradient(700px 280px at 50% 100%, #1a2e24 0%, transparent 70%);
  overflow: hidden;
}

.hud-gear {
  position: absolute;
  z-index: 12;
  top: calc(8px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  background: #0c1410;
  color: var(--frost);
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
}

.canvas {
  position: absolute;
  inset: 0;
}
.canvas.busy { pointer-events: none; opacity: 0.65; }

.w {
  position: absolute;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--frost);
}
.w.is-hit { cursor: pointer; }
.w-skin canvas { width: 100%; height: 100%; display: block; }
.w-button,
.w-menu {
  container-type: size;
  background: transparent;
  border: 0;
  color: var(--frost);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 4%;
  padding: 6%;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.w-button span,
.w-menu span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}
.w-button img,
.w-button .btn-fallback,
.w-menu img,
.w-menu .btn-fallback {
  width: min(82cqw, 68cqh);
  height: min(82cqw, 68cqh);
  object-fit: contain;
  border-radius: 18%;
  background: #0c1410;
  border: 1px solid var(--gold-dim);
}
.w-image {
  padding: 0;
  background: transparent;
  border: 0;
}
.w-image img { width: 100%; height: 100%; object-fit: contain; }
.w-papi { display: grid; place-items: center; font-weight: 700; }
.w.is-custom.w-tokens,
.w.is-custom.w-server,
.w.is-custom.w-ping,
.w.is-custom.w-mode,
.w.is-custom.w-time,
.w.is-custom.w-biome,
.w.is-custom.w-coords,
.w.is-custom.w-armor,
.w.is-custom.w-players,
.w.is-custom.w-chat,
.w.is-custom.w-text,
.w.is-custom.w-papi {
  background: transparent;
  border-color: transparent;
}

.menu-layer {
  position: absolute;
  inset: 0;
  z-index: 11;
  background: #0b100ef2;
  display: grid;
  grid-template-rows: auto 1fr;
}
.menu-layer[hidden] { display: none !important; }
.menu-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  z-index: 2;
}
.menu-bar button {
  width: auto;
  margin: 0;
  padding: 6px 12px;
  font-size: 12px;
}
.menu-bar strong { font-size: 14px; letter-spacing: 0.06em; }
.w-button .btn-fallback,
.w-menu .btn-fallback {
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: clamp(12px, 28cqh, 42px);
  font-weight: 700;
}
.w-button.current img,
.w-button.current .btn-fallback,
.w-menu.current img,
.w-menu.current .btn-fallback {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.w-button:disabled,
.w-menu:disabled { opacity: 0.45; }
.w-text, .w-papi {
  display: grid;
  align-content: center;
  justify-items: var(--align-items, center);
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.w-text [data-label],
.w-papi [data-label] { width: 100%; }
.w-tokens, .w-server, .w-ping, .w-mode, .w-time, .w-biome, .w-coords, .w-armor {
  display: grid;
  align-content: center;
  justify-items: var(--align-items, stretch);
  text-align: left;
  padding: 4px 8px;
  background: #0c1410cc;
  border: 1px solid var(--gold-dim);
  border-radius: 10px;
}
.w-tokens { grid-auto-flow: column; justify-content: var(--align-items, end); justify-items: center; align-items: center; gap: 8px; border-radius: 999px; }
.w-server { justify-items: var(--align-items, stretch); text-align: center; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; }
.w-coords small, .w-biome small, .w-time small, .w-ping small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.w-hp, .w-food, .w-xp { display: grid; align-content: center; padding: 4px; }
.w-hp.hurt .bar { box-shadow: 0 0 10px #d05a5266; }
.w-players, .w-chat {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 6px 8px;
  background: #0c1410cc;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 11px;
}
.w-players .log, .w-chat .log {
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 2px;
  color: var(--muted);
}
.w-sun { display: grid; place-items: center; }
.sun-arc {
  width: 70%;
  aspect-ratio: 2 / 1;
  border-bottom: 1px solid var(--gold-dim);
  border-radius: 0 0 50% 50%;
  position: relative;
}
.sun-arc i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 22%;
  aspect-ratio: 1;
  margin-left: -11%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f0d48a, var(--gold));
  transform-origin: 50% 180%;
  transform: rotate(var(--a, 90deg));
}
.sun-arc.night i { background: radial-gradient(circle at 30% 30%, #dfe7ef, #8aa0b8); }

.coin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f0d48a, var(--gold) 55%, var(--gold-dim));
  box-shadow: inset 0 0 0 2px #6e572c;
}

/* ---------- rotace na výšku ---------- */

#shell { display: contents; }
html.force-landscape,
html.force-landscape body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
html.force-landscape #shell {
  display: block;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100dvh;
  height: 100dvw;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
}
html.force-landscape .hud { width: 100%; height: 100%; }
html.force-landscape .modal { position: absolute; }

/* ---------- stav postavy ---------- */

.vitals {
  position: absolute;
  z-index: 3;
  right: calc(10px + env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 8px;
  justify-items: end;
  pointer-events: none;
}
.vital {
  display: grid;
  grid-template-columns: 15px 1fr 28px;
  width: 100%;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.vital b { font-weight: 700; color: var(--frost); text-align: right; }
.vital .bar {
  height: 7px;
  border-radius: 999px;
  background: #0c1410;
  border: 1px solid var(--line);
  overflow: hidden;
}
.vital .bar i {
  display: block;
  height: 100%;
  width: var(--v, 0%);
  border-radius: inherit;
  transition: width 0.35s ease;
}
.vital.hp { color: var(--hp); }
.vital.hp .bar i { background: linear-gradient(90deg, #8f3a34, var(--hp)); }
.vital.food { color: var(--food); }
.vital.food .bar i { background: linear-gradient(90deg, #7d5726, var(--food)); }
.vital.xp { color: var(--xp); }
.vital.xp .bar i { background: linear-gradient(90deg, #477a3a, var(--xp)); }
.vital.armor {
  grid-template-columns: 15px auto;
  color: #9fb3c8;
}
.vitals .mode {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: 2px 9px;
}
.vitals.hurt .vital.hp .bar { box-shadow: 0 0 10px #d05a5266; }

/* ---------- stavová bublina ---------- */

.pill {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: 80%;
  padding: 6px 14px;
  border-radius: 999px;
  background: #0c1410ee;
  border: 1px solid var(--gold-dim);
  color: var(--frost);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  pointer-events: none;
}

/* ---------- animace přepnutí serveru ---------- */

.swap {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  background: radial-gradient(circle at 50% 45%, #0d1a14f2 0%, #060c09fa 70%);
  backdrop-filter: blur(3px);
  animation: swap-in 0.25s ease both;
}
.swap.done { animation: swap-out 0.4s ease both; }
.swap-ring { position: relative; display: grid; place-items: center; }
.swap-ring .ring-track { stroke: #24382d; }
.swap-ring .ring-spin {
  stroke: var(--gold);
  stroke-dasharray: 70 220;
  transform-origin: 60px 60px;
}
.swap-ring .runes { stroke: var(--gold-dim); transform-origin: 60px 60px; }
.swap.live .ring-spin { animation: spin 1.1s linear infinite; }
.swap.live .runes { animation: rune-pulse 2.2s ease-in-out infinite; }
.swap-from {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.swap-from:empty { display: none; }
.swap-to {
  margin: 2px 0 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--frost);
  text-shadow: 0 0 18px #c9a45c55;
}
.swap-bar {
  width: min(220px, 60vw);
  height: 3px;
  border-radius: 999px;
  background: #22352b;
  overflow: hidden;
}
.swap-bar i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.swap.live .swap-bar i { animation: swap-sweep 1.2s ease-in-out infinite; }

@keyframes swap-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes swap-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes swap-sweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(260%); }
}
@keyframes rune-pulse {
  0%, 100% { opacity: 0.35; transform: rotate(0deg); }
  50% { opacity: 1; transform: rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .swap.live .ring-spin,
  .swap.live .runes,
  .swap.live .swap-bar i { animation: none; }
}
@media (orientation: portrait) {
  html:not(.force-landscape) .hud .server { letter-spacing: 0.08em; font-size: 11px; }
}