* {
  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) */
}


/* ==========================================================================
   FONT: PIXELOID SANS (Mikro-UI)
   ========================================================================== */
@font-face {
  font-family: 'Pixeloid Sans';
  src: url('../assets/fonts/PixeloidSans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ===== TYPOGRAFIA PIXEL-ART: domyślnie 'Pixeloid Sans' dla Mikro-UI =====
   (ekwipunek, statystyki, zadania, czat, komunikaty w grze).
   Gruby font ('Press Start 2P') jest ustawiany selektywnie w odpowiednich plikach.
   Wygładzanie wyłączone dla ostrości. */
*,
*::before,
*::after {
  font-family: 'Pixeloid Sans', sans-serif;
  letter-spacing: 0;
  /* Twarde piksele zamiast wygładzania antyaliasingowego (czytelność pixel-artu) */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: crispEdges; /* fallback tam, gdzie `pixelated` nie jest wspierane */
  text-rendering: pixelated;
  image-rendering: pixelated;
}


body {
  background-color: #0a0c10;
  overflow: hidden;
  font-family: 'Pixeloid Sans', sans-serif;
  color: #e0e6ed;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: crispEdges;
  text-rendering: pixelated;
}

/* 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;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: crispEdges;
}

/* 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;
}

/* ==========================================================================
   AUDIO TOGGLE — ekrany startowe (logowanie / rejestracja, wybór postaci)
   Ikona głośnika wyciszająca CAŁE audio (SFX broni/umiejętności + muzyka tła).
   Styl spójny z #bgm-toggle w HUD; pozycja ustalana per-ekran (patrz niżej).
   ========================================================================== */
.audio-toggle-btn {
  position: absolute;
  z-index: 50;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(18, 20, 26, 0.95);
  border: 1px solid #2d3748;
  border-radius: 0;
  color: var(--ui-text-muted);
  cursor: pointer;
  pointer-events: auto;
}

.audio-toggle-btn:hover {
  background: var(--ui-btn-hover);
  color: #e0e6ed;
}

.audio-toggle-btn .audio-icon { display: block; pointer-events: none; }
.audio-toggle-btn .audio-icon-muted { display: none; }
.audio-toggle-btn.muted { color: #6f7a8a; }
.audio-toggle-btn.muted .audio-icon-unmuted { display: none; }
.audio-toggle-btn.muted .audio-icon-muted { display: block; }

/* Pozycja per ekran: logowanie/rejestracja oraz wybór postaci — prawy górny
   róg. W css/auth.css górny pasek (.auth-bar) ma dodatkowy prawy padding, aby
   chipy społecznościowe (DISCORD/REDDIT) nie nachodziły na ikonę. */
#auth-screen .audio-toggle-btn { top: 14px; right: 12px; }
#character-select-screen .audio-toggle-btn { top: 14px; right: 14px; }