/* Field Notes (M0, 26. 9. 2026).
   Strana prírodovedcovho zápisníka ležiaca na tmavom stole webu (body.noc).
   Papier je vždy papier, aj v tmavom režime; je len o odtieň tlmenejší, aby v noci neoslňoval.
   Mobil: jedna strana bez posúvania (hlava, 8 exemplárov, veta faktu, mriežka, nástroje).
   Počítač: dvojstrana, vľavo exempláre s faktami, vpravo mriežka.
   Výšku strany a veľkosť bunky nastavuje hra.js podľa okna (--fn-vyska, --bunka).

   Pozor na špecifickosť: paper.css a obsah.css majú body.noc p, body.noc.obsah h1 až h3
   a body.noc.obsah section. Preto tu všetko začína .fn-telo a nadpisy .fn-telo .fn-list,
   inak by papier dostal svetlosivý text z tmavej témy. */

.fn-telo{
  --fn-papier:#f4ecda;
  --fn-papier-2:#ece2cb;
  --fn-atrament:#2b2521;
  --fn-tlmene:#665c4d;
  --fn-linka:#d3c6a9;
  --fn-ceruzka:#a39a8c;
  --fn-akcent:#9a3a20;
  --fn-serif:"ARLing Serif",Georgia,"Times New Roman",serif;
  --fn-sans:"ARLing Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fn-pruzina:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:dark){ .fn-telo{--fn-papier:#e9dfc8;--fn-papier-2:#e0d4b8;--fn-linka:#c9bb9b} }

body.noc.fn-telo section.fn{padding:10px 12px 0}
.fn-telo .fn-list{position:relative;box-sizing:border-box;margin:0 auto;max-width:1380px;
  height:var(--fn-vyska,calc(100svh - 90px));min-height:540px;
  display:flex;flex-direction:column;
  padding:12px 12px 8px;border-radius:6px;background:var(--fn-papier);color:var(--fn-atrament);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.35)}
/* Tenký rám ako na starej tabuli. */
.fn-telo .fn-list::before{content:"";position:absolute;inset:5px;border:1px solid var(--fn-linka);border-radius:3px;pointer-events:none}
.fn-telo .fn-list > *{position:relative}
.fn-telo .fn-list p{margin:0;max-width:none;color:var(--fn-atrament)}
.fn-telo .fn-list h1::before,.fn-telo .fn-list h1::after,.fn-telo .fn-list h2::before,.fn-telo .fn-list h2::after,
.fn-telo .fn-list h3::before,.fn-telo .fn-list h3::after{content:none}

/* ── Hlava strany ─────────────────────────────────────────────────────── */
.fn-telo .fn-hlava{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:0 2px 7px;border-bottom:1px solid var(--fn-linka)}
.fn-telo .fn-hlava > div{min-width:0}
.fn-telo .fn-list .fn-oko{margin:0;max-width:none;font:600 10.5px/1.3 var(--fn-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fn-tlmene)}
.fn-telo .fn-list .fn-oko span{font:italic 400 12.5px/1.3 var(--fn-serif);letter-spacing:0;text-transform:none;margin-left:6px}
.fn-telo .fn-list .fn-titul{margin:2px 0 0;max-width:none;font:600 clamp(18px,4.8vw,26px)/1.12 var(--fn-serif);letter-spacing:-.005em;color:var(--fn-atrament);text-wrap:balance}
.fn-telo .fn-rezim{display:flex;flex:none;border:1px solid var(--fn-linka);border-radius:999px;padding:2px;background:var(--fn-papier-2)}
.fn-telo .fn-rezim button{appearance:none;border:0;background:transparent;color:var(--fn-tlmene);font:500 13px/1 var(--fn-sans);
  min-height:36px;padding:0 12px;border-radius:999px;cursor:pointer}
.fn-telo .fn-rezim button[aria-pressed="true"]{background:var(--fn-atrament);color:var(--fn-papier)}
.fn-telo .fn-rezim button:focus-visible{outline:2px solid var(--fn-akcent);outline-offset:1px}

