/* Ruština — drilování. Mobile-first, bez frameworku. */

@font-face {
  font-family: "Psaci";
  src: url("/static/fonts/MarckScript-Regular.woff2") format("woff2"),
       url("/static/fonts/MarckScript-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --pozadi: #f7f6f3;
  --plocha: #ffffff;
  --plocha2: #efeee9;
  --text: #1c1b19;
  --tlumene: #6b6862;
  --linka: #dcd9d2;
  --hlavni: #7a2e2e;
  --hlavni-text: #ffffff;
  --dobre: #2f6b45;
  --dobre-pozadi: #e5f0e8;
  --spatne: #9a3126;
  --spatne-pozadi: #f7e6e3;
  --r: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pozadi: #161513;
    --plocha: #221f1d;
    --plocha2: #2c2926;
    --text: #eeece7;
    --tlumene: #a09b93;
    --linka: #3a3633;
    --hlavni: #c4685f;
    --hlavni-text: #1a1412;
    --dobre: #7cc298;
    --dobre-pozadi: #1e3227;
    --spatne: #e08b7f;
    --spatne-pozadi: #35211e;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--pozadi);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior-y: contain;
}

.obal { max-width: 640px; margin: 0 auto; padding: 12px 14px 40px; }

h1 { font-size: 20px; margin: 0; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 22px 0 8px; color: var(--tlumene);
     text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.hlavicka { display: flex; align-items: baseline; gap: 10px; padding: 6px 0 14px; }
.hlavicka .stav { margin-left: auto; color: var(--tlumene); font-size: 13px; }

button { font: inherit; color: inherit; cursor: pointer; }

.tl {
  display: block; width: 100%; text-align: left; background: var(--plocha);
  border: 1px solid var(--linka); border-radius: var(--r);
  padding: 13px 15px; margin-bottom: 8px; transition: background .12s;
}
.tl:active { background: var(--plocha2); }
.tl .nazev { font-weight: 600; }
.tl .popis { color: var(--tlumene); font-size: 13px; margin-top: 2px; }
.tl .znak { float: right; color: var(--tlumene); font-size: 13px; font-variant-numeric: tabular-nums; }

.hlavni {
  background: var(--hlavni); color: var(--hlavni-text); border: none;
  border-radius: var(--r); padding: 14px; width: 100%; font-weight: 600; font-size: 16px;
}
.hlavni:disabled { opacity: .45; }
.druhy { background: var(--plocha); border: 1px solid var(--linka);
         border-radius: var(--r); padding: 12px; width: 100%; font-weight: 500; }

.radek { display: flex; gap: 8px; }
.radek > * { flex: 1; }

/* chipsy pro filtry */
.chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--plocha); border: 1px solid var(--linka); border-radius: 999px;
  padding: 7px 13px; font-size: 14px; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--hlavni); color: var(--hlavni-text);
                             border-color: var(--hlavni); }

/* cviceni */
.postup { display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
          color: var(--tlumene); font-size: 13px; }
.postup .cara { flex: 1; height: 3px; background: var(--linka); border-radius: 2px; overflow: hidden; }
.postup .cara i { display: block; height: 100%; background: var(--hlavni); transition: width .2s; }

.zadani {
  background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r);
  padding: 22px 16px; text-align: center; margin-bottom: 14px;
}
.zadani .velke { font-size: 40px; line-height: 1.25; font-weight: 500; word-break: break-word; }
.zadani .velke.pismeno { font-size: 64px; }
.zadani .mensi { font-size: 22px; }
.zadani .popisek { color: var(--tlumene); font-size: 13px; margin-bottom: 8px; }

.psaci { font-family: "Psaci", cursive; }
.zadani .velke.psaci { font-size: 52px; line-height: 1.35; }

.moznosti { display: grid; gap: 8px; }
.moznosti.dve { grid-template-columns: 1fr 1fr; }
.moznost {
  background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r);
  padding: 15px; font-size: 18px; text-align: center; min-height: 54px;
}
.moznost.velka { font-size: 26px; }
.moznost.dobre { background: var(--dobre-pozadi); border-color: var(--dobre); color: var(--dobre); font-weight: 600; }
.moznost.spatne { background: var(--spatne-pozadi); border-color: var(--spatne); color: var(--spatne); }
.moznost:disabled { cursor: default; }

