/* ===== BARVY =====
   Plochy a linky se pretonuji podle motivu/akcentu uctu (/nyx-barvy.css);
   zelena a zluta zustavaji pevne, protoze nesou vyznam.
   Tmavá je výchozí, jako ve zbytku Nyxia; světlá se zapíná atributem,
   který na <html> dává /nyx-rezim.js. Světlé hodnoty jsou přesně ty,
   na kterých hra běžela dosud — ve světlém režimu se tedy nic nemění.
   Zelená a žlutá nejsou dekorace, ale význam (písmeno sedí / je jinde),
   proto se v tmavém jen ztlumí, aby na tmavém podkladu tolik nesvítily. */
:root {
  --w-bg:               color-mix(in srgb, var(--acc, #60ccfe) 4%, #121213);
  --w-tx:               #ffffff;
  --w-plocha:           color-mix(in srgb, var(--acc, #60ccfe) 6%, #1a1a1b);
  --w-cara:             color-mix(in srgb, var(--acc, #60ccfe) 16%, #3a3a3c);
  --w-cara-2:           color-mix(in srgb, var(--acc, #60ccfe) 14%, #2c2c2e);
  --w-radek-hover:      color-mix(in srgb, var(--acc, #60ccfe) 16%, #2c2c2e);
  --w-policko-hover:    color-mix(in srgb, var(--acc, #60ccfe) 16%, #2c2c2e);
  --w-klavesa:          #818384;
  --w-klavesa-hover:    #9a9b9c;
  --w-klavesa-okraj:    #6e7071;
  --w-klavesa-aktiv:    #5f6061;
  --w-klavesa-tx:       #1a1a1b;
  --w-klavesa-tx-aktiv: #1a1a1b;
  --w-spravne:          #538d4e;
  --w-spravne-h:        #456f41;
  --w-spravne-a:        #37562f;
  --w-jinde:            #b59f3b;
  --w-mimo:             #3a3a3c;
  --w-na-barve:         #ffffff;
}

html[data-mode="light"] {
  --w-bg:               color-mix(in srgb, var(--acc, #005a9e) 3%, #ffffff);
  --w-tx:               #000000;
  --w-plocha:           color-mix(in srgb, var(--acc, #005a9e) 2%, #ffffff);
  --w-cara:             color-mix(in srgb, var(--acc, #005a9e) 18%, #d3d6da);
  --w-cara-2:           color-mix(in srgb, var(--acc, #005a9e) 10%, #eeeeee);
  --w-radek-hover:      color-mix(in srgb, var(--acc, #005a9e) 16%, #c7c7c7);
  --w-policko-hover:    color-mix(in srgb, var(--acc, #005a9e) 16%, rgb(202, 202, 202));
  --w-klavesa:          #d3d6da;
  --w-klavesa-hover:    rgb(182, 181, 181);
  --w-klavesa-okraj:    rgb(150, 150, 150);
  --w-klavesa-aktiv:    rgb(129, 129, 129);
  --w-klavesa-tx:       #000000;
  --w-klavesa-tx-aktiv: #e7e7e7;
  --w-spravne:          #6aaa64;
  --w-spravne-h:        #42703e;
  --w-spravne-a:        #31532d;
  --w-jinde:            #c9b458;
  --w-mimo:             #787c7e;
  --w-na-barve:         #ffffff;
}

/* ===== ZAKLAD ===== */

body {
  font-family: Arial, sans-serif;
  background: var(--w-bg);
  color: var(--w-tx);
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
  letter-spacing: 5px;
  margin: 0 0 15px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--w-cara);
}

/* ===== OVLADANI (start + cas) ===== */

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

#start-button {
  padding: 10px 30px;
  border: none;
  background: var(--w-spravne);
  color: var(--w-na-barve);
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px;

  transition: 100ms ease-out;
}

#start-button:hover{
  background: var(--w-spravne-h);
  transform: translateY(3px);
}

#start-button:active{
  background: var(--w-spravne-a);
  transform: scale(0.98);
}

.timer {
  font-size: 24px;
  font-weight: bold;
  font-family: monospace;
}

/* ===== ROZLOZENI ===== */

.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}

/* ===== LEADERBOARD ===== */

.leaderboard {
  /* Sirka je spocitana tak, aby se vesel cely nickname a nemuselo
     se nic orezavat:
       sloupce 24 + 180 + 46 + 62 = 312
       + padding 2x15 + ramecek 2x1 = 344 */
  width: 344px;
  border: 1px solid var(--w-cara);
  padding: 15px;
  border-radius: 7px;
}

.leaderboard h2 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.leaderboard table {
  width: 100%;
  border-collapse: collapse;

  /* Bez tohohle si tabulka sirku urcuje podle obsahu a dlouhy
     nickname ji roztahne mimo ramecek. "fixed" znamena, ze plati
     sirky sloupcu nize a obsah se jim musi prizpusobit. */
  table-layout: fixed;
}

.leaderboard th {
  padding: 6px 4px;
  border-bottom: 2px solid var(--w-cara);
  font-size: 12px;
  text-align: left;
}

.leaderboard td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--w-cara-2);
  font-size: 14px;
}

.leaderboard tr{
  background: var(--w-plocha);
  transition: 100ms ease-out;
}

.leaderboard tr:hover{
  background: var(--w-radek-hover);
}

/* pevne sirky: poradi, pokusy a cas maji vzdy stejne siroky sloupec,
   zbytek mista pripadne jmenu */
.leaderboard th:nth-child(1),
.leaderboard td:nth-child(1) { width: 24px; }

.leaderboard th:nth-child(3),
.leaderboard td:nth-child(3) { width: 46px; }

.leaderboard th:nth-child(4),
.leaderboard td:nth-child(4) { width: 62px; }

/* Jmeno se neorezava - sloupec je dost siroky na cely nickname.
   overflow-wrap je jen pojistka pro extrem typu 16x "W": misto
   pretekani mimo ramecek se takovy nick zalomi na druhy radek. */
.leaderboard th:nth-child(2),
.leaderboard td:nth-child(2) {
  width: 180px;
  overflow-wrap: anywhere;
}

/* ===== LEGENDA (vpravo) ===== */

.legend {
  width: 230px;
  border: 1px solid var(--w-cara);
  padding: 15px;
  border-radius: 7px;
}

.legend h2 {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.legend h2 + table + h2 {
  margin-top: 18px;
}

.legend table {
  width: 100%;
  border-collapse: collapse;
}

.legend td {
  padding: 4px 4px;
  font-size: 13px;
  vertical-align: top;
}

.legend p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* ctverecek s barvou - stejne tridy jako policka v mrizce */
.legend-box {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--w-cara);
}

/* ===== HRA ===== */

.game {
  text-align: center;
}

/* hlaska */
.message {
  height: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  visibility: hidden;
}

.message.show {
  visibility: visible;
}

/* ===== MRIZKA 5 x 6 ===== */

/* Velikost policka je jedno cislo pro celou hru a bere ohled na sirku
   I na vysku displeje. Vyska je tu podstatna kvuli LEZATEMU telefonu:
   ten je siroky (667 px), takze zadny dotaz na sirku ho nechyti, ale
   vysoky je jen 375 px a mrizka 6x60 px se do nej nevejde.
     desktop 1280x800 -> min(60, 204, 64) = 60 px  (beze zmeny)
     telefon  375x667 -> min(60,  60, 53) = 53 px
     lezato   667x375 -> min(60, 106, 30) = 30 px
   'svh' je vyska bez prohlizecovych list, aby se nic neschovalo pod
   adresni radek; starsi prohlizece spadnou na 'vh' o radek vyse. */
:root { --tile: min(60px, 16vw, 8vh); }
@supports (height: 1svh) {
  :root { --tile: min(60px, 16vw, 8svh); }
}

.board {
  display: grid;
  grid-template-rows: repeat(6, var(--tile));
  gap: 5px;
  margin-bottom: 30px;
}

.row {
  display: grid;
  grid-template-columns: repeat(5, var(--tile));
  justify-content: center;
  gap: 5px;
}

.tile {
  border: 2px solid var(--w-cara);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--tile) * 0.5);
  font-weight: bold;
  text-transform: uppercase;
  transition: 120ms ease-in-out;
}

.tile:hover{
  background: var(--w-policko-hover);
  transform: scale(1.1);
}

/* barvy policek */
.tile.correct,
.legend-box.correct {
  background: var(--w-spravne);
  border-color: var(--w-spravne);
  color: var(--w-na-barve);
}

.tile.present,
.legend-box.present {
  background: var(--w-jinde);
  border-color: var(--w-jinde);
  color: var(--w-na-barve);
}

.tile.absent,
.legend-box.absent {
  background: var(--w-mimo);
  border-color: var(--w-mimo);
  color: var(--w-na-barve);
}

/* ===== KLAVESNICE ===== */

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}

.key {
  width: 43px;
  height: 58px;
  border: none;
  background: var(--w-klavesa);
  /* Tlačítko nedědí barvu od body, tak se určí — jinak ji v tmavém
     režimu vybere prohlížeč sám a na šedé klávese to je náhoda. */
  color: var(--w-klavesa-tx);
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 5px;
  border:0px solid var(--w-klavesa-okraj);

  transition: 100ms ease-out;
}

.key:hover{
  background: var(--w-klavesa-hover);
  transform: translateY(3px);
  border:2px solid var(--w-klavesa-okraj)
}

.key:active{
  background: var(--w-klavesa-aktiv);
  transform: scale(0.97);
  color: var(--w-klavesa-tx-aktiv);
}

.key.wide {
  width: 65px;
}

/* stejne barvy jako policka */
.key.correct {
  background: var(--w-spravne);
  color: var(--w-na-barve);
}

.key.present {
  background: var(--w-jinde);
  color: var(--w-na-barve);
}

.key.absent {
  background: var(--w-mimo);
  color: var(--w-na-barve);
}

/* ===== OKNO PO DOHRANI ===== */

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: var(--w-plocha);
  border: 1px solid var(--w-cara);
  padding: 25px;
  width: 300px;
  text-align: center;
}

.modal-box h2 {
  margin: 0 0 10px 0;
}

.modal-box p {
  margin: 0 0 20px 0;
  font-size: 14px;
}

.modal-box label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.modal-box input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid var(--w-cara);
  font-size: 15px;
  box-sizing: border-box;
}

/* tlacitka vedle sebe, at drzi na jedne rade i kdyz jsou mimo form */
.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.modal-box button {
  padding: 10px 20px;
  border: 1px solid var(--w-cara);
  background: var(--w-plocha);
  font-size: 14px;
  cursor: pointer;
}

.modal-box #save-button {
  background: var(--w-spravne);
  border-color: var(--w-spravne);
  color: var(--w-na-barve);
}

/* ===== MOBIL =====
   Na telefonu se hra rozjizdela do strany: klavesnice ma deset klaves
   po 43 px + mezery = 484 px, coz je o 109 px vic, nez ma iPhone
   sirku. Leaderboard vedle hry to jeste zhorsoval.

   Klavesy proto prestanou mit pevnou sirku a rozdeli si radek mezi
   sebe. Policka se meri z vyska displeje pres vw, aby mrizka zustala
   ctvercova i na uzkem telefonu. */

/* ------------------------------------------------------------------
   POD SEBE UZ OD 920 px, NE AZ OD 620.
   Desktopove rozlozeni vedle sebe potrebuje: zebricek 344 + mezera 40
   + hra 484 = 868 px, plus okraje body 2x20 = 908. Pod tim to preteka.
   Zmereno pred opravou: na tabletu 768 px melo telo 873 px a ven lezel
   21 prvek (legend, h2, tabulka zebricku); na lezato 667x375 taky.
   ------------------------------------------------------------------ */
@media (max-width: 919px) {
  .container {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .leaderboard {
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    order: 2;          /* nejdriv hra, zebricek az pod ni */
  }

  .game { order: 1; width: 100%; max-width: 100%; }

  /* .legend nemela zadny 'order', takze s vychozi nulou vylezla PRED hru:
     na telefonu se nejdriv zobrazila legenda barev a k mrizce se muselo
     scrollovat. Zmereno: klavesnice koncila az na 1120 px pri displeji
     vysokem 667 px. Poradi je proto vyslovne hra -> zebricek -> legenda. */
  .legend {
    order: 3;
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
  }

  /* tabulka se nesmi roztahovat podle obsahu uzsi nez jeji pevne sloupce */
  .leaderboard table { table-layout: fixed; }
}

@media (max-width: 620px) {
  /* 5 sloupcu + 4 mezery po 5 px se musi vejit do sirky displeje
     minus okraje; 17vw na policko vychazi na 375 px na 64 px. */
  /* Velikost policek resi --tile nahore. Tady se jen skrtaji ozdoby:
     na 375x667 zabiraly nadpis + ovladani + hlaska 143 px, coz je pres
     petinu displeje, a mrizka s klavesnici se pak nevesly zaroven. */
  body { padding: 12px; }
  h1 { font-size: 18px; margin: 2px 0 6px; }
  .controls { margin-bottom: 10px; }
  .message { margin-bottom: 6px; }
  .board { margin-bottom: 12px; }

  .keyboard-row {
    gap: 4px;
    padding: 0 4px;
  }
  .key {
    width: auto;
    flex: 1 1 0;
    min-width: 0;     /* bez tohohle flex nedovoli klavese zuzit se */
    height: 52px;
    font-size: 13px;
    padding: 0;
  }
  .key.wide { flex: 1.6 1 0; }
}

/* Uzke telefony (SE, starsi Androidy) */
@media (max-width: 360px) {
  .key { height: 46px; font-size: 12px; }
  .keyboard-row { gap: 3px; }
  /* ENTER a SMAZAT jsou dlouhe napisy v uzke klavese -- na 320 px
     doraz text az na okraj, tak dostanou mensi pismo nez pismenka. */
  .key.wide { font-size: 10px; }
}

/* ==================================================================
   DOTYK A MALE OBRAZOVKY  (N2, 2026-08-27)
   Merene pred opravou pres iframy presnych rozmeru:
     320 / 375 / 390 / 412 px  ... rozlozeni OK, ale stranka 1301 px
                                   vysoka -> mrizka a klavesnice nebyly
                                   videt zaroven
     768 px (tablet)          ... telo 873 px, 21 prvku pretekalo ven
     667x375 (lezato)         ... telo 815 px, totez
   ================================================================== */

/* iOS Safari SAM PRIBLIZI stranku, kdyz uzivatel klikne do pole
   s pismem mensim nez 16 px. Po vyhre se zadava nickname, takze
   se hra po odeslani skore ocitla priblizena a rozhozena. */
.modal-box input { font-size: 16px; }

/* Legenda ma pevnych 230 px; na uzkem displeji nesmi cnit ven. */
.legend { max-width: 100%; box-sizing: border-box; }

/* Bez tohohle ceka prohlizec na telefonu ~300 ms, jestli neprijde
   druhy tap (zoom). Psani na klavesnici pak pusobi jako ze zadrhava. */
.key,
#start-button,
.modal-buttons button {
  touch-action: manipulation;
}

.key {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;      /* dlouhy tap jinak oznaci pismeno na klavese */
}

/* Na dotyku neexistuje "odjeti mysi", takze :hover po tapnuti ZUSTANE
   viset. Zvetsene policko a zesvetlena klavesa pak matou -- vypadaji
   jako vybrane. Na dotykovych zarizenich se proto hover nekona. */
@media (hover: none) {
  .tile:hover        { background: transparent; transform: none; }
  .key:hover         { background: var(--w-klavesa); }
  .leaderboard tr:hover { background: transparent; }
}

/* Lezato na telefonu: vysky je min nez 500 px, tak dolu se vsemi
   svislymi rezervami. Velikost policek uz hlida clamp na 'svh' vyse. */
/* Lezaty telefon je siroky, ale nizky (typicky 667x375). Pod sebou se
   mrizka (191 px) a klavesnice (182 px) nevejdou uz jen samy o sobe,
   natoz s nadpisem a ovladanim -- merenim vychazel presah 151 px.
   Vodorovne je naopak mista dost, tak jdou vedle sebe. */
@media (max-height: 500px) and (orientation: landscape) {
  body { padding: 8px; }
  h1 { font-size: 18px; margin: 4px 0; }
  .controls { gap: 10px; margin-bottom: 6px; }

  .game {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
  .message  { flex: 1 0 100%; }   /* hlaska drzi vlastni radek nad obojim */
  .board    { margin-bottom: 0; }

  /* Klavesnice ma pevne klavesy (43 px), takze jeji min-content je 484 px
     a flexbox ji pod to nepusti -- proto se drive zalomila pod mrizku
     misto vedle ni. Klavesy tu proto dostanou stejnou volnost jako na
     telefonu a 'min-width: 0' dovoli cely blok zuzit. */
  .keyboard { flex: 1 1 360px; min-width: 0; max-width: 100%; }
  .keyboard-row { gap: 4px; padding: 0 4px; margin-bottom: 4px; }
  .key {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    font-size: 12px;
    padding: 0;
  }
  .key.wide { flex: 1.6 1 0; }
}

/* ==================================================================
   DOMĚŘENO 18. 10. 2026 — dvě místa, kde to pořád přetékalo
   ================================================================== */

/* 320 px: nápis na široké klávese (ENTER / SMAZAT) byl 55 px v klávese
   široké 45 px. Text nepřetekl viditelně, ale protáhl oblast posuvu —
   stránka měla 326 px místo 320 a dala se posouvat do strany. */
@media (max-width: 360px) {
  .key { overflow: hidden; }
  .key.wide { font-size: 9px; letter-spacing: -0.2px; }
}

/* 1024 px: vedle sebe stojí žebříček 344 + hra + legenda 230 a mezery
   40 px. Zalomení bylo až pod 920 px, takže na 1024 ležela legenda
   45 px za pravým okrajem (měřeno: tělo 1065 px). Panely teď smějí
   zúžit a zalomit se — na širokém monitoru zůstává jedna řada. */
.container { flex-wrap: wrap; }
.leaderboard { flex: 0 1 344px; min-width: 0; box-sizing: border-box; }
.legend { flex: 0 1 230px; min-width: 0; box-sizing: border-box; }
.game { flex: 1 1 360px; min-width: 0; }


/* Doměřeno podruhé: `Smazat` na 320 px pořád vycházelo 54 px do klávesy
   široké 45 a popisek se ořezával — pravidlo výš prohrávalo s něčím
   obecnějším, tak dostává `html body` a `!important`. Žebříček na 1024
   chtěl 359 px do 342, takže si tabulku posouvá sám místo aby čouhala. */
@media (max-width: 360px) {
  html body .key.wide { font-size: 9px !important; letter-spacing: -0.2px !important; }
}
.leaderboard { overflow-x: auto; }