/* ===========================================
   GameLog - style.css
   Veškerý design, barvy a responzivita
   =========================================== */

/* Reset - odstraní výchozí margin a padding ze všech elementů
   box-sizing: border-box = padding a border jsou součástí šířky prvku */
* {
  box-sizing: border-box; /* padding a border se počítají do šířky */
  margin: 0;              /* žádný výchozí vnější okraj */
  padding: 0;             /* žádný výchozí vnitřní okraj */
}

/* Obrázky nepřetečou přes svůj kontejner
   display: block odstraní mezeru pod obrázkem způsobenou inline zobrazením */
img {
  max-width: 100%;  /* obrázek nikdy nebude širší než jeho kontejner */
  display: block;   /* odstraní mezeru pod obrázkem */
}

/* Odkazy bez podtržení, barvu dědí od rodiče */
a {
  text-decoration: none; /* žádné podtržení */
  color: inherit;        /* barva textu se dědí od rodiče */
}

/* Základní styl celé stránky */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* systémový font podle zařízení */
  background: #f0f0f0; /* světle šedé pozadí */
  color: #111;         /* tmavý text */
  min-height: 100vh;   /* stránka zabere celou výšku okna */
}

/* Třída pro skrytí stránek - JS ji přidává/odebírá při navigaci
   !important přebije jakýkoliv jiný display styl */
.page-hidden {
  display: none !important; /* skryje prvek, !important má přednost */
}

/* ===========================================
   NAVIGACE
   =========================================== */

/* Hlavní navigační lišta */
nav {
  background: #111;               /* černé pozadí */
  color: white;                   /* bílý text */
  display: flex;                  /* prvky vedle sebe */
  align-items: center;            /* vertikálně vycentrované */
  justify-content: space-between; /* logo vlevo, hamburger vpravo */
  padding: 0 24px;                /* vnitřní odsazení vlevo a vpravo */
  height: 54px;                   /* pevná výška lišty */
  position: sticky;               /* zůstane nahoře při scrollování */
  top: 0;                         /* přilepí se k vrcholu okna */
  z-index: 100;                   /* bude nad ostatním obsahem */
}

/* Logo v navigaci */
.nav-logo {
  font-size: 18px;       /* velikost písma loga */
  font-weight: 700;      /* tučné */
  color: white;          /* bílá barva */
  letter-spacing: -0.5px; /* mírně stažená písmena */
}

/* Šedý podtitulek "tracker" vedle loga */
.nav-logo-sub {
  color: #aaa;       /* šedá barva */
  font-weight: 400;  /* normální tloušťka */
  margin-left: 2px;  /* malá mezera od loga */
}

/* Kontejner pro navigační odkazy */
.nav-links {
  display: flex; /* odkazy vedle sebe */
  gap: 4px;      /* malá mezera mezi odkazy */
}

/* Jednotlivý navigační odkaz */
.nav-link {
  color: #aaa;                          /* šedá barva ve výchozím stavu */
  font-size: 14px;                      /* velikost písma */
  padding: 6px 14px;                    /* vnitřní odsazení */
  border-radius: 6px;                   /* zaoblené rohy */
  transition: background 0.15s, color 0.15s; /* plynulá animace při hoveru */
}

/* Hover stav odkazu */
.nav-link:hover {
  background: rgba(255,255,255,0.1); /* mírně průhledné bílé pozadí */
  color: white;                      /* bílá barva textu */
}

/* Aktivní odkaz - označuje aktuální stránku */
.nav-link.active {
  background: rgba(255,255,255,0.15); /* o něco tmavší pozadí než hover */
  color: white;                       /* bílá barva textu */
}

/* Hamburger tlačítko - skryté na desktopu, zobrazí se na mobilu přes @media */
.hamburger {
  display: none;                           /* skryté ve výchozím stavu */
  background: none;                        /* průhledné pozadí */
  border: 1px solid rgba(255,255,255,0.3); /* průhledný rámeček */
  color: white;                            /* bílá ikona */
  font-size: 18px;                         /* velikost symbolu ☰ */
  padding: 4px 10px;                       /* vnitřní odsazení */
  border-radius: 6px;                      /* zaoblené rohy */
  cursor: pointer;                         /* kurzor jako ruka */
}

/* Mobilní menu - skryté ve výchozím stavu */
.mobile-menu {
  display: none;             /* skryté */
  position: fixed;           /* zůstane na místě při scrollování */
  top: 54px;                 /* hned pod navigací */
  left: 0;                   /* od levého okraje */
  right: 0;                  /* do pravého okraje */
  background: #111;          /* černé pozadí */
  z-index: 99;               /* pod navigací (z-index 100) ale nad obsahem */
  border-bottom: 1px solid #333; /* spodní čára */
  flex-direction: column;    /* odkazy pod sebou */
}

/* Třída open přidaná JS - otevře mobilní menu */
.mobile-menu.open {
  display: flex; /* zobrazí menu jako flex kontejner */
}

/* Odkaz v mobilním menu */
.mobile-link {
  color: #ddd;                   /* světle šedý text */
  padding: 16px 20px;            /* větší klikací plocha na mobilu */
  font-size: 15px;               /* o něco větší písmo */
  font-weight: 500;              /* středně tučné */
  border-bottom: 1px solid #222; /* oddělovač mezi odkazy */
  transition: background 0.15s;  /* plynulá animace */
}

/* Hover stav mobilního odkazu */
.mobile-link:hover {
  background: #222; /* tmavší pozadí */
  color: white;     /* bílý text */
}

/* ===========================================
   KONTEJNER A HERO SEKCE
   =========================================== */

/* Kontejner omezuje šířku obsahu a centruje ho na stránce */
.container {
  max-width: 1100px; /* maximální šířka obsahu */
  margin: 0 auto;    /* horizontální centrování */
  padding: 0 24px;   /* odsazení od levého a pravého okraje */
}

/* Hero sekce s nadpisem a vyhledáváním */
.hero {
  padding: 28px 0 18px; /* odsazení nahoře a dole */
}

/* Hlavní nadpis stránky */
.hero h1 {
  font-size: 26px;      /* velké písmo */
  font-weight: 700;     /* tučné */
  letter-spacing: -0.5px; /* mírně stažená písmena */
  margin-bottom: 4px;   /* mezera pod nadpisem */
}

/* Popis pod nadpisem */
.hero p {
  color: #666;           /* šedý text */
  font-size: 14px;       /* menší písmo */
  margin-bottom: 18px;   /* mezera pod textem */
}

/* ===========================================
   VYHLEDÁVÁNÍ
   =========================================== */

/* Řádek s vyhledávacím polem a tlačítky */
.search-row {
  display: flex;        /* prvky vedle sebe */
  gap: 8px;             /* mezera mezi polem a tlačítky */
  margin-bottom: 12px;  /* mezera pod vyhledáváním */
}

/* Obal vyhledávacího pole */
.search-wrap {
  position: relative; /* kvůli absolutnímu dropdownu uvnitř */
  flex: 1;            /* zabere veškeré dostupné místo */
  z-index: 50;        /* dropdown bude nad ostatním obsahem */
}

/* Ikona lupy vlevo uvnitř pole */
.search-icon {
  position: absolute;         /* absolutní pozice uvnitř search-wrap */
  left: 12px;                 /* od levého okraje */
  top: 50%;                   /* vertikálně na půl výšky */
  transform: translateY(-50%); /* posun nahoru o půl výšky = vycentrováno */
  color: #999;                /* šedá barva */
  font-size: 14px;            /* velikost ikony */
  pointer-events: none;       /* kliknutí projde skrz na input pod ním */
}

