/* Gotowe grafiki interfejsu (public/img/ui, źródła w Gfx/ui): pasek surowców, ramka minimapy i przycisk „Wezwij falę”.
   Plik ładuje się ostatni i nadpisuje style.css oraz hud-frame.css. */

/* Pasek surowców: grafika z ikonami złota, drewna, kamienia, życia i fali; liczby leżą na pustych polach. */
#resbar {
  position: relative; flex: none; height: clamp(46px, 4vw, 64px); aspect-ratio: 2137 / 191;
  background: url(img/ui/resources.png) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 5px #000a);
}
#resbar b {
  position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center;
  font: 700 22px Georgia, serif; color: #fff4d6; text-shadow: 0 2px 2px #000, 0 0 6px #0008; font-variant-numeric: tabular-nums;
}
#rGold { left: 10.4%; width: 10.3%; }
#rWood { left: 28.9%; width: 10.1%; }
#rStone { left: 45.9%; width: 10.1%; }
#lives { left: 62.1%; width: 13.2%; }
#wTxt { left: 82.7%; width: 12%; }

/* Przycisk fali: zwykły przycisk HUD (złoty akcent ze stylu hud-frame.css). */
#topbar #bWave { flex: none; width: auto; min-width: 132px; height: 38px; padding: 0 18px; font: 700 16px Georgia, serif; } /* szerokość z tekstu: tłumaczenia mają różną długość */

#wTimer { width: auto; min-width: 146px; padding: 0 10px; white-space: nowrap; } /* dłuższe tłumaczenia (np. RU) poszerzają pole */
#wavePrev { width: clamp(120px, 14vw, 260px); }
@media (max-width: 1400px) { #wavePrev { display: none; } }

/* Minimapa: ramka dziewięciopolowa (rogi zostają, boki się rozciągają); płótno leży w otworze ramki. */
#minimap {
  position: fixed; left: 10px; bottom: 10px; width: 248px; height: 179px; padding: 0; border: 30px solid transparent;
  border-image: url(img/ui/minimap-frame.png) 100 / 30px stretch; background: none; border-radius: 0; box-shadow: none; /* bez filter: płótno w środku odświeża się co klatkę */
}
#minimap::before, #minimap::after { display: none; }
#minimap canvas { position: absolute; left: -16px; top: -16px; width: 220px; height: 151px; margin: 0; border: 0; border-radius: 0; box-shadow: none; }

/* Ekran wyniku: baner z grafiki wystaje nad kartę; napis leży w jego tabliczce (kolejność: zwycięstwo/porażka). */
#result { overflow: visible; width: 460px; padding: 92px 30px 24px; max-height: none; }
#result .res-banner {
  position: absolute; left: 50%; top: -150px; width: 640px; transform: translateX(-50%); pointer-events: none;
  background: center / 100% 100% no-repeat; filter: drop-shadow(0 8px 10px #000b);
}
#result.win .res-banner { aspect-ratio: 1434 / 480; background-image: url(img/ui/result-victory.png); }
#result.lose .res-banner { aspect-ratio: 1394 / 480; background-image: url(img/ui/result-defeat.png); }
#result .res-banner h2 {
  position: absolute; left: 24%; right: 24%; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 800 34px/1 Georgia, serif; letter-spacing: 2px; text-transform: uppercase;
}
#result.win .res-banner h2 { left: 31%; right: 31%; font-size: 28px; letter-spacing: 1px; top: 38%; height: 28%; color: #ffe39a; text-shadow: 0 3px 0 #061330, 0 0 14px #f5c85a66; }
#result.lose .res-banner h2 { top: 44%; height: 28%; color: #ffd9cc; text-shadow: 0 3px 0 #1a0505, 0 0 14px #e8453a66; }
#result .stars { color: var(--gold-hi); font-size: 34px; letter-spacing: 6px; text-shadow: 0 2px 0 #000; }

#perf { color: var(--muted); font: 12px Georgia, serif; text-align: center; }