* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* ==========================================================================
   ZMIENNE KOLORÓW TIERÓW (RotMG) — wspólna paleta dla HUD i tooltipów
   ========================================================================== */
:root {
  --tier-t0: #9a6a33;        /* startowy — brązowy */
  --tier-t1: #cbd5e1;        /* T1 — srebrny */
  --tier-t2: #9ae6b4;        /* T2 — zielony */
  --tier-t3: #63b3ed;        /* T3 — niebieski */
  --tier-t4: #b57fe0;        /* T4 — fioletowy */
  --tier-t5: #f6ad55;        /* T5 — pomarańczowy */
  --tier-t6: #fc8181;        /* T6 — czerwony */
  --tier-t7: #fbbf24;        /* T7 — złoty */
  --tier-t8: #e0e7ff;        /* T8 — biało-lodowy */
  --tier-untiered: #b58ad9;  /* UT — unikatowy */
  --tier-white: #ffffff;     /* endgame */
}

/* ==========================================================================
   WARSTWA UX (Faza 7.5, rev. 2 — wg zgłoszenia: ANTRACYT na zewnątrz,
   szarość WYŁĄCZNIE pod itemami). Czarne / obsydianowe ikony (onyks
   #23262e, DEF) mają być widoczne („czarny jest widoczny"), więc SZARE są
   tylko podłoża POD IKONAMI (4 tory slotów, mikstury, galeria). Zmieniamy
   TŁA, NIE ikony — ikony, palety i ramki slot-ut / slot-set pozostają 1:1
   (item_visual_system_DONE.md §2.3, §2.6). Etykieta NA szarym slocie = ciemna
   (--ui-slot-label); etykieta na antracycie = jasna (--ui-text-muted).
   ========================================================================== */
:root {
  /* --- Antracyt (na zewnątrz: panele, widgety, tooltipy, zakładki) --- */
  --ui-edge: #2d3748;              /* krawędzie 1px */
  --ui-panel: #12141a;             /* panele HUD (= rgba(18, 20, 26, .95)) */
  --ui-insert: #1a1e26;            /* ciemne wstawki (badge, kbd, tt-stats, aktywna zakładka) */
  --ui-insert-hover: #262d3a;
  --ui-btn: #1c212b;               /* przyciski / zakładki */
  --ui-btn-hover: #262d3a;
  --ui-text-muted: #9aa5b4;        /* etykieta 6-11px na antracycie */
  --ui-text-dim: #555f6d;          /* wyciszony wariant etykiety */
  --ui-scroll-track: #101218;
  --ui-scroll-thumb: #3a4454;
  /* --- Szarość — TYLKO podłoża pod itemami (4 tory slotów, mikstury) --- */
  --ui-slot: #5a5f67;              /* slot zajęty */
  --ui-slot-hover: #686e77;        /* slot :hover */
  --ui-slot-empty: #4a4e55;        /* slot pusty */
  --ui-slot-empty-hover: #545a64;
  --ui-slot-label: #23262e;        /* etykieta NA szarym slocie (ciemna) */
}


/* ===== MODERNIZACJA UI: jednolity font Roboto dla CAŁEGO interfejsu =====
   (ekran startowy, HUD po prawej, tooltipy, karty postaci, komunikaty) */
*,
*::before,
*::after {
  font-family: 'Roboto', sans-serif !important;
}

body {
  background-color: #0a0c10;
  overflow: hidden;
  font-family: 'Roboto', sans-serif !important;
  color: #e0e6ed;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
  image-rendering: pixelated;
  text-rendering: geometricPrecision;
}

/* Retro UI: wyostrzanie tekstu dla całego HUD, menu i statystyk */
.hud-panel,
#player-hud,
#character-select-screen,
#controls-panel,
#quest-widget,
#minimap-container,
#player-hp-text,
#player-mp-text,
#player-exp-text,
#boss-hp-text,
#item-tooltip,
#death-screen-content,
#portal-prompt {
  image-rendering: pixelated;
  text-rendering: geometricPrecision;
}

/* HP / MP / statystyki: odcięcie od tła czarnym cieniem */
#player-hp-text,
#player-mp-text,
#player-exp-text,
#stat-att,
#stat-def,
#stat-spd,
#stat-dex,
#stat-vit,
#stat-wis,
#stat-life,
#stat-mana,
.bar-text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

#game-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}

/* UI Overlay */
#ui-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Płynne odsłanianie HUD przy wejściu do gry (Faza 3: fade-in). */
#ui-container.hud-fade-in {
  animation: hudFadeIn 0.5s ease-out;
}

@keyframes hudFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* HUD Panels — ANTRACYT (Faza 7.5 rev.2: „antracyt na zewnątrz"), obramowanie 1px, ostre kąty */
.hud-panel {
  position: absolute;
  background: rgba(18, 20, 26, 0.95); /* = --ui-panel (antracyt) */
  border: 1px solid #2d3748;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  padding: 6px 10px;
  border-radius: 0;
  pointer-events: auto;
}