/* Vstupní pole pro vyhledávání */
.search-input {
  width: 100%;              /* celá šířka obalu */
  height: 40px;             /* pevná výška */
  border: 1px solid #ddd;   /* světle šedý rámeček */
  border-radius: 8px;       /* zaoblené rohy */
  padding: 0 12px 0 38px;   /* levý padding 38px kvůli ikoně lupy */
  font-size: 14px;           /* velikost písma */
  font-family: inherit;      /* dědí font od body */
  background: white;         /* bílé pozadí */
  outline: none;             /* odstraní výchozí modrý focus rámeček */
  transition: border-color 0.15s; /* plynulá změna barvy rámečku */
}

/* Pole při focusu (kliknutí do pole) */
.search-input:focus {
  border-color: #111; /* tmavý rámeček signalizuje aktivní pole */
}

/* Dropdown s výsledky vyhledávání */
.search-results {
  position: absolute;                    /* vznáší se nad stránkou */
  top: calc(100% + 4px);               /* 4px pod spodním okrajem pole */
  left: 0;                              /* zarovnán s levým okrajem pole */
  right: 0;                             /* zarovnán s pravým okrajem pole */
  background: white;                    /* bílé pozadí */
  border: 1px solid #ddd;              /* světlý rámeček */
  border-radius: 8px;                   /* zaoblené rohy */
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* stín pro efekt vrstvy */
  z-index: 9999;                        /* úplně nahoře nad vším */
  display: none;                        /* skryté ve výchozím stavu */
  overflow: hidden;                     /* obsah nepřeteče přes zaoblené rohy */
}

/* JS přidá třídu visible - zobrazí dropdown */
.search-results.visible {
  display: block; /* zobrazí dropdown */
}

/* Jeden řádek výsledku vyhledávání */
.search-result-item {
  display: flex;                    /* obrázek a text vedle sebe */
  align-items: center;              /* vertikálně vycentrované */
  gap: 10px;                        /* mezera mezi obrázkem a textem */
  padding: 10px 14px;               /* vnitřní odsazení */
  cursor: pointer;                  /* kurzor jako ruka */
  border-bottom: 1px solid #f0f0f0; /* oddělovač mezi výsledky */
  transition: background 0.1s;      /* rychlá animace hoveru */
}

/* Poslední výsledek bez spodní čáry */
.search-result-item:last-child {
  border-bottom: none; /* odstraní čáru u posledního výsledku */
}

/* Hover stav výsledku */
.search-result-item:hover {
  background: #f8f8f8; /* světle šedé pozadí */
}

/* Miniaturní obrázek ve výsledku */
.search-result-thumb {
  width: 48px;          /* pevná šířka */
  height: 28px;         /* pevná výška - poměr 16:9 */
  border-radius: 4px;   /* mírně zaoblené rohy */
  object-fit: cover;    /* obrázek se ořízne aby zaplnil plochu */
  background: #eee;     /* šedé pozadí pro případ chybějícího obrázku */
  flex-shrink: 0;       /* obrázek se nezmenší při nedostatku místa */
}

/* Název hry ve výsledku */
.search-result-name {
  font-size: 13px;   /* velikost písma */
  font-weight: 500;  /* středně tučné */
  color: #111;       /* tmavý text */
}

/* Rok vydání a Metacritic ve výsledku */
.search-result-year {
  font-size: 11px;  /* malé písmo */
  color: #888;      /* šedá barva */
  margin-top: 1px;  /* malá mezera nad textem */
}

/* ===========================================
   TLAČÍTKA
   =========================================== */

/* Základní styl tlačítka */
.btn {
  height: 40px;                              /* pevná výška */
  padding: 0 18px;                           /* vnitřní odsazení vlevo a vpravo */
  border: 1px solid #ddd;                    /* světlý rámeček */
  border-radius: 8px;                        /* zaoblené rohy */
  font-size: 14px;                           /* velikost písma */
  font-weight: 500;                          /* středně tučné */
  font-family: inherit;                      /* dědí font od body */
  cursor: pointer;                           /* kurzor jako ruka */
  background: white;                         /* bílé pozadí */
  color: #111;                               /* tmavý text */
  transition: background 0.15s, border-color 0.15s; /* plynulá animace */
  white-space: nowrap;                       /* text se nezalamuje na více řádků */
}

/* Hover stav základního tlačítka */
.btn:hover {
  background: #f5f5f5; /* světle šedé pozadí */
}

/* Tmavá varianta tlačítka */
.btn-dark {
  background: #111;   /* černé pozadí */
  color: white;        /* bílý text */
  border-color: #111;  /* černý rámeček */
}

/* Hover stav tmavého tlačítka */
.btn-dark:hover {
  background: #333;   /* tmavě šedé pozadí */
  border-color: #333;  /* tmavě šedý rámeček */
}

/* Nebezpečná akce - červený text pro Odebrat */
.btn-danger {
  color: #c62828; /* červená barva textu */
}

/* Tlačítko přes celou dostupnou šířku */
.btn-full {
  flex: 1; /* zabere veškeré dostupné místo ve flex kontejneru */
}

/* ===========================================
   FILTRY ŽÁNRŮ
   =========================================== */

/* Řádek s filtry žánrů */
.filters {
  display: flex;        /* prvky vedle sebe */
  gap: 6px;             /* mezera mezi filtry */
  flex-wrap: wrap;      /* filtry se zalamují na nový řádek */
  margin-bottom: 20px;  /* mezera pod filtry */
  align-items: center;  /* vertikálně vycentrované */
}

/* Popisek "Žánr:" před filtry */
.filter-label {
  font-size: 13px; /* malé písmo */
  color: #888;     /* šedá barva */
}

/* Chip = zaoblené tlačítko pro filtr žánru */
.chip {
  padding: 5px 13px;   /* vnitřní odsazení */
  border: 1px solid #ddd; /* světlý rámeček */
  border-radius: 99px;  /* plně zaoblené - pill tvar */
  font-size: 13px;      /* velikost písma */
  font-family: inherit; /* dědí font od body */
  background: white;    /* bílé pozadí */
  color: #444;          /* tmavě šedý text */
  cursor: pointer;      /* kurzor jako ruka */
  transition: all 0.15s; /* plynulá animace všech vlastností */
  line-height: 1.4;     /* výška řádku */
}

/* Hover stav chipu */
.chip:hover {
  border-color: #aaa; /* tmavší rámeček */
  color: #111;        /* tmavší text */
}

/* Aktivní chip - vybraný žánr */
.chip.active {
  background: #111;   /* černé pozadí */
  border-color: #111; /* černý rámeček */
  color: white;        /* bílý text */
}

/* Select dropdown pro řazení - stejný vzhled jako chip */
select.chip {
  appearance: none;          /* odstraní výchozí styl prohlížeče */
  -webkit-appearance: none;  /* Safari verze */
  padding-right: 28px;       /* místo pro šipku vpravo */
  background-color: white;   /* bílé pozadí */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); /* vlastní šipka jako SVG */
  background-repeat: no-repeat;    /* šipka se nezopakuje */
  background-position: right 10px center; /* šipka 10px od pravého okraje */
  cursor: pointer;                  /* kurzor jako ruka */
}

/* Focus stav selectu */
select.chip:focus {
  outline: none;       /* žádný výchozí focus rámeček */
  border-color: #999;  /* šedý rámeček při focusu */
}

/* ===========================================
   HLAVNÍ LAYOUT
   =========================================== */

/* Dvousloupcový layout: obsah vlevo, sidebar vpravo */
.main-layout {
  display: grid;                          /* CSS grid */
  grid-template-columns: 1fr 230px;      /* obsah zabere zbytek, sidebar 230px */
  gap: 20px;                             /* mezera mezi sloupci */
  align-items: start;                    /* zarovnání na začátek (sidebar se netahá) */
}

/* Oblast s kartami her */
.games-area {
  min-width: 0; /* zabraňuje přetečení v CSS gridu */
}