/* slabiky u prizvuku */
.slabiky { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.slabika { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r);
           padding: 14px 18px; font-size: 26px; }
.slabika.dobre { background: var(--dobre-pozadi); border-color: var(--dobre); }
.slabika.spatne { background: var(--spatne-pozadi); border-color: var(--spatne); }

/* zvyraznena samohlaska u akani */
.zvyrazneno { color: var(--hlavni); border-bottom: 3px solid var(--hlavni); }

/* parovani */
.parovani { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.parovani .sloupec { display: grid; gap: 8px; align-content: start; }
.parovani button { background: var(--plocha); border: 1px solid var(--linka);
                   border-radius: var(--r); padding: 14px 8px; font-size: 24px; min-height: 58px; }
.parovani button.vybrano { border-color: var(--hlavni); border-width: 2px; }
.parovani button.hotovo { background: var(--dobre-pozadi); border-color: var(--dobre); opacity: .55; }
.parovani button.chyba { background: var(--spatne-pozadi); border-color: var(--spatne); }

/* volne psani */
.psani-pole {
  width: 100%; font-size: 28px; text-align: center; padding: 14px;
  border: 1px solid var(--linka); border-radius: var(--r);
  background: var(--plocha); color: var(--text); font-family: inherit;
}
.psani-pole:focus { outline: 2px solid var(--hlavni); outline-offset: -1px; }

/* ruska klavesnice */
.klavesnice { margin-top: 10px; display: grid; gap: 5px; }
.klavesnice .rada { display: grid; gap: 4px; grid-auto-flow: column; }
.klavesa {
  background: var(--plocha); border: 1px solid var(--linka); border-radius: 7px;
  padding: 11px 2px; font-size: 18px; text-align: center; min-width: 0;
}
.klavesa:active { background: var(--plocha2); }
.klavesa.zamcena { color: var(--tlumene); opacity: .5; }
.klavesa.sirsi { grid-column: span 2; }
.klavesa.prizvuk { font-size: 15px; }

/* odezva */
.odezva { margin-top: 14px; padding: 13px 15px; border-radius: var(--r); font-size: 15px; }
.odezva.dobre { background: var(--dobre-pozadi); color: var(--dobre); }
.odezva.spatne { background: var(--spatne-pozadi); color: var(--spatne); }
.odezva .nadpis { font-weight: 600; margin-bottom: 4px; }
.odezva .pozn { margin-top: 8px; padding-top: 8px; border-top: 1px solid currentColor;
                opacity: .8; font-size: 14px; }

.zvuk { background: var(--plocha); border: 1px solid var(--linka); border-radius: 999px;
        padding: 11px 20px; font-size: 15px; display: inline-flex; gap: 7px; align-items: center; }

/* tabulky a prehledy */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linka); }
th { color: var(--tlumene); font-weight: 600; font-size: 12px;
     text-transform: uppercase; letter-spacing: .05em; }
td.cislo { text-align: right; font-variant-numeric: tabular-nums; }

.karta { background: var(--plocha); border: 1px solid var(--linka);
         border-radius: var(--r); padding: 14px; margin-bottom: 8px; }
.karta .ru { font-size: 26px; }
.karta .ru-psaci { font-family: "Psaci", cursive; font-size: 30px; color: var(--tlumene); }
.karta .meta { color: var(--tlumene); font-size: 13px; margin-top: 4px; }

.tlumene { color: var(--tlumene); }
.mala { font-size: 13px; }
.stred { text-align: center; }
.mezera { height: 14px; }

.hlaska { display: inline-block; padding: 2px 8px; border-radius: 6px;
          background: var(--plocha2); font-family: ui-monospace, Menlo, monospace; }

.upozorneni { background: var(--spatne-pozadi); color: var(--spatne);
              border-radius: var(--r); padding: 12px; font-size: 14px; margin-bottom: 10px; }
.oznam { background: var(--plocha2); border-radius: var(--r); padding: 12px;
         font-size: 14px; margin-bottom: 10px; }

.pin { font-size: 30px; letter-spacing: .35em; text-align: center; padding: 14px;
       width: 100%; border: 1px solid var(--linka); border-radius: var(--r);
       background: var(--plocha); color: var(--text); }

.skryte { display: none !important; }