/* ── Exempláre ────────────────────────────────────────────────────────── */
.fn-telo .fn-vzorky{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 6px}
.fn-telo .fn-vzorky li{margin:0;padding:0;min-width:0;max-width:none;border:0}
.fn-telo .fn-vzorky li::before,.fn-telo .fn-vzorky li::after{content:none}
.fn-telo .vz{display:flex;flex-direction:column;align-items:stretch;border-radius:4px}
.fn-telo .vz-tl{appearance:none;display:flex;flex-direction:column;align-items:center;width:100%;margin:0;padding:0 0 2px;border:0;border-radius:4px;
  background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.fn-telo .vz-tl:focus-visible{outline:2px solid var(--fn-akcent);outline-offset:1px}
.fn-telo .vz .kr{display:block;width:100%;height:auto;aspect-ratio:100/70;overflow:visible}
.fn-telo .vz-meno{display:inline-flex;align-items:center;gap:4px;max-width:100%;margin-top:0;
  font:600 clamp(9.5px,2.6vw,12px)/1.25 var(--fn-sans);letter-spacing:.06em;color:var(--fn-tlmene);white-space:nowrap}
/* KINGFISHER a GOLDFINCH s fajkou sa na 390 px musia zmestiť do 81 px stĺpca. */
.fn-telo .vz-meno.dlhe{letter-spacing:0}
/* GRAMOPHONE, MATTERHORN, MICROSCOPE, ACONCAGUA: s fajkou by na 390 px pretiekli (meranie šírky písma v hra.js). */
.fn-telo .vz-meno.dlhe2{font-size:clamp(8px,2.25vw,11px)}
.fn-telo .vz.najdene .vz-meno{color:var(--fn-atrament)}
/* Nájdené má aj tvar (fajka), nie len farbu. */
.fn-telo .vz.najdene .vz-meno::before{content:"";flex:none;width:7px;height:4px;margin:-3px 1px 0 0;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg)}
.fn-telo .fn-list .vz-fakt{display:none;margin:3px 0 0;font:13.5px/1.38 var(--fn-serif);color:var(--fn-atrament);text-align:left}
.fn-telo .vz-fakt i{font-style:italic}
.fn-telo .vz-fakt a,.fn-telo .fn-fakt a{font:12px/1 var(--fn-sans);color:var(--fn-tlmene);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.fn-telo .vz.ukazane .vz-tl{background:rgba(43,37,33,.06)}

/* Stavy kresby: ceruzka pred nájdením, pero sa dokreslí, lazúry sa rozlejú. */
.fn-telo .kr .kr-w,.fn-telo .kr .kr-f{opacity:0;transition:opacity .9s var(--fn-pruzina) .45s}
.fn-telo .kr .kr-p{opacity:.95;transition:opacity .7s ease .7s}
.fn-telo .kr .kr-i{opacity:0}
.fn-telo .kr .kr-i path{stroke-dasharray:1 2;stroke-dashoffset:1.02}
.fn-telo .vz.najdene .kr .kr-w,.fn-telo .vz.najdene .kr .kr-f{opacity:1}
.fn-telo .vz.najdene .kr .kr-i{opacity:1}
.fn-telo .vz.najdene .kr .kr-i path{stroke-dashoffset:0;transition:stroke-dashoffset 1.15s cubic-bezier(.45,.05,.25,1)}
.fn-telo .vz.najdene .kr .kr-p{opacity:0}
.fn-telo .vz.hned .kr .kr-w,.fn-telo .vz.hned .kr .kr-f,.fn-telo .vz.hned .kr .kr-p,.fn-telo .vz.hned .kr .kr-i path{transition:none}

/* ── Veta faktu ───────────────────────────────────────────────────────── */
.fn-telo .fn-list .fn-fakt{box-sizing:border-box;height:calc(3 * 1.33em + 4px);margin:4px 2px 2px;overflow:hidden;
  font:13.5px/1.33 var(--fn-serif);color:var(--fn-atrament)}
.fn-telo .fn-fakt b{font-weight:600}
.fn-telo .fn-fakt .tiche{color:var(--fn-tlmene);font-style:italic}

/* ── Mriežka ──────────────────────────────────────────────────────────── */
.fn-telo .fn-doska-obal{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
.fn-telo .fn-ram{position:relative;width:calc(var(--bunka,34px) * 10);height:calc(var(--bunka,34px) * 10)}
.fn-telo .fn-znacky{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fn-telo .fn-doska{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.fn-telo .fn-riadok{display:contents}
.fn-telo .fn-b{display:flex;align-items:center;justify-content:center;min-width:0;border-radius:50%;
  font:500 calc(var(--bunka,34px) * .54)/1 var(--fn-serif);color:var(--fn-atrament);-webkit-tap-highlight-color:transparent}
.fn-telo .fn-b:focus{outline:none}
.fn-telo .fn-b:focus-visible{box-shadow:inset 0 0 0 2px var(--fn-akcent)}
.fn-telo .fn-b.v-tahu{color:#000;font-weight:600}

/* Odtlačky nájdených slov: akvarelová stopa pod písmenami. */
.fn-telo .fn-odtlacok{transform-box:fill-box;transform-origin:0% 50%;animation:fn-stopa .5s var(--fn-pruzina) both}
@keyframes fn-stopa{from{transform:scaleX(.02);opacity:.2}to{transform:scaleX(1);opacity:1}}
.fn-telo .fn-tah{fill:rgba(43,37,33,.06);stroke:var(--fn-atrament);stroke-width:.045}
.fn-telo .fn-kotva{fill:none;stroke:var(--fn-atrament);stroke-width:.05;stroke-dasharray:.12 .1}
.fn-telo .fn-rada{fill:none;stroke:var(--fn-akcent);stroke-width:.05;stroke-dasharray:.14 .1}
.fn-telo .fn-chyba{animation:fn-mimo .32s ease both}
@keyframes fn-mimo{0%{opacity:1}100%{opacity:0}}

/* Písmená pod prstom: nad mriežkou, kde ich ruka nezakryje. */
.fn-telo .fn-list .fn-stopa{position:absolute;left:50%;top:0;transform:translate(-50%,calc(-100% - 2px));z-index:3;margin:0;
  padding:5px 12px;border-radius:999px;background:var(--fn-atrament);color:var(--fn-papier);
  font:600 15px/1.2 var(--fn-sans);letter-spacing:.14em;white-space:nowrap;pointer-events:none}
.fn-telo .fn-list .fn-stopa[hidden]{display:none}
.fn-telo .fn-list .fn-stopa.ano{background:#3d5a2a}
.fn-telo .fn-list .fn-stopa.nie{background:#6b6152}

/* ── Nástroje ─────────────────────────────────────────────────────────── */
.fn-telo .fn-nastroje{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.fn-telo .fn-tl{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 16px;
  border:1px solid var(--fn-linka);border-radius:999px;background:transparent;color:var(--fn-atrament);font:500 14px/1 var(--fn-sans);cursor:pointer}
.fn-telo .fn-tl:hover{border-color:var(--fn-atrament)}
.fn-telo .fn-tl:focus-visible{outline:2px solid var(--fn-akcent);outline-offset:2px}
.fn-telo .fn-tl svg{width:16px;height:16px;flex:none}
.fn-telo .fn-tl.plne{background:var(--fn-atrament);border-color:var(--fn-atrament);color:var(--fn-papier)}
.fn-telo .fn-tl[hidden]{display:none}
.fn-telo .fn-list .fn-postup{font:italic 14px/1.2 var(--fn-serif);color:var(--fn-tlmene);text-align:center}
.fn-telo .fn-list .fn-postup span{font-size:12px}

/* ── Hotová strana: plagát ────────────────────────────────────────────── */
.fn-telo .fn-koniec{display:none}
.fn-telo .fn-list.hotovo{height:auto;min-height:0}
.fn-telo .fn-list.hotovo .fn-doska-obal,.fn-telo .fn-list.hotovo .fn-nastroje,.fn-telo .fn-list.hotovo .fn-fakt{display:none}
.fn-telo .fn-list.hotovo .fn-vzorky{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;margin-top:12px}
.fn-telo .fn-list.hotovo .vz-tl{cursor:default}
.fn-telo .fn-list.hotovo .vz-fakt{display:block}
.fn-telo .fn-list.hotovo .fn-koniec{display:block;margin:16px 2px 6px;padding-top:12px;border-top:1px solid var(--fn-linka)}
.fn-telo .fn-list .fn-koniec h3{margin:0 0 4px;font:600 20px/1.2 var(--fn-serif);letter-spacing:0;color:var(--fn-atrament)}
.fn-telo .fn-list .fn-koniec p{margin:0 0 12px;font:14px/1.45 var(--fn-serif);color:var(--fn-tlmene);max-width:60ch}
.fn-telo .fn-akcie{display:flex;flex-wrap:wrap;gap:8px}
.fn-telo .fn-akcie .fn-tl{flex:1 1 auto}
.fn-telo .fn-kopia{display:block;width:100%;box-sizing:border-box;margin-top:10px;border:1px solid var(--fn-linka);border-radius:8px;background:var(--fn-papier-2);
  color:var(--fn-atrament);font:13px/1.45 var(--fn-sans);padding:8px 10px;resize:vertical}
.fn-telo .fn-kopia[hidden]{display:none}
.fn-telo .fn-list.odchod .fn-vzorky,.fn-telo .fn-list.odchod .fn-doska-obal{opacity:0;transition:opacity .35s ease}

/* Čítačka: skrytý text, ktorý sa číta. */
.fn-telo .fn-sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Počítač: dvojstrana zápisníka ────────────────────────────────────── */
@media (min-width:900px){
  body.noc.fn-telo section.fn{padding:18px 24px 0}
  .fn-telo .fn-list{display:grid;grid-template-columns:minmax(0,1fr) min(calc(var(--fn-vyska,80vh) - 110px),46%);
    grid-template-rows:auto minmax(0,1fr) auto;column-gap:36px;padding:22px 28px 16px}
  .fn-telo .fn-list.dvojstrana::after{content:"";position:absolute;top:14px;bottom:14px;left:var(--fn-hrbet,50%);border-left:1px solid var(--fn-linka);pointer-events:none}
  .fn-telo .fn-hlava{grid-column:1;grid-row:1;padding-bottom:10px}
  .fn-telo .fn-list .fn-titul{font-size:clamp(24px,2.4vw,34px)}
  .fn-telo .fn-vzorky{grid-column:1;grid-row:2 / span 2;align-content:start;gap:12px 18px;margin-top:14px}
  .fn-telo .vz-meno{font-size:12px;margin-top:2px}
  .fn-telo .fn-list .vz-fakt{display:block;min-height:calc(3 * 1.38em);font-size:13px}
  .fn-telo .vz:not(.najdene) .vz-fakt{visibility:hidden}
  .fn-telo .fn-list .fn-fakt{grid-column:2;grid-row:1;height:auto;min-height:calc(2 * 1.33em);margin:0 0 6px;align-self:end}
  .fn-telo .fn-doska-obal{grid-column:2;grid-row:2}
  .fn-telo .fn-nastroje{grid-column:2;grid-row:3}
  .fn-telo .fn-list.hotovo{display:block}
  .fn-telo .fn-list.hotovo::after{content:none}
  .fn-telo .fn-list.hotovo .fn-vzorky{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 24px}
}
@media (min-width:900px) and (max-height:700px){ .fn-telo .fn-list .vz-fakt{font-size:12px} }

@media (prefers-reduced-motion:reduce){
  .fn-telo .kr .kr-w,.fn-telo .kr .kr-f,.fn-telo .kr .kr-p{transition:opacity .15s linear}
  .fn-telo .vz.najdene .kr .kr-i path{transition:none}
  .fn-telo .fn-odtlacok{animation:none}
  .fn-telo .fn-chyba{animation:none;opacity:0}
  .fn-telo .fn-list.odchod .fn-vzorky,.fn-telo .fn-list.odchod .fn-doska-obal{transition:opacity .15s linear}
}

/* Pod stranou: pravidlá, o hre, zdroje (tmavý web, bežné štýly obsah.css). */
.fn-telo .fn-pod .wrap{max-width:72ch}
.fn-telo .fn-zdroje{margin:0 0 18px;padding-left:1.2em;font-size:14px;line-height:1.5}
.fn-telo .fn-zdroje li{margin:0 0 6px}