/* ===========================================
   TABY
   =========================================== */

/* Řádek s taby a přepínačem pohledu */
.tabs-row {
  display: flex;                  /* prvky vedle sebe */
  align-items: center;            /* vertikálně vycentrované */
  justify-content: space-between; /* taby vlevo, přepínač vpravo */
  border-bottom: 2px solid #e0e0e0; /* spodní čára pod taby */
  margin-bottom: 16px;            /* mezera pod taby */
}

/* Kontejner pro taby */
.tabs {
  display: flex; /* taby vedle sebe */
}

/* Jeden tab */
.tab {
  padding: 10px 14px;              /* vnitřní odsazení */
  font-size: 13px;                 /* velikost písma */
  font-weight: 500;                /* středně tučné */
  color: #888;                     /* šedá barva ve výchozím stavu */
  border: none;                    /* žádný rámeček */
  background: none;                /* průhledné pozadí */
  cursor: pointer;                 /* kurzor jako ruka */
  border-bottom: 2px solid transparent; /* průhledná spodní čára */
  margin-bottom: -2px;             /* překryje spodní čáru .tabs-row */
  font-family: inherit;            /* dědí font od body */
  transition: color 0.15s, border-color 0.15s; /* plynulá animace */
  white-space: nowrap;             /* text se nezalamuje */
}

/* Hover stav tabu */
.tab:hover {
  color: #444; /* tmavší text */
}

/* Aktivní tab */
.tab.active {
  color: #111;               /* tmavý text */
  border-bottom-color: #111; /* černá spodní čára */
}

/* Počítadlo her v tabu */
.tab .count {
  display: inline-block; /* zobrazí jako blok v řádku */
  background: #eee;      /* světle šedé pozadí */
  border-radius: 99px;   /* plně zaoblené */
  font-size: 10px;       /* malé písmo */
  font-weight: 600;      /* tučné */
  padding: 1px 6px;      /* vnitřní odsazení */
  margin-left: 5px;      /* mezera od textu tabu */
  color: #666;           /* šedá barva */
}

/* Počítadlo aktivního tabu */
.tab.active .count {
  background: #111; /* černé pozadí */
  color: white;     /* bílý text */
}

/* Přepínač grid/list pohledu */
.view-toggle {
  display: flex; /* tlačítka vedle sebe */
  gap: 4px;      /* mezera mezi tlačítky */
}

/* Tlačítko pro přepnutí pohledu */
.view-btn {
  width: 32px;             /* pevná šířka */
  height: 32px;            /* pevná výška */
  border: 1px solid #ddd;  /* světlý rámeček */
  border-radius: 6px;      /* zaoblené rohy */
  background: white;       /* bílé pozadí */
  cursor: pointer;         /* kurzor jako ruka */
  font-size: 14px;         /* velikost ikony */
  display: flex;           /* flexbox pro centrování ikony */
  align-items: center;     /* vertikálně vycentrováno */
  justify-content: center; /* horizontálně vycentrováno */
  transition: all 0.15s;   /* plynulá animace */
  color: #888;             /* šedá barva ikony */
}

/* Hover stav tlačítka pohledu */
.view-btn:hover {
  border-color: #aaa; /* tmavší rámeček */
  color: #111;        /* tmavší ikona */
}

/* Aktivní tlačítko pohledu */
.view-btn.active {
  background: #111;   /* černé pozadí */
  border-color: #111; /* černý rámeček */
  color: white;        /* bílá ikona */
}

/* ===========================================
   MŘÍŽKA KARET
   =========================================== */

/* Mřížka s kartami her */
.games-grid {
  display: grid;                          /* CSS grid */
  grid-template-columns: repeat(4, 1fr); /* 4 stejně široké sloupce */
  gap: 14px;                             /* mezera mezi kartami */
  min-width: 0;                          /* zabraňuje přetečení v nadřazeném gridu */
}

/* ===========================================
   TLAČÍTKO NAČÍST VÍCE
   =========================================== */

/* Obal pro tlačítko - skryté ve výchozím stavu */
.load-more-wrap {
  text-align: center;   /* tlačítko vycentrováno */
  padding: 20px 0 40px; /* odsazení nahoře a dole */
  display: none;        /* skryté ve výchozím stavu */
}

/* JS přidá třídu visible - zobrazí tlačítko */
.load-more-wrap.visible {
  display: block; /* zobrazí obal */
}

/* ===========================================
   KARTA HRY
   =========================================== */

/* Karta jedné hry */
.game-card {
  background: white;           /* bílé pozadí */
  border: 1px solid #e0e0e0;  /* světlý rámeček */
  border-radius: 10px;         /* zaoblené rohy */
  overflow: hidden;            /* obsah nepřeteče přes zaoblené rohy */
  cursor: pointer;             /* kurzor jako ruka */
  transition: box-shadow 0.2s, transform 0.2s; /* plynulá animace hoveru */
  display: flex;               /* flexbox pro sloupec */
  flex-direction: column;      /* obsah pod sebou */
  min-width: 0;                /* zabraňuje přetečení v CSS gridu */
  width: 100%;                 /* celá šířka buňky gridu */
}

/* Efekt zvednutí při hoveru */
.game-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); /* stín */
  transform: translateY(-2px);            /* karta se mírně zvedne nahoru */
}

/* Obrázek hry na kartě */
.game-card img {
  width: 100%;         /* celá šířka karty */
  aspect-ratio: 16/9;  /* poměr stran jako monitor */
  object-fit: cover;   /* obrázek se ořízne aby zaplnil plochu */
  background: #eee;    /* šedé pozadí pro případ chybějícího obrázku */
}

/* Placeholder místo obrázku */
.game-cover-placeholder {
  width: 100%;             /* celá šířka karty */
  aspect-ratio: 16/9;      /* stejný poměr stran jako obrázek */
  background: #eee;        /* šedé pozadí */
  display: flex;           /* flexbox pro centrování emoji */
  align-items: center;     /* vertikálně vycentrováno */
  justify-content: center; /* horizontálně vycentrováno */
  font-size: 28px;         /* velikost emoji */
}

/* Tělo karty s názvem a rokem */
.card-body {
  padding: 10px 12px;  /* vnitřní odsazení */
  flex: 1;             /* zabere veškeré dostupné místo */
  display: flex;       /* flexbox */
  flex-direction: column; /* obsah pod sebou */
  gap: 4px;            /* mezera mezi prvky */
}

/* Název hry na kartě */
.card-title {
  font-size: 13px;          /* velikost písma */
  font-weight: 600;         /* tučné */
  line-height: 1.3;         /* výška řádku */
  color: #111;              /* tmavý text */
  display: -webkit-box;     /* speciální flex pro ořezání textu */
  -webkit-line-clamp: 2;    /* maximálně 2 řádky textu */
  -webkit-box-orient: vertical; /* vertikální orientace boxu */
  overflow: hidden;         /* skryje přebývající text */
}

/* Rok vydání a žánr */
.card-year {
  font-size: 11px; /* malé písmo */
  color: #999;     /* světle šedá barva */
}

/* Patička karty */
.card-footer {
  padding: 8px 12px;             /* vnitřní odsazení */
  border-top: 1px solid #f0f0f0; /* čára nad patičkou */
  display: flex;                 /* prvky vedle sebe */
  align-items: center;           /* vertikálně vycentrované */
  justify-content: space-between; /* rozložení po celé šířce */
  gap: 4px;                      /* mezera mezi prvky */
  flex-wrap: wrap;               /* zalomení pokud je málo místa */
}

/* Hvězdičkové hodnocení na kartě */
.card-rating {
  font-size: 11px;  /* malé písmo */
  color: #f59e0b;   /* zlatá barva */
  font-weight: 600; /* tučné */
}

/* ===========================================
   STATUSOVÉ NÁLEPKY
   =========================================== */

