/* ============================================================================
   tabule.css — jediný sdílený styl pro tabuli, rám i všechny moduly.

   Pravidla, která tenhle soubor drží (viz system/JADRO.md a NAVRH.md):
   - projekce je 4:3 / 1024×768; lišta rámu 48 px, plátno modulu 1024×720
   - bílý podklad, tmavý obsah — na projektoru je bílá plný jas lampy
   - linky a rámečky TMAVÉ; světle modrá je na projektoru neviditelná
   - dotykové prvky ≥ 80 px, mezery ≥ 16 px, žádná závislost na hover
   - Andika na znaky pro děti (jednopatrové a, rozlišuje I/l/1), Baloo 2 na UI
   - CSS je ADITIVNÍ: třídy se přidávají, existující se nemění
   ========================================================================== */

@import url("fonty.css");
@import url("platno.css");

/* ---------- tokeny ---------- */
:root {
  /* barvy — ověřené na projektoru s lampou po 1300 h */
  --papir:         #FFFFFF;
  --panel:         #F4F7FC;
  --ram:           #C9D6EA;   /* rámečky karet — tmavší než "web" modrá, ať jsou vidět */
  --linka:         #8FB0D8;   /* linky v pozadí, řádky */
  --inkoust:       #16305C;
  --inkoust-2:     #4A628C;
  --inkoust-3:     #7C8CAB;
  --cil:           #E8420E;
  --cil-tlum:      #FDEDE7;
  --spravne:       #1B8A4B;
  --spravne-tlum:  #E7F5ED;
  --chyba:         #C6262E;
  --chyba-tlum:    #FBE9EA;
  --zlata:         #F0B429;
  --zlata-tlum:    #FFF6DC;

  /* geometrie */
  --lista-vyska:   48px;
  --platno-sirka:  1024px;
  --platno-vyska:  720px;
  --dotyk:         80px;      /* minimální dotykový prvek (učitelka) */
  --dotyk-deti:    110px;     /* minimální dotykový prvek pro děti (spodní zóna) */
  --mezera:        16px;
  --r:             18px;
  --r-male:        10px;
  --stin:          0 2px 0 rgba(22, 48, 92, .14);
  --stin-zvednuty: 0 6px 0 rgba(22, 48, 92, .16);

  /* písmo */
  --ui:            "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --znak:          "Andika", "Trebuchet MS", system-ui, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0; overflow: hidden;
  background: var(--papir); color: var(--inkoust);
  font-family: var(--ui); font-size: 20px; line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
body { touch-action: manipulation; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* ---------- typografie ---------- */
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.1; }
h1 { font-size: 40px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
.znak   { font-family: var(--znak); font-weight: 700; line-height: 1; }
.cislo  { font-family: var(--znak); font-weight: 700; font-variant-numeric: tabular-nums; }
.tlumene { color: var(--inkoust-3); }
.stred   { text-align: center; }

/* ---------- tlačítka ---------- */
.tlacitko {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: var(--dotyk); min-height: var(--dotyk);
  padding: 12px 28px;
  border: 3px solid var(--inkoust); border-radius: var(--r);
  background: var(--papir); color: var(--inkoust);
  font-weight: 700; font-size: 24px; line-height: 1;
  box-shadow: var(--stin);
  transition: transform .06s;
}
.tlacitko:active { transform: translateY(2px); box-shadow: none; }
.tlacitko[disabled] { opacity: .45; pointer-events: none; }
.tlacitko-hlavni  { background: var(--inkoust); color: var(--papir); }
.tlacitko-cil     { background: var(--cil); border-color: var(--cil); color: var(--papir); }
.tlacitko-spravne { background: var(--spravne); border-color: var(--spravne); color: var(--papir); }
.tlacitko-velke   { min-height: 110px; padding: 18px 44px; font-size: 34px; border-radius: 24px; }
.tlacitko-male    { min-width: 56px; min-height: 56px; padding: 6px 16px; font-size: 18px; border-width: 2px; }
.tlacitko-kulate  { width: var(--dotyk); height: var(--dotyk); padding: 0; border-radius: 50%; font-size: 34px; }
/* pro děti: spodní zóna plátna, malá ručička — větší plocha, větší písmo, tlustší rámeček */
.tlacitko-deti    { min-width: 110px; min-height: 110px; padding: 16px 32px; font-size: 40px; border-width: 4px; border-radius: 26px; }

/* přepínač = skupina tlačítek, jedno vybrané */
.prepinac { display: inline-flex; gap: 8px; }
.prepinac .tlacitko { box-shadow: none; }
.prepinac .tlacitko.vybrane { background: var(--inkoust); color: var(--papir); }

/* ---------- karty, panely, štítky ---------- */
.karta {
  background: var(--papir); border: 3px solid var(--ram); border-radius: var(--r);
  padding: var(--mezera); box-shadow: var(--stin);
}
.karta-cil     { border-color: var(--cil); background: var(--cil-tlum); }
.karta-spravne { border-color: var(--spravne); background: var(--spravne-tlum); }
.panel { background: var(--panel); border-radius: var(--r); padding: var(--mezera); }
.stitek {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--panel); color: var(--inkoust-2);
  font-size: 16px; font-weight: 700; letter-spacing: .02em;
}
.stitek-cil { background: var(--cil-tlum); color: var(--cil); }
.stitek-spravne { background: var(--spravne-tlum); color: var(--spravne); }

/* ---------- mřížka dlaždic (plocha, výběr žáka) ---------- */
.mrizka {
  display: grid; gap: var(--mezera);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.dlazdice {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 150px; padding: 14px;
  border: 3px solid var(--ram); border-radius: 22px;
  background: var(--papir); color: var(--inkoust);
  box-shadow: var(--stin); text-align: center;
  transition: transform .06s;
}
.dlazdice:active { transform: translateY(2px); box-shadow: none; }
.dlazdice .ikona { font-size: 64px; line-height: 1; }
.dlazdice .ikona img, .dlazdice .ikona svg { width: 88px; height: 88px; margin: 0 auto; }
.dlazdice .nazev { font-weight: 800; font-size: 22px; line-height: 1.1; }
.dlazdice.vybrane { border-color: var(--spravne); background: var(--spravne-tlum); }
.dlazdice.tlumena { opacity: .4; }

/* ---------- překryv (dialog přes celé plátno) ---------- */
.prekryv {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 48, 92, .55);
}
.prekryv > .karta { min-width: 420px; max-width: 860px; padding: 32px; border-color: var(--inkoust); }
.prekryv.skryte { display: none; }

/* ---------- pozadí "papír" ---------- */
.papir-radky {
  background-color: var(--papir);
  background-image: repeating-linear-gradient(to bottom, transparent 0 63px, var(--linka) 63px 65px);
}
.papir-ctverecky {
  background-color: var(--papir);
  background-image:
    repeating-linear-gradient(to right,  transparent 0 47px, var(--linka) 47px 48px),
    repeating-linear-gradient(to bottom, transparent 0 47px, var(--linka) 47px 48px);
}
/* Liniatura pro nácvik psaní — jedna "linka" = pás 150 px:
   horní pomocná (přetahy) · HLAVNÍ pás pro malá písmena (tmavé linky) · dolní pomocná ·
   mezera. Střední pás je zvýrazněný, protože do něj patří tělo písmene. */
.papir-liniatura {
  background-color: var(--papir);
  background-image:
    /* zvýraznění hlavního pásu */
    repeating-linear-gradient(to bottom,
      transparent 0 40px, rgba(143,176,216,.14) 40px 80px, transparent 80px 150px),
    /* linky */
    repeating-linear-gradient(to bottom,
      var(--linka) 0 2px,          /* horní pomocná */
      transparent 2px 40px,
      var(--inkoust-3) 40px 42px,  /* horní hlavní */
      transparent 42px 78px,
      var(--inkoust-3) 78px 80px,  /* dolní hlavní (základní linka) */
      transparent 80px 118px,
      var(--linka) 118px 120px,    /* dolní pomocná */
      transparent 120px 150px);
}

/* ---------- pomocné ---------- */
.skryte { display: none !important; }
.radek  { display: flex; align-items: center; gap: var(--mezera); }
.sloupec { display: flex; flex-direction: column; gap: var(--mezera); }
.roztahnout { flex: 1 1 auto; min-width: 0; min-height: 0; }
.vypln { padding: var(--mezera); }

/* štítek "otevřít v rámu" — jen když modul běží bez rámu */
.bez-ramu {
  position: fixed; right: 12px; bottom: 12px; z-index: 99;
  padding: 8px 14px; border-radius: 999px;
  background: var(--inkoust); color: var(--papir);
  font-size: 15px; font-weight: 700; text-decoration: none; opacity: .85;
}

/* ============================================================================
   RÁM — lišta widgetů + iframe. Používá jen jadro/ram.html.
   ========================================================================== */
.ram {
  position: absolute; top: 0; left: 0;
  width: var(--platno-sirka); height: calc(var(--platno-vyska) + var(--lista-vyska));
  transform-origin: top left;
  display: grid; grid-template-rows: var(--lista-vyska) 1fr;
  background: var(--papir);
}
.ram.cela-obrazovka { grid-template-rows: 0 1fr; }
.ram.cela-obrazovka .lista { display: none; }
.lista {
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px; height: var(--lista-vyska);
  background: var(--inkoust); color: var(--papir);
  font-size: 18px; font-weight: 700;
}
.lista .widget { display: flex; align-items: center; height: 40px; }
.lista .widget-tlacitko {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 40px; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent; color: var(--papir);
  font-size: 18px; font-weight: 700;
}
.lista .widget-tlacitko:active, .lista .widget-tlacitko.aktivni { background: rgba(255,255,255,.18); }
.lista .widget-domu .widget-tlacitko { font-size: 24px; }
.lista .widget-nazev { flex: 1 1 auto; min-width: 0; padding: 0 8px; font-size: 18px; opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista .widget-hodiny { font-family: var(--znak); font-size: 22px; font-variant-numeric: tabular-nums; padding: 0 8px; }
.ram .obsah { position: relative; overflow: hidden; background: var(--papir); }
.ram .obsah iframe { display: block; width: 100%; height: 100%; border: 0; }

/* nabídka pod widgetem (např. volba minut časovače) */
.nabidka {
  position: absolute; top: calc(var(--lista-vyska) + 6px); z-index: 60;
  display: flex; gap: 8px; padding: 10px;
  background: var(--papir); border: 3px solid var(--inkoust); border-radius: var(--r);
  box-shadow: var(--stin-zvednuty);
}
.nabidka.skryte { display: none; }
.nabidka.svisla { flex-direction: column; align-items: stretch; min-width: 260px; }
.nabidka.svisla .tlacitko { justify-content: flex-start; }
.nabidka .tlacitko.vybrane { background: var(--inkoust); color: var(--papir); border-color: var(--inkoust); }
.nabidka .tlacitko.tlumene { color: var(--inkoust-3); border-style: dashed; }
.lista .widget-plocha .widget-tlacitko { font-size: 20px; }
.lista .widget-plocha .sipka { opacity: .7; font-size: 16px; }
.lista .widget-nastroje .widget-tlacitko { font-size: 24px; }
.nabidka .tlacitko .ikona { width: 32px; text-align: center; }