/* ====== KOFIG PROMĚNNÉ ====== */
:root{
  --pad-gap: 12px;                       /* mezera mezi tlačítky numpadu */
  --col-gap: calc(2 * var(--pad-gap));   /* mezera mezi sloupci = 2× pad-gap */
  --panel-w: 420px;                      /* šířka levého i pravého panelu (desktop) */
  --tile: 70px;                          /* velikost tlačítek numpadu (desktop) */
  --page-pad: 20px;                      /* vnitřní okraj main kontejneru */
}

/* velmi úzké telefony – zmenšíme dlaždice i mezery */
@media (max-width: 380px){
  :root{
    --tile: 56px;
    --pad-gap: 8px;
    --col-gap: calc(2 * var(--pad-gap));
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #eaf4ff;                   /* vlastní pozadí natahuje script z config.txt */
  background-repeat: repeat;
  background-size: 300px;
  color: #111;
  overflow-y: auto;
}

/* hlavní kontejner uprostřed stránky */
#main{
  width: 100%;
  max-width: calc(2 * var(--panel-w) + var(--col-gap) + 2 * var(--page-pad));
  margin: 0 auto;
  padding: var(--page-pad);
}

/* ====== HLAVIČKA ======
   Desktop: dva sloupce (game | sidebar), na mobilu skryjeme. */
#header-row{
  display: grid;
  grid-template-columns: 1fr;      /* přepíše se na desktopu */
  gap: 6px;
  align-items: end;
  margin-bottom: 12px;             /* o chlup blíž k panelům */
}
#title{
  margin: 0 0 -8px 0;
  font: 700 2.6rem 'Comic Sans MS','Segoe UI',cursive, sans-serif;
  color: #003366;
}
#subtitle{
  margin: 0 0 -8px 0;
  font-weight: 700;
  color: #555;
  font-size: 1.05rem;
}

/* ====== OBSAH – GRID ====== */
#content-grid{
  display: grid;
  grid-template-areas:
    "sidebar"
    "game";                 /* výchozí (mobilní) – viz níže další úpravy */
  gap: var(--col-gap);
}
#sidebar   { grid-area: sidebar; }
#game-area { grid-area: game; }

/* ====== HRA ====== */
#game-area{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#game-canvas{
  width: var(--panel-w);   /* desktop: stejná šířka jako score/topbar */
  height: clamp(580px, calc(100vh - 160px), 1040px); /* přizpůsobí výšce okna */
  background: #fff;
  border: 3px solid #88ccee;
  border-radius: 8px;
  box-shadow: 1px 1px 6px rgba(0,0,0,.15);
}

/* ====== SIDEBAR + TOPBAR ====== */
#sidebar{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: var(--panel-w);   /* desktop: aby rám score vizuálně odpovídal canvasu */
}
#topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #88ccee;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  box-shadow: 1px 1px 5px rgba(0,0,0,.1);
  width: 100%;
}
#score-wrapper{ font-weight: 700; color: #003366; }
#score-display{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.1rem;
  margin-left: 6px;
}
#menu-right{ display:flex; gap:10px; align-items:center; }
#state-button{
  cursor:pointer;
  padding:6px 14px;
  background:#baf2bb;
  border:2px solid #66cc88;
  border-radius:8px;
  font-weight:700;
  color:#003300;
  transition:background-color .2s ease;
}
#state-button:hover{ background:#a6e2a6; }
#language-flag,#menu-button{
  font-size:1.3rem; background:transparent; border:none; cursor:pointer;
}

/* ====== OVLÁDÁNÍ – NUMPAD + ŠIPKY ====== */
#controls{ display:flex; justify-content:center; }
#numpad{
  display:grid;
  grid-template-columns: repeat(4, var(--tile));
  grid-auto-rows: var(--tile);
  gap: var(--pad-gap);
  justify-content:center;
}
#numpad button{
  width: var(--tile);
  height: var(--tile);
  font-size: 1.5rem;
  border: 2px solid #ffaa00;
  border-radius: 10px;
  background: #fff5cc;
  cursor: pointer;
  transition: background-color .2s ease;
}
#numpad button:hover,
#numpad button:active{ background:#fff; }
#numpad .arrow{
  background:#ffaa00; color:#fff; font-weight:700; border:none;
}
#numpad .arrow:hover{ background:#e69500; }
#numpad .spacer{ width: var(--tile); height: var(--tile); }

/* ====== DESKTOP (?768px) – 2 sloupce, přesné zarovnání nadpisů ====== */
@media (min-width: 768px){
  #header-row{
    grid-template-columns: var(--panel-w) var(--panel-w);
    column-gap: var(--col-gap);
  }
  #content-grid{
    grid-template-columns: var(--panel-w) var(--panel-w);
    grid-template-areas: "game sidebar";
    column-gap: var(--col-gap);
    align-items: start;
  }
  /* jemná mezera pod obsahem na desktopu */
  #main{ padding-bottom: 24px; }
}

/* ====== MOBIL (<768px) – MENU › HRA › OVLÁDÁNÍ ======
   Bez změny HTML: sidebar „rozpustíme“ a jeho děti promítneme do gridu. */
@media (max-width: 767px){
  /* hlavičku na mobilu skryjeme (šetří výšku) */
  #header-row{ display: none; }

  /* bezpečná výška viewportu (Chrome lišty) */
  body { min-height: 100dvh; }

  /* z #sidebar uděláme „průchozí“ kontejner */
  #sidebar{ display: contents; width: auto; }

  /* tři řádky: topbar › game › controls */
  #content-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "game"
      "controls";
    row-gap: 16px;
    padding-bottom: max(env(safe-area-inset-bottom, 16px), 16px); /* rezerva dole */
  }

  /* přiřazení oblastí prvkům (děti sidebaru se stávají grid items) */
  #topbar   { grid-area: topbar; }
  #game-area{ grid-area: game; justify-content: stretch; }
  #controls { grid-area: controls; }

  /* canvas: přes celou šířku a výška rozumně do okna – použij svh/dvh fallbacky */
  #game-canvas{
    width: 100%;
    max-width: none;
    height: 60vh;    /* fallback */
    height: 60svh;   /* safe viewport */
    height: 60dvh;   /* dynamic viewport (nejlépe) */
    min-height: 320px;
    max-height: none;
  }
}