/* Základní styl nálepky */
.badge {
  font-size: 10px;        /* malé písmo */
  font-weight: 600;       /* tučné */
  padding: 2px 8px;       /* vnitřní odsazení */
  border-radius: 4px;     /* mírně zaoblené rohy */
  text-transform: uppercase; /* velká písmena */
  letter-spacing: 0.03em; /* mírně rozšířené mezery mezi písmeny */
}

/* Zelená - Hraju */
.badge-playing  { background: #e8f5e9; color: #2e7d32; }
/* Modrá - Dohráno */
.badge-done     { background: #e3f2fd; color: #1565c0; }
/* Žlutá - Wishlist */
.badge-wishlist { background: #fff8e1; color: #f57f17; }
/* Šedá - nepřidáno do backlogu */
.badge-add      { background: #f5f5f5; color: #888; }

/* Nálepka platformy v modalu */
.badge-platform {
  background: #f5f5f5;    /* šedé pozadí */
  color: #555;            /* tmavě šedý text */
  font-size: 10px;        /* malé písmo */
  font-weight: 500;       /* středně tučné */
  padding: 2px 7px;       /* vnitřní odsazení */
  border-radius: 4px;     /* zaoblené rohy */
  white-space: nowrap;    /* celý název na jednom řádku */
  display: inline-block;  /* zobrazení v řádku */
  margin: 0 4px 4px 0;   /* vnější odsazení vpravo a dole */
}

/* Kontejner pro nálepky platforem */
#modal-platforms {
  display: flex;   /* nálepky vedle sebe */
  flex-wrap: wrap; /* zalamování na nový řádek */
  margin-top: 4px; /* mezera nad platformami */
}

/* ===========================================
   METACRITIC SKÓRE
   =========================================== */

/* Základní styl Metacritic skóre */
.mc {
  font-size: 10px;   /* malé písmo */
  font-weight: 700;  /* tučné */
  padding: 2px 5px;  /* vnitřní odsazení */
  border-radius: 4px; /* zaoblené rohy */
}

/* Zelená pro skóre 80 a více */
.mc-great { background: #e8f5e9; color: #2e7d32; }
/* Žlutá pro skóre 60-79 */
.mc-ok    { background: #fff8e1; color: #f57f17; }
/* Červená pro skóre pod 60 */
.mc-bad   { background: #ffebee; color: #c62828; }

/* ===========================================
   LISTOVÉ ZOBRAZENÍ
   =========================================== */

/* Kontejner pro seznam her */
.games-list {
  display: flex;           /* flexbox */
  flex-direction: column;  /* řádky pod sebou */
  gap: 8px;               /* mezera mezi řádky */
  padding-bottom: 40px;   /* odsazení od spodku stránky */
}

/* Jeden řádek hry */
.game-row {
  background: white;           /* bílé pozadí */
  border: 1px solid #e0e0e0;  /* světlý rámeček */
  border-radius: 10px;         /* zaoblené rohy */
  display: grid;               /* CSS grid */
  grid-template-columns: 80px 1fr auto; /* obrázek | info | akce */
  overflow: hidden;            /* obsah nepřeteče přes zaoblené rohy */
  cursor: pointer;             /* kurzor jako ruka */
  transition: box-shadow 0.15s; /* plynulá animace */
  min-width: 0;                /* zabraňuje přetečení */
}

/* Hover stav řádku */
.game-row:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08); /* jemný stín */
}

/* Obrázek v řádku */
.game-row img {
  width: 80px;       /* pevná šířka */
  height: 60px;      /* pevná výška - všechny stejně velké */
  object-fit: cover; /* obrázek se ořízne */
  background: #eee;  /* šedé pozadí */
  flex-shrink: 0;    /* nesmí se zmenšit */
}

/* Placeholder obrázku v řádku */
.row-thumb-placeholder {
  width: 80px;             /* stejná šířka jako obrázek */
  height: 60px;            /* stejná výška jako obrázek */
  background: #eee;        /* šedé pozadí */
  display: flex;           /* flexbox pro centrování emoji */
  align-items: center;     /* vertikálně vycentrováno */
  justify-content: center; /* horizontálně vycentrováno */
  font-size: 20px;         /* velikost emoji */
  flex-shrink: 0;          /* nesmí se zmenšit */
}

/* Info část řádku */
.row-info {
  padding: 12px 16px; /* vnitřní odsazení */
  min-width: 0;       /* zabraňuje přetečení textu */
}

/* Název hry v řádku */
.row-title {
  font-size: 14px;        /* velikost písma */
  font-weight: 600;       /* tučné */
  margin-bottom: 3px;     /* mezera pod názvem */
  white-space: nowrap;    /* text na jednom řádku */
  overflow: hidden;       /* skryje přebývající text */
  text-overflow: ellipsis; /* "..." na konci oříznutého textu */
}

/* Rok a žánr v řádku */
.row-meta {
  font-size: 12px; /* malé písmo */
  color: #888;     /* šedá barva */
}

/* Pravá část řádku s hodnocením a statusem */
.row-right {
  display: flex;      /* prvky vedle sebe */
  align-items: center; /* vertikálně vycentrované */
  gap: 10px;          /* mezera mezi prvky */
  padding: 0 16px;    /* odsazení vlevo a vpravo */
  flex-shrink: 0;     /* nesmí se zmenšit */
}

/* ===========================================
   PRÁZDNÝ STAV
   =========================================== */

/* Prázdný stav - zobrazí se když nejsou žádné hry */
.empty {
  grid-column: 1 / -1; /* zabere celou šířku gridu */
  text-align: center;  /* vycentrovaný obsah */
  padding: 60px 20px;  /* velké odsazení */
}

/* Velké emoji ve středu */
.empty .emoji {
  font-size: 44px;    /* velká ikona */
  display: block;     /* vlastní řádek */
  margin-bottom: 12px; /* mezera pod emoji */
  opacity: 0.35;      /* průhledné */
}

/* Nadpis prázdného stavu */
.empty h3 {
  font-size: 17px;    /* velikost písma */
  font-weight: 600;   /* tučné */
  color: #666;        /* šedá barva */
  margin-bottom: 6px; /* mezera pod nadpisem */
}

/* Text prázdného stavu */
.empty p {
  font-size: 13px; /* malé písmo */
  color: #999;     /* světle šedá */
}

/* ===========================================
   SIDEBAR
   =========================================== */

/* Postranní panel */
.sidebar {
  position: sticky; /* zůstane viditelný při scrollování */
  top: 70px;        /* 54px nav + 16px mezera */
  display: flex;    /* flexbox */
  flex-direction: column; /* boxy pod sebou */
  gap: 12px;        /* mezera mezi boxy */
}

/* Jeden box v sidebaru */
.sidebar-box {
  background: white;          /* bílé pozadí */
  border: 1px solid #e0e0e0; /* světlý rámeček */
  border-radius: 10px;        /* zaoblené rohy */
  padding: 16px;              /* vnitřní odsazení */
}

/* Nadpis boxu */
.sidebar-box h3 {
  font-size: 11px;        /* malé písmo */
  font-weight: 600;       /* tučné */
  text-transform: uppercase; /* velká písmena */
  letter-spacing: 0.07em; /* rozšířené mezery */
  color: #888;            /* šedá barva */
  margin-bottom: 14px;    /* mezera pod nadpisem */
}

/* Jeden progress bar s popiskem */
.progress-item {
  margin-bottom: 12px; /* mezera pod položkou */
}

/* Popisek progress baru */
.progress-label {
  display: flex;              /* prvky vedle sebe */
  justify-content: space-between; /* název vlevo, číslo vpravo */
  font-size: 12px;            /* malé písmo */
  color: #555;                /* tmavě šedá */
  margin-bottom: 5px;         /* mezera nad barem */
}

/* Pozadí progress baru */
.progress-bg {
  height: 5px;        /* výška baru */
  background: #f0f0f0; /* světle šedé pozadí */
  border-radius: 99px; /* plně zaoblené */
  overflow: hidden;    /* výplň nepřeteče */
}

/* Barevná výplň baru - šířka nastavuje JS */
.progress-fill {
  height: 100%;       /* plná výška pozadí */
  border-radius: 99px; /* plně zaoblené */
  transition: width 0.5s ease; /* plynulá animace změny šířky */
  width: 0%;          /* výchozí stav - prázdný */
}

/* Barvy pro jednotlivé stavy */
.fill-green  { background: #4caf50; } /* zelená pro Hraju */
.fill-blue   { background: #2196f3; } /* modrá pro Dohráno */
.fill-yellow { background: #ffc107; } /* žlutá pro Wishlist */

/* Jeden řádek žánru */
.genre-row {
  display: flex;                  /* prvky vedle sebe */
  justify-content: space-between; /* název vlevo, číslo vpravo */
  align-items: center;            /* vertikálně vycentrované */
  padding: 6px 0;                 /* odsazení nahoře a dole */
  border-bottom: 1px solid #f0f0f0; /* oddělovač */
  font-size: 13px;                /* velikost písma */
  color: #444;                    /* tmavě šedá */
}

/* Poslední žánr bez spodní čáry */
.genre-row:last-child {
  border-bottom: none; /* odstraní oddělovač */
}

/* Číslo počtu her u žánru */
.genre-row span:last-child {
  font-weight: 600; /* tučné */
  font-size: 12px;  /* malé písmo */
  color: #111;      /* tmavý text */
}

/* Text "Zatím žádné hry" */
.genre-empty {
  color: #aaa; /* světle šedá */
}

/* Průměrné hodnocení */
.avg-rating {
  text-align: center; /* vycentrováno */
  padding: 8px 0;     /* odsazení nahoře a dole */
}

/* Velké číslo hodnocení */
.avg-big {
  font-size: 36px;  /* velké číslo */
  font-weight: 700; /* tučné */
  color: #f59e0b;   /* zlatá barva */
  display: block;   /* vlastní řádek */
  line-height: 1;   /* bez extra výšky řádku */
}

/* Popisek pod číslem */
.avg-sub {
  font-size: 11px; /* malé písmo */
  color: #999;     /* světle šedá */
  margin-top: 4px; /* mezera nad textem */
}

/* ===========================================
   MODAL
   =========================================== */

/* Tmavé pozadí za modalem */
.modal-backdrop {
  position: fixed;        /* překryje celou stránku */
  inset: 0;               /* top: 0, right: 0, bottom: 0, left: 0 */
  background: rgba(0,0,0,0.5); /* poloprůhledné černé */
  z-index: 200;           /* nad vším včetně navigace */
  display: flex;          /* flexbox pro centrování modalu */
  align-items: center;    /* vertikálně vycentrováno */
  justify-content: center; /* horizontálně vycentrováno */
  padding: 16px;          /* odsazení od okrajů na mobilu */
  opacity: 0;             /* neviditelný ve výchozím stavu */
  pointer-events: none;   /* nelze klikat když je neviditelný */
  transition: opacity 0.2s; /* plynulá animace zobrazení */
}

/* Třída open - modal se zobrazí */
.modal-backdrop.open {
  opacity: 1;           /* plně viditelný */
  pointer-events: all;  /* lze klikat */
}

/* Bílá karta modalu */
.modal {
  background: white;       /* bílé pozadí */
  border-radius: 14px;     /* zaoblené rohy */
  width: 100%;             /* celá dostupná šířka */
  max-width: 500px;        /* maximální šířka */
  max-height: 90vh;        /* maximálně 90% výšky okna */
  overflow-y: auto;        /* scrolluje pokud je obsah dlouhý */
  position: relative;      /* kvůli absolutnímu tlačítku X */
  transform: translateY(10px); /* mírně posunutý dolů ve výchozím stavu */
  transition: transform 0.2s;  /* plynulá animace posunu */
  box-shadow: 0 20px 60px rgba(0,0,0,0.2); /* silný stín */
}

/* Modal při otevření - posune se na správnou pozici */
.modal-backdrop.open .modal {
  transform: translateY(0); /* vrátí se na původní pozici */
}

/* Hlavička modalu */
.modal-header {
  display: flex;                 /* obrázek a info vedle sebe */
  gap: 14px;                    /* mezera */
  padding: 20px;                /* vnitřní odsazení */
  border-bottom: 1px solid #f0f0f0; /* oddělovač */
}

/* Obrázek hry v modalu */
.modal-cover-img {
  width: 80px;        /* pevná šířka */
  border-radius: 8px;  /* zaoblené rohy */
  object-fit: cover;   /* obrázek se ořízne */
  aspect-ratio: 3/4;   /* knižní poměr stran */
  background: #eee;    /* šedé pozadí */
  flex-shrink: 0;      /* nesmí se zmenšit */
}

/* Placeholder obrázku v modalu */
.modal-cover-placeholder {
  width: 80px;             /* pevná šířka */
  aspect-ratio: 3/4;       /* knižní poměr stran */
  background: #eee;        /* šedé pozadí */
  border-radius: 8px;      /* zaoblené rohy */
  display: flex;           /* flexbox pro centrování emoji */
  align-items: center;     /* vertikálně vycentrováno */
  justify-content: center; /* horizontálně vycentrováno */
  font-size: 26px;         /* velikost emoji */
  flex-shrink: 0;          /* nesmí se zmenšit */
}

/* Info část hlavičky */
.modal-header-info {
  flex: 1;     /* zabere zbytek šířky */
  min-width: 0; /* zabraňuje přetečení textu */
}

/* Název hry v modalu */
.modal-header-info h2 {
  font-size: 17px;   /* velikost písma */
  font-weight: 700;  /* tučné */
  line-height: 1.3;  /* výška řádku */
  margin-bottom: 4px; /* mezera pod názvem */
}

/* Metadata hry (rok, žánry) */
.modal-meta {
  font-size: 12px;   /* malé písmo */
  color: #888;       /* šedá barva */
  margin-bottom: 8px; /* mezera pod metadaty */
}

/* Tlačítko X pro zavření */
.modal-close {
  position: absolute; /* absolutní pozice v rohu modalu */
  top: 14px;          /* od vrcholu */
  right: 14px;        /* od pravého okraje */
  width: 28px;        /* pevná šířka */
  height: 28px;       /* pevná výška */
  border-radius: 50%; /* kruhový tvar */
  border: 1px solid #e0e0e0; /* světlý rámeček */
  background: #f5f5f5; /* světle šedé pozadí */
  color: #666;         /* šedá ikona */
  cursor: pointer;     /* kurzor jako ruka */
  font-size: 14px;     /* velikost X */
  display: flex;       /* flexbox pro centrování X */
  align-items: center; /* vertikálně vycentrováno */
  justify-content: center; /* horizontálně vycentrováno */
  transition: all 0.15s; /* plynulá animace */
}

/* Hover stav tlačítka X */
.modal-close:hover {
  background: #eee; /* tmavší pozadí */
  color: #111;      /* tmavší ikona */
}

/* Tělo modalu s formulářem */
.modal-body {
  padding: 20px; /* vnitřní odsazení */
}

/* Popis hry */
.modal-desc {
  font-size: 13px;    /* malé písmo */
  color: #555;        /* tmavě šedá */
  line-height: 1.65;  /* větší výška řádku pro čitelnost */
  margin-bottom: 18px; /* mezera pod popisem */
}

/* Popisek sekce v modalu */
.modal-label {
  font-size: 11px;        /* malé písmo */
  font-weight: 600;       /* tučné */
  text-transform: uppercase; /* velká písmena */
  letter-spacing: 0.07em; /* rozšířené mezery */
  color: #999;            /* šedá barva */
  margin-bottom: 8px;     /* mezera pod popiskem */
}

/* Jedna sekce formuláře */
.modal-section {
  margin-bottom: 18px; /* mezera mezi sekcemi */
}

/* Kontejner pro status tlačítka */
.status-btns {
  display: flex; /* tlačítka vedle sebe */
  gap: 8px;      /* mezera mezi tlačítky */
}

/* Jedno tlačítko stavu hry */
.status-btn {
  flex: 1;             /* všechna stejně široká */
  padding: 10px 6px;   /* vnitřní odsazení */
  border: 1px solid #e0e0e0; /* světlý rámeček */
  border-radius: 8px;  /* zaoblené rohy */
  background: #f8f8f8; /* světle šedé pozadí */
  cursor: pointer;     /* kurzor jako ruka */
  font-family: inherit; /* dědí font */
  font-size: 12px;     /* malé písmo */
  font-weight: 500;    /* středně tučné */
  color: #666;         /* šedá barva */
  text-align: center;  /* vycentrovaný text */
  transition: all 0.15s; /* plynulá animace */
  display: flex;       /* flexbox */
  flex-direction: column; /* emoji nad textem */
  align-items: center; /* horizontálně vycentrováno */
  gap: 4px;           /* mezera mezi emoji a textem */
}

/* Emoji ikona ve status tlačítku */
.status-icon {
  font-size: 18px; /* velikost emoji */
}

/* Hover stav status tlačítka */
.status-btn:hover {
  border-color: #bbb; /* tmavší rámeček */
  color: #111;        /* tmavší text */
}

/* Aktivní stavy status tlačítek */
.status-btn.sel-playing  { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; } /* zelená */
.status-btn.sel-done     { background: #e3f2fd; border-color: #90caf9; color: #1565c0; } /* modrá */
.status-btn.sel-wishlist { background: #fff8e1; border-color: #ffe082; color: #f57f17; } /* žlutá */

/* Kontejner pro hvězdičky */
.stars {
  display: flex; /* hvězdičky vedle sebe */
  gap: 3px;      /* malá mezera */
}

/* Jedna hvězdička */
.star {
  font-size: 22px;         /* velikost hvězdičky */
  cursor: pointer;         /* kurzor jako ruka */
  color: #ddd;             /* šedá ve výchozím stavu */
  transition: color 0.1s, transform 0.1s; /* rychlá animace */
  line-height: 1;          /* bez extra výšky řádku */
  user-select: none;       /* nejde vybrat jako text */
}

/* Aktivní hvězdička nebo hover */
.star:hover,
.star.on {
  color: #f59e0b; /* zlatá barva */
}

/* Zvětšení při hoveru */
.star:hover {
  transform: scale(1.1); /* o 10% větší */
}

/* Textarea pro psaní poznámek */
.notes-input {
  width: 100%;            /* celá šířka */
  min-height: 60px;       /* minimální výška */
  border: 1px solid #e0e0e0; /* světlý rámeček */
  border-radius: 8px;     /* zaoblené rohy */
  padding: 10px 12px;     /* vnitřní odsazení */
  font-size: 13px;        /* velikost písma */
  font-family: inherit;   /* dědí font */
  resize: vertical;       /* lze měnit výšku tažením */
  outline: none;          /* žádný výchozí focus rámeček */
  color: #111;            /* tmavý text */
  transition: border-color 0.15s; /* plynulá animace */
}

/* Focus stav textarey */
.notes-input:focus {
  border-color: #111; /* tmavý rámeček při focusu */
}

/* Patička modalu */
.modal-footer {
  padding: 14px 20px;            /* vnitřní odsazení */
  border-top: 1px solid #f0f0f0; /* oddělovač */
  display: flex;                 /* tlačítka vedle sebe */
  gap: 8px;                      /* mezera mezi tlačítky */
}

/* ===========================================
   TOAST NOTIFIKACE
   =========================================== */

/* Kontejner pro toasty - pravý dolní roh */
.toast-wrap {
  position: fixed;   /* pevná pozice */
  bottom: 20px;      /* od spodku */
  right: 20px;       /* od pravého okraje */
  z-index: 999;      /* nad vším */
  display: flex;     /* toasty pod sebou */
  flex-direction: column; /* nové toasty pod starými */
  gap: 8px;          /* mezera mezi toasty */
}

/* Jedna toast zpráva */
.toast {
  background: #111;  /* černé pozadí */
  color: white;       /* bílý text */
  padding: 10px 16px; /* vnitřní odsazení */
  border-radius: 8px; /* zaoblené rohy */
  font-size: 13px;    /* velikost písma */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* stín */
  animation: slide-in 0.2s ease; /* animace při zobrazení */
}

/* Animace - toast vyjede zprava */
@keyframes slide-in {
  from { transform: translateX(20px); opacity: 0; } /* začátek - posunutý a průhledný */
  to   { transform: translateX(0);    opacity: 1; } /* konec - na místě a viditelný */
}

/* ===========================================
   SKELETON LOADER
   =========================================== */

/* Animovaný placeholder během načítání */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); /* přechodový gradient */
  background-size: 200% 100%; /* gradient je 2x širší než prvek */
  animation: shimmer 1.4s infinite; /* nekonečná animace */
  border-radius: 6px;         /* zaoblené rohy */
}

/* Pohyb gradientu zleva doprava */
@keyframes shimmer {
  0%   { background-position: 200% 0; }  /* gradient začíná vpravo */
  100% { background-position: -200% 0; } /* gradient skončí vlevo */
}

/* ===========================================
   STRÁNKA: MŮJ SEZNAM
   =========================================== */

/* Sekce pro jeden stav */
.list-section {
  margin-bottom: 28px; /* mezera mezi sekcemi */
}

/* Nadpis sekce */
.list-section-title {
  font-size: 16px;         /* velikost písma */
  font-weight: 700;        /* tučné */
  margin-bottom: 12px;     /* mezera pod nadpisem */
  padding-bottom: 8px;     /* odsazení od čáry */
  border-bottom: 2px solid #eee; /* spodní čára */
  color: #111;             /* tmavý text */
}

/* ===========================================
   STRÁNKA: STATISTIKY
   =========================================== */

/* Mřížka velkých čísel */
.stats-grid {
  display: grid;                         /* CSS grid */
  grid-template-columns: repeat(6, 1fr); /* 6 stejných sloupců */
  gap: 10px;                            /* mezera mezi kartami */
  margin-bottom: 20px;                  /* mezera pod mřížkou */
}

/* Jedna stat karta */
.stat-card {
  background: white;          /* bílé pozadí */
  border: 1px solid #e0e0e0; /* světlý rámeček */
  border-radius: 10px;        /* zaoblené rohy */
  padding: 16px;              /* vnitřní odsazení */
  text-align: center;         /* vycentrovaný obsah */
}

/* Velké číslo ve stat kartě */
.stat-big {
  font-size: 28px;    /* velké číslo */
  font-weight: 700;   /* tučné */
  display: block;     /* vlastní řádek */
  line-height: 1;     /* bez extra výšky */
  margin-bottom: 4px; /* mezera pod číslem */
  color: #111;        /* výchozí tmavá barva */
}

/* Barvy čísel podle stavu */
.stat-playing  { color: #2e7d32; } /* zelená */
.stat-done     { color: #1565c0; } /* modrá */
.stat-wishlist { color: #f57f17; } /* oranžová */
.stat-avg      { color: #f59e0b; } /* zlatá */

/* Popisek pod číslem */
.stat-lbl {
  font-size: 11px;        /* malé písmo */
  color: #888;            /* šedá barva */
  text-transform: uppercase; /* velká písmena */
  letter-spacing: 0.05em; /* rozšířené mezery */
}

/* Mřížka grafů */
.charts-grid {
  display: grid;                         /* CSS grid */
  grid-template-columns: repeat(3, 1fr); /* 3 stejné sloupce */
  gap: 12px;                            /* mezera mezi grafy */
  margin-bottom: 20px;                  /* mezera pod grafy */
}

/* Jeden box grafu */
.chart-box {
  background: white;          /* bílé pozadí */
  border: 1px solid #e0e0e0; /* světlý rámeček */
  border-radius: 10px;        /* zaoblené rohy */
  padding: 16px;              /* vnitřní odsazení */
  display: flex;              /* flexbox */
  flex-direction: column;     /* obsah pod sebou */
}

/* Nadpis grafu */
.chart-box h3 {
  font-size: 11px;        /* malé písmo */
  font-weight: 600;       /* tučné */
  text-transform: uppercase; /* velká písmena */
  letter-spacing: 0.07em; /* rozšířené mezery */
  color: #888;            /* šedá barva */
  margin-bottom: 14px;    /* mezera pod nadpisem */
}

/* Box pro všechny poznámky */
.chart-box-notes {
  margin-bottom: 40px; /* větší mezera na konci stránky */
}

/* Jeden řádek horizontálního bar chartu */
.bar-row {
  display: grid;                            /* CSS grid */
  grid-template-columns: 100px 1fr 24px;   /* popisek | bar | číslo */
  align-items: center;                      /* vertikálně vycentrováno */
  gap: 8px;                                /* mezery */
  margin-bottom: 8px;                      /* mezera pod řádkem */
}

/* Popisek baru */
.bar-label {
  font-size: 12px;        /* malé písmo */
  color: #555;            /* tmavě šedá */
  white-space: nowrap;    /* text na jednom řádku */
  overflow: hidden;       /* skryje přebývající text */
  text-overflow: ellipsis; /* "..." na konci */
}

/* Pozadí baru */
.bar-track {
  height: 6px;        /* výška baru */
  background: #f0f0f0; /* světle šedé pozadí */
  border-radius: 99px; /* plně zaoblené */
  overflow: hidden;    /* výplň nepřeteče */
}

/* Výplň baru - šířka nastavuje JS */
.bar-fill {
  height: 100%;       /* plná výška pozadí */
  border-radius: 99px; /* plně zaoblené */
  background: #111;   /* černá barva */
  transition: width 0.5s ease; /* plynulá animace */
}

/* Číslo napravo od baru */
.bar-val {
  font-size: 11px;  /* malé písmo */
  font-weight: 600; /* tučné */
  color: #888;      /* šedá barva */
  text-align: right; /* zarovnáno vpravo */
}

/* Sloupcový chart pro distribuci hodnocení */
.col-chart {
  display: flex;          /* sloupce vedle sebe */
  align-items: flex-end;  /* zarovnány ke spodku */
  justify-content: center; /* vycentrované */
  gap: 5px;              /* mezera mezi sloupci */
  height: 100px;         /* pevná výška oblasti */
  padding-bottom: 20px;  /* místo pro čísla pod sloupci */
}

/* Jeden sloupec */
.col {
  flex: 0 0 auto;  /* pevná šířka, nezmenší se */
  width: 8%;       /* šířka sloupce */
  display: flex;   /* flexbox */
  flex-direction: column; /* obsah pod sebou */
  align-items: center;    /* horizontálně vycentrováno */
  height: 100%;    /* plná výška oblasti */
  position: relative; /* kvůli absolutnímu číslu pod sloupcem */
}

/* Obal sloupce - zarovná sloupec ke spodku */
.col-bar-wrap {
  flex: 1;         /* zabere veškerou výšku */
  width: 100%;     /* plná šířka */
  display: flex;   /* flexbox */
  align-items: flex-end; /* sloupec roste od spodku */
}

/* Samotný sloupec */
.col-bar {
  width: 100%;              /* plná šířka obalů */
  background: #f59e0b;      /* zlatá barva */
  border-radius: 3px 3px 0 0; /* zaoblené jen nahoře */
  min-height: 2px;          /* minimální výška i pro hodnotu 0 */
  transition: height 0.5s ease; /* plynulá animace */
}

/* Číslo pod sloupcem */
.col-num {
  font-size: 9px;     /* velmi malé písmo */
  color: #aaa;        /* světle šedá */
  position: absolute; /* absolutní pozice */
  bottom: -16px;      /* pod sloupcem */
}

/* Text "Zatím žádná data" */
.chart-empty {
  font-size: 13px; /* malé písmo */
  color: #aaa;     /* světle šedá */
  padding: 8px 0;  /* odsazení */
}

/* ===========================================
   POZNÁMKY V MODALU
   =========================================== */

/* Text "Zatím žádné poznámky" */
.notes-empty {
  font-size: 13px; /* malé písmo */
  color: #aaa;     /* světle šedá */
  padding: 8px 0;  /* odsazení */
}

/* Jedna poznámka */
.note-item {
  background: #f8f8f8;        /* světle šedé pozadí */
  border: 1px solid #e8e8e8;  /* světlý rámeček */
  border-radius: 8px;          /* zaoblené rohy */
  padding: 10px 12px;          /* vnitřní odsazení */
  margin-bottom: 8px;          /* mezera pod poznámkou */
}

/* Text poznámky */
.note-text {
  font-size: 13px;      /* velikost písma */
  color: #222;          /* tmavý text */
  line-height: 1.5;     /* výška řádku */
  margin-bottom: 4px;   /* mezera pod textem */
  white-space: pre-wrap; /* zachová nové řádky z textarey */
  word-break: break-word; /* zalomí přiliš dlouhá slova */
}

/* Datum poznámky */
.note-date {
  font-size: 10px;   /* malé písmo */
  color: #aaa;       /* světle šedá */
  margin-bottom: 6px; /* mezera pod datem */
}

/* Kontejner pro tlačítka Upravit/Odebrat */
.note-actions {
  display: flex; /* tlačítka vedle sebe */
  gap: 6px;      /* mezera */
}

/* Malé tlačítko u poznámky */
.note-btn {
  font-size: 11px;        /* malé písmo */
  font-weight: 500;       /* středně tučné */
  font-family: inherit;   /* dědí font */
  padding: 3px 10px;      /* malé vnitřní odsazení */
  border: 1px solid #ddd; /* světlý rámeček */
  border-radius: 4px;     /* mírně zaoblené */
  background: white;      /* bílé pozadí */
  color: #555;            /* šedý text */
  cursor: pointer;        /* kurzor jako ruka */
  transition: all 0.15s;  /* plynulá animace */
}

/* Hover stav tlačítka */
.note-btn:hover {
  border-color: #aaa; /* tmavší rámeček */
  color: #111;        /* tmavší text */
}

/* Červené tlačítko Odebrat */
.note-btn-danger {
  color: #c62828; /* červená barva */
}

/* Hover stav červeného tlačítka */
.note-btn-danger:hover {
  border-color: #c62828;   /* červený rámeček */
  background: #fff5f5;     /* světle červené pozadí */
}

/* Tmavé tlačítko Uložit */
.note-btn-dark {
  background: #111;    /* černé pozadí */
  color: white;         /* bílý text */
  border-color: #111;   /* černý rámeček */
}

/* Hover stav tmavého tlačítka */
.note-btn-dark:hover {
  background: #333;    /* tmavě šedé pozadí */
  border-color: #333;  /* tmavě šedý rámeček */
  color: white;         /* bílý text */
}

/* Řádek pro přidání nové poznámky */
.note-add-row {
  display: flex;          /* textarea a tlačítko vedle sebe */
  gap: 8px;               /* mezera */
  align-items: flex-start; /* zarovnání na začátek */
  margin-top: 10px;       /* mezera nad řádkem */
}

/* Textarea v řádku pro přidání */
.note-add-row .notes-input {
  flex: 1; /* zabere zbytek šířky */
}

/* Tlačítko Přidat */
.note-add-row .btn {
  flex-shrink: 0;   /* nesmí se zmenšit */
  height: auto;     /* výška podle obsahu */
  padding: 8px 16px; /* vnitřní odsazení */
  align-self: flex-end; /* zarovnání ke spodku textarey */
}

/* Inline editor poznámky - skrytý ve výchozím stavu */
.note-edit {
  margin-top: 6px; /* mezera nad editorem */
}

/* ===========================================
   STATISTIKY: SEZNAM VŠECH POZNÁMEK
   =========================================== */

/* Jedna položka (hra + poznámka) */
.stat-note-item {
  padding: 12px 0;               /* odsazení nahoře a dole */
  border-bottom: 1px solid #f0f0f0; /* oddělovač */
}

/* Poslední položka bez oddělovače */
.stat-note-item:last-child {
  border-bottom: none; /* odstraní oddělovač */
}

/* Název hry nad poznámkou */
.stat-note-game {
  font-size: 12px;        /* malé písmo */
  font-weight: 600;       /* tučné */
  color: #888;            /* šedá barva */
  text-transform: uppercase; /* velká písmena */
  letter-spacing: 0.04em; /* rozšířené mezery */
  margin-bottom: 4px;     /* mezera pod názvem */
}

/* Text poznámky */
.stat-note-text {
  font-size: 14px;      /* trochu větší písmo */
  color: #222;          /* tmavý text */
  line-height: 1.5;     /* výška řádku */
  white-space: pre-wrap; /* zachová nové řádky */
  word-break: break-word; /* zalomí dlouhá slova */
  margin-bottom: 3px;   /* mezera pod textem */
}

/* Datum poznámky */
.stat-note-date {
  font-size: 11px; /* malé písmo */
  color: #bbb;     /* světle šedá */
}

/* Spodní řádek - datum vlevo, tlačítka vpravo */
.stat-note-bottom {
  display: flex;                  /* prvky vedle sebe */
  align-items: center;            /* vertikálně vycentrované */
  justify-content: space-between; /* datum vlevo, akce vpravo */
  margin-top: 6px;                /* mezera nad řádkem */
}

/* ===========================================
   RESPONZIVNÍ DESIGN
   =========================================== */

/* Tablet velký (do 1024px) */
@media (max-width: 1024px) {
  .main-layout {
    grid-template-columns: 1fr 200px; /* užší sidebar */
    gap: 16px;                        /* menší mezera */
  }

  .games-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 sloupce místo 4 */
    gap: 12px;                             /* menší mezera */
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 stat karty na řádek */
  }

  .charts-grid {
    grid-template-columns: 1fr 1fr; /* 2 grafy vedle sebe */
  }
}

/* Tablet malý (do 768px) */
@media (max-width: 768px) {
  .main-layout {
    grid-template-columns: 1fr; /* jeden sloupec */
  }

  .sidebar {
    display: none; /* sidebar se skryje */
  }

  .games-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 sloupce */
    gap: 10px;                             /* menší mezera */
  }

  .charts-grid {
    grid-template-columns: 1fr; /* grafy pod sebou */
  }

  .filters {
    flex-wrap: wrap;     /* filtry se zalamují */
    overflow-x: visible; /* zruší horizontální scroll */
  }
}

/* Mobil (do 480px) */
@media (max-width: 480px) {
  nav {
    padding: 0 12px; /* menší odsazení */
    height: 50px;    /* nižší navigace */
  }

  .nav-links {
    display: none; /* skryj navigační odkazy */
  }

  .hamburger {
    display: block; /* zobraz hamburger */
  }

  .mobile-menu {
    top: 50px; /* pod nižší navigací */
  }

  .view-toggle {
    display: none; /* skryj přepínač pohledu */
  }

  .container {
    padding: 0 12px; /* menší odsazení */
  }

  .hero {
    padding: 16px 0 12px; /* menší odsazení */
  }

  .hero h1 {
    font-size: 20px; /* menší nadpis */
  }

  .search-row {
    flex-wrap: wrap; /* pole přes celou šířku */
    gap: 6px;        /* menší mezera */
  }

  .search-wrap {
    width: 100%;  /* celá šířka */
    flex: none;   /* nezmenší se */
  }

  .search-row .btn {
    flex: 1; /* tlačítka se rozdělí rovnoměrně */
  }

  .games-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 sloupce */
    gap: 8px;                              /* menší mezera */
  }

  .card-title {
    font-size: 12px; /* menší písmo */
  }

  .card-year {
    font-size: 10px; /* menší písmo */
  }

  .card-footer {
    padding: 6px 8px; /* menší odsazení */
  }

  .tabs-row {
    overflow-x: auto; /* taby scrollují pokud se nevejdou */
  }

  .tabs {
    flex-shrink: 0; /* taby se nezmenší */
  }

  .tab {
    padding: 8px 10px; /* menší odsazení */
    font-size: 12px;   /* menší písmo */
  }

  .game-row {
    grid-template-columns: 56px 1fr auto; /* užší obrázek */
  }

  .game-row img,
  .row-thumb-placeholder {
    width: 56px; /* užší obrázek */
  }

  .row-info {
    padding: 8px 10px; /* menší odsazení */
  }

  .row-right {
    padding: 0 8px; /* menší odsazení */
    gap: 6px;       /* menší mezera */
  }

  .modal-backdrop {
    align-items: flex-end; /* modal přilepený ke spodku */
    padding: 0;            /* bez odsazení */
  }

  .modal {
    width: 100%;          /* plná šířka */
    max-width: 100%;      /* plná šířka */
    max-height: 92vh;     /* téměř celá výška okna */
    border-radius: 16px 16px 0 0; /* zaoblené jen nahoře */
  }

  .modal-header {
    padding: 14px; /* menší odsazení */
  }

  .modal-cover-img,
  .modal-cover-placeholder {
    width: 64px; /* menší obrázek */
  }

  .modal-header-info h2 {
    font-size: 15px; /* menší nadpis */
  }

  .modal-body {
    padding: 14px; /* menší odsazení */
  }

  .modal-footer {
    padding: 10px 14px; /* menší odsazení */
  }

  .status-btn {
    padding: 8px 4px; /* menší odsazení */
    font-size: 11px;  /* menší písmo */
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 karty na řádek */
    gap: 8px;                              /* menší mezera */
  }

  .stat-big {
    font-size: 22px; /* menší číslo */
  }

  .bar-row {
    grid-template-columns: 80px 1fr 22px; /* kratší popisek */
  }
}

/* ===========================================
   STRÁNKA VYDAVATELE
   =========================================== */

/* Tlačítko vydavatele v modalu - vypadá jako odkaz */
.publisher-btn {
  background: #f0f0f0;      /* světle šedé pozadí */
  border: 1px solid #ddd;   /* světlý rámeček */
  border-radius: 6px;       /* zaoblené rohy */
  padding: 6px 14px;        /* vnitřní odsazení */
  font-size: 13px;          /* velikost písma */
  font-family: inherit;     /* dědí font */
  font-weight: 500;         /* středně tučné */
  color: #111;              /* tmavý text */
  cursor: pointer;          /* kurzor jako ruka */
  transition: all 0.15s;    /* plynulá animace */
  margin-right: 6px;        /* mezera mezi vydavateli */
  margin-bottom: 4px;       /* mezera pod tlačítkem */
  display: inline-block;    /* zobrazení v řádku */
}

/* Hover stav - tmavší pozadí */
.publisher-btn:hover {
  background: #111;  /* černé pozadí */
  color: white;       /* bílý text */
  border-color: #111; /* černý rámeček */
}