/* ==========================================================================
   PRINTIS · printis.eu — JEDNA OBRAZOVKA, ŽÁDNÝ SCROLL.
   Celá stránka je vysoká přesně 100svh a scroll je vypnutý. Obsah se nepřidává
   dolů, ale přepíná v panelech. Každý panel se proto musí vejít sám o sobě —
   typografie i mezery jsou proto v clamp()/vh, ne ve fixních pixelech.
   ========================================================================== */

:root{
  --ink:#0E120D;
  --paper:#F2EDE3;
  --paper-2:#E7DFD1;
  --green:#1F3D2B;
  --brass:#C8A24A;
  --clay:#8E3B22;
  --line:rgba(14,18,13,.16);
  --line-lt:rgba(242,237,227,.18);
  --r:4px;
  --bar:clamp(46px,6vh,58px);
  --rail:clamp(34px,4.4vh,44px);
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  overflow:hidden;                 /* žádný scroll — operátorovo zadání */
  overscroll-behavior:none;
}
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:clamp(14px,1.6vh,17px);
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2{margin:0;font-family:'Eczar',Georgia,serif;font-weight:800;line-height:1.03;letter-spacing:-.018em}
p{margin:0}

.mono{
  font-family:'Fragment Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(9.5px,1.25vh,11.5px);
  letter-spacing:.15em;
  text-transform:uppercase;
  line-height:1.5;
}
.accent{color:var(--brass)}

/* ---------- společné pozadí ---------- */
.stageset{position:fixed;inset:0;z-index:0}
.stageset img{width:100%;height:100%;object-fit:cover;object-position:center 36%}
.veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,18,13,.82) 0%,rgba(14,18,13,.62) 40%,rgba(14,18,13,.93) 100%),
    linear-gradient(96deg,rgba(14,18,13,.8) 0%,rgba(14,18,13,.25) 70%);
}
.grain{
  position:absolute;inset:0;
  background-image:url('img/grain.png');
  opacity:.15;mix-blend-mode:overlay;pointer-events:none;
}

/* ---------- kostra ---------- */
.app{
  position:relative;z-index:2;
  height:100svh;
  display:grid;
  grid-template-rows:var(--bar) 1fr var(--rail);
}

/* ---------- tlačítka ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:'Fragment Mono',monospace;
  font-size:clamp(10px,1.32vh,12px);letter-spacing:.13em;text-transform:uppercase;
  padding:clamp(10px,1.5vh,15px) clamp(16px,2.2vw,26px);
  border:1px solid currentColor;border-radius:var(--r);
  text-decoration:none;
  transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease;
}
.btn-solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-solid:hover{background:var(--brass);border-color:var(--brass);transform:translateY(-2px)}
.btn-ghost{color:rgba(242,237,227,.82);border-color:var(--line-lt)}
.btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-big{padding:clamp(13px,1.9vh,18px) clamp(20px,2.6vw,32px)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(14px,2.4vh,28px)}
.row-c{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------- 18+ brána ---------- */
.gate{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;padding:24px}
.gate[hidden]{display:none}
.gate-card{max-width:520px;text-align:center}
.gate-kicker{color:var(--brass);margin-bottom:clamp(14px,3vh,26px)}
.gate-num{font-family:'Eczar',serif;font-weight:800;font-size:clamp(56px,14vh,112px);line-height:1}
.gate-lead{margin:clamp(12px,2vh,18px) 0 clamp(18px,3.4vh,30px);color:rgba(242,237,227,.76)}

/* ---------- lišty ---------- */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 clamp(16px,3.4vw,38px);
  border-bottom:1px solid var(--line-lt);
  background:rgba(14,18,13,.55);
  backdrop-filter:blur(8px);
}
.bar-mark{display:flex;align-items:baseline;gap:8px;padding:0}
.bar-mark-name{font-family:'Eczar',serif;font-weight:800;font-size:clamp(16px,2.4vh,21px);letter-spacing:.02em}
.bar-mark-sub{color:var(--brass)}
.bar-nav{display:flex;gap:clamp(12px,2vw,26px)}
.bar-nav button{opacity:.68;transition:opacity .2s ease,color .2s ease;padding:6px 0}
.bar-nav button:hover{opacity:1}
.bar-nav button.is-cur{opacity:1;color:var(--brass)}
.bar-wa{text-decoration:none;color:var(--brass);white-space:nowrap}

.rail{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 clamp(16px,3.4vw,38px);
  border-top:1px solid var(--line-lt);
  background:rgba(14,18,13,.55);
  color:rgba(242,237,227,.42);
}
.rail-r{display:flex;align-items:center;gap:clamp(12px,2vw,22px)}
.rail a,.rail button{color:rgba(242,237,227,.6);text-decoration:none;padding:0}
.rail a:hover,.rail button:hover{color:var(--brass)}

/* ---------- panely ---------- */
.deck{position:relative;overflow:hidden}
/* POJISTKA: panel se scrolluje, jen když se do něj obsah NEVEJDE. Když se vejde
   (normální stav), není co scrollovat a stránka je pořád jedna obrazovka.
   `overflow:hidden` tu bylo dřív a uvěznilo odesílací tlačítko formuláře pod
   hranou telefonu — návštěvník se k němu nedostal vůbec. Jedna obrazovka nikdy
   nesmí znamenat nedosažitelný obsah. */
.panel{
  position:absolute;inset:0;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .4s ease,transform .4s ease,visibility .4s;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.panel::-webkit-scrollbar{display:none}
.panel.is-on{opacity:1;visibility:visible;transform:none}
.pad{
  width:min(100% - clamp(28px,6vw,72px),1180px);
  max-height:100%;
  padding:clamp(14px,2.6vh,34px) 0;
}
.kicker{color:var(--brass);margin-bottom:clamp(10px,1.8vh,18px)}
.panel-h{font-size:clamp(24px,4.4vh,46px);font-weight:700}

/* ==========================================================================
   ÚVOD = SCÉNA, NE PLAKÁT
   Vlevo se věta skládá řádek po řádku, vpravo terminál skutečně NĚCO UDĚLÁ:
   projede větev skenem, označí list a stonek a orazítkuje tři čísla z COA.
   Choreografie trvá ~4,5 s, pak sken žije dál. Žádný fade celého bloku ani
   pomalý pan přes fotku — to je plakát, ne scéna.
   ========================================================================== */
.intro{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:center;
  gap:clamp(18px,3.4vw,54px);
}
.intro-h{font-size:clamp(30px,7.4vh,74px);letter-spacing:-.022em}
/* Řádek je maska, kurzíva uvnitř je to, co se zpod ní vysune. Proto <i> —
   bez vnitřního prvku není co posouvat a zbyl by jen fade. */
.intro-h span{display:block;overflow:hidden;padding-bottom:.04em}
.intro-h i{display:block;font-style:inherit;transform:translateY(105%);animation:lineUp .82s cubic-bezier(.16,.84,.3,1) forwards}
.intro-h span:nth-child(1) i{animation-delay:.20s}
.intro-h span:nth-child(2) i{animation-delay:.34s}
.intro-h span:nth-child(3) i{animation-delay:.48s}
@keyframes lineUp{to{transform:none}}
.ind-1{padding-left:.09em}
.ind-2{padding-left:.18em;font-style:italic}
.intro-sub{
  max-width:46ch;margin-top:clamp(10px,2vh,22px);
  color:rgba(242,237,227,.78);font-size:clamp(13.5px,1.75vh,18px);
}
.intro-fine{margin-top:clamp(12px,2.2vh,22px);color:rgba(242,237,227,.46)}
.intro-copy .row,.intro-fine{opacity:0;animation:riseIn .7s ease forwards .95s}
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- terminál s reálnou větví ---------- */
.spec{
  margin:0;position:relative;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:linear-gradient(180deg,#F2EDE3,#DCD3C2);
  border:1px solid rgba(14,18,13,.5);
  border-radius:clamp(6px,1vh,10px);
  padding:clamp(7px,1.1vh,11px);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.7);
  /* Rám se OTEVŘE, ne objeví — bez toho by první vteřina byla statická. */
  clip-path:inset(0 0 100% 0);animation:frameOpen .68s cubic-bezier(.2,.8,.25,1) forwards .1s;
}
@keyframes frameOpen{to{clip-path:inset(0 0 0 0)}}
.spec-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  color:rgba(14,18,13,.55);padding:0 2px clamp(6px,.9vh,9px);
}
.spec-top b{color:var(--green);letter-spacing:.22em}
.spec-eye{
  position:relative;display:block;overflow:hidden;min-height:0;
  background:#0A0F0A;border-radius:2px;
}
.spec-eye img{width:100%;height:100%;object-fit:cover;object-position:52% 46%}
/* Sken je jediný pohyb přes fotku — a je to pohyb PŘÍSTROJE, ne kamery. */
.spec-scan{
  position:absolute;left:0;right:0;top:0;height:22%;pointer-events:none;
  background:linear-gradient(180deg,rgba(200,162,74,0),rgba(200,162,74,.16) 62%,rgba(242,237,227,.7) 96%,rgba(200,162,74,0));
  animation:specScan 3.6s cubic-bezier(.5,0,.5,1) infinite .55s;
}
@keyframes specScan{0%{transform:translateY(-110%)}60%,100%{transform:translateY(460%)}}
/* Značky nedosedají fadem — cvaknou (z 1.35 na 1), jak to dělá měřicí přístroj. */
.spec-tag{
  position:absolute;z-index:2;
  padding:4px 8px;color:var(--paper);white-space:nowrap;
  background:rgba(10,15,10,.72);border:1px solid currentColor;
  opacity:0;transform:scale(1.35);
  animation:tagSnap .34s cubic-bezier(.2,1.5,.4,1) forwards;
}
.spec-tag::before{
  content:"";position:absolute;left:-1px;top:-1px;width:9px;height:9px;
  border-left:2px solid currentColor;border-top:2px solid currentColor;
}
.spec-tag::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
}
@keyframes tagSnap{to{opacity:1;transform:none}}
/* Terče musí sedět na tom, CO označují — jinak přístroj lže. Levý na velkém
   listu, pravý na červeném řapíku u ruky, kde větev drží. */
.tag-leaf{left:10%;top:36%;color:var(--brass);animation-delay:1.45s}
.tag-stem{left:30%;bottom:24%;color:#E0785A;animation-delay:2.25s}
.spec-read{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:clamp(6px,.9vh,9px);background:rgba(14,18,13,.16);
}
.spec-read span{
  display:flex;flex-direction:column;gap:2px;
  padding:clamp(6px,.9vh,9px) clamp(6px,.7vw,10px);
  background:#F2EDE3;color:rgba(14,18,13,.5);font-size:clamp(8px,1vh,9.5px);letter-spacing:.1em;
  /* Čísla se orazítkují jedno po druhém — v tom je „něco se stalo". */
  opacity:0;transform:translateY(8px);animation:stamp .3s ease forwards;
}
.spec-read span:nth-child(1){animation-delay:3.00s}
.spec-read span:nth-child(2){animation-delay:3.28s}
.spec-read span:nth-child(3){animation-delay:3.56s}
@keyframes stamp{to{opacity:1;transform:none}}
.spec-read b{color:var(--green);font-size:clamp(10.5px,1.4vh,13px);letter-spacing:.06em}

/* ==========================================================================
   HRA = FYZICKÝ PŘÍSTROJ
   Krémový plast, mosazný štítek, prosvícená obrazovka. Vyplní panel a sám
   nescrolluje — proto je celé tělo grid `auto 1fr auto` a obrazovka bere zbytek.
   ========================================================================== */
.game{
  /* Musí zůstat čitelně PŘÍSTROJ, ne monitor — proto úzké tělo i na velkém
     displeji. Zároveň se listy nerozejdou tak daleko, aby hraní byl běh myší. */
  width:min(100% - clamp(20px,4vw,56px),860px);
  /* Strop výšky drží poměr blíž k ležatému přístroji. Bez něj se na vysokém
     okně roztáhne do sloupce a čte jako monitor na zdi, ne jako věc v ruce. */
  height:min(calc(100% - clamp(14px,2.6vh,30px)),640px);
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(9px,1.5vh,18px);
  border-radius:clamp(10px,1.6vh,18px);
  /* Skořepina: shora světlo, dolů stín — tělo má objem, ne jen barvu. */
  background:
    linear-gradient(178deg,#F6F2E8 0%,#E4DBCA 48%,#CFC4B0 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -3px 0 rgba(14,18,13,.22),
    0 30px 70px -30px rgba(0,0,0,.85);
  border:1px solid rgba(14,18,13,.3);
  overflow:hidden;
}
/* Horní hrana — mosazný štítek, model, nalepený lot. */
.dev-top{
  display:flex;align-items:center;gap:clamp(8px,1.4vw,16px);
  padding:0 clamp(4px,.9vw,10px) clamp(7px,1.2vh,12px);
}
.plate{
  font-family:'Eczar',serif;font-weight:800;letter-spacing:.1em;
  font-size:clamp(12px,1.9vh,17px);color:#4A3712;
  padding:4px clamp(8px,1.1vw,13px);border-radius:2px;
  background:linear-gradient(160deg,#E4C97E,#C8A24A 46%,#9B7A2E);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(14,18,13,.45);
}
.dev-model{color:rgba(14,18,13,.42);flex:1}
.sticker{
  color:#5C2416;background:#F0E4D2;
  padding:4px 10px;border:1px solid rgba(142,59,34,.35);border-radius:1px;
  transform:rotate(-.6deg);                  /* nalepeno rukou, ne vysázeno */
  box-shadow:0 1px 2px rgba(14,18,13,.25);
  white-space:nowrap;
}
.sticker b{color:var(--clay)}

/* Obrazovka v mosazném rámečku. */
.screen{
  position:relative;
  display:grid;grid-template-rows:auto 1fr;
  min-height:0;                              /* jinak grid pustí obsah přes okraj */
  border-radius:clamp(5px,.8vh,9px);
  padding:2px;
  background:linear-gradient(160deg,#C8A24A,#7E6427);
  box-shadow:
    inset 0 2px 5px rgba(14,18,13,.55),
    0 1px 0 rgba(255,255,255,.5);
  overflow:hidden;
}
.game-hud{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:clamp(6px,1.1vh,11px) clamp(10px,1.6vw,18px);
  background:#0A0E09;
  border-radius:clamp(4px,.6vh,7px) clamp(4px,.6vh,7px) 0 0;
  border-bottom:1px solid rgba(200,162,74,.28);
  color:rgba(200,162,74,.55);
}
.game-hud b{color:var(--brass)}
.hud-good{color:#6FCB86 !important}
.hud-bad{color:#E08A63 !important}
/* Živá sleva. Dokud byla vidět až po běhu, hrálo se o nic — žebřík dole byl
   jen obrázek. Teď se hodnota mění pod rukama a je vidět, kdy přeskočí příčku. */
.hud-earn{display:flex;align-items:center;gap:6px}
.hud-pct{
  display:inline-block;min-width:5.4ch;text-align:center;
  padding:2px 7px;border:1px solid rgba(200,162,74,.3);
  color:rgba(200,162,74,.45) !important;
}
.hud-pct.is-live{
  background:var(--clay);border-color:var(--clay);color:var(--paper) !important;
  animation:pctBump .28s ease;
}
@keyframes pctBump{40%{transform:scale(1.16)}}

/* Odpad má mít jméno. „Nech to propadnout" je pravidlo, které se musí dát
   přečíst z obrazovky, ne jen z odstavce nad hrou. */
.chute{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:5px 0 6px;text-align:center;
  color:rgba(224,138,99,.75);font-size:clamp(7.5px,.95vh,9.5px);
  opacity:0;transition:opacity .3s ease;
}
.game-stage.is-run .chute{opacity:1}

/* Zpětná vazba U PRSTU. Čísla nahoře v HUDu při hraní nikdo nečte, takže se
   hráč bez tohohle za 40 s nenaučí, co se vyplácí. */
.fall-pop{
  position:absolute;z-index:5;pointer-events:none;
  font-family:'Fragment Mono',ui-monospace,monospace;
  font-size:clamp(12px,1.7vh,16px);letter-spacing:.06em;
  text-shadow:0 2px 10px rgba(0,0,0,.95);
  animation:popUp .7s cubic-bezier(.2,.9,.3,1) forwards;
}
.fall-pop.is-good{color:#8BE3A2}
.fall-pop.is-ok{color:rgba(200,162,74,.9)}
.fall-pop.is-bad{color:#F09A72}
@keyframes popUp{
  0%{opacity:0;transform:translate(-50%,10px) scale(.8)}
  22%{opacity:1;transform:translate(-50%,-6px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-52px) scale(1)}
}
.fall-pop.is-banner{
  left:50%;top:34%;
  font-size:clamp(13px,2vh,19px);letter-spacing:.18em;
  padding:6px 14px;background:rgba(10,15,10,.8);border:1px solid currentColor;
  animation:bannerIn .9s ease forwards;
}
.fall-pop.is-banner.is-warn{color:var(--brass)}
@keyframes bannerIn{
  0%{opacity:0;transform:translate(-50%,0) scale(1.3)}
  18%,72%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-14px) scale(1)}
}

/* Chyba a série se musí dát cítit periferním viděním — oko je při hraní
   u padajícího kusu, ne u čísel. */
.game-stage.is-wrong::after{box-shadow:inset 0 0 0 3px rgba(224,90,50,.85)}
.game-stage.is-streak::after{box-shadow:inset 0 0 0 3px rgba(200,162,74,.8)}
/* Uvnitř obrazovky je SKUTEČNÝ háj té rodiny (jr-trees.jpg), ne kreslené
   pozadí — ztlumený tak, aby padající kusy zůstaly čitelné. Odtud ty listy
   padají; proto tam ta fotka je. */
.game-stage{
  position:relative;overflow:hidden;min-height:0;
  border-radius:0 0 clamp(4px,.6vh,7px) clamp(4px,.6vh,7px);
  background:#060A06;
  cursor:crosshair;touch-action:manipulation;user-select:none;
}
/* Háj je POZADÍ, ne motiv: rozostřený a ztlumený. Ostrá fotka si s padajícími
   kusy konkuruje o oko a hráč pak listy nevidí — proto blur na vlastní vrstvě,
   ne filtr na celé desce (ten by rozmazal i hru). */
.game-stage::before{
  content:"";position:absolute;inset:-8px;z-index:0;pointer-events:none;
  background:url('img/jr-trees.jpg') center 22% / cover no-repeat;
  filter:blur(3px) saturate(.72) brightness(.6);
}
/* Ztmavení nad fotkou (kontrast pro listy) a v posledním pruhu koš — bez dna
   nemá „nech to propadnout" kam. Obojí je JEDNA vrstva: dvě ::after na stejném
   prvku se navzájem přepíšou, ne poskládají. */
.game-stage::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  transition:box-shadow .14s ease;
  background:
    linear-gradient(180deg,
      rgba(6,10,6,.42) 0%,
      rgba(6,10,6,.55) 58%,
      rgba(6,10,6,.9) 92%,
      rgba(6,10,6,.97) 100%),
    radial-gradient(120% 78% at 50% 4%,rgba(46,90,62,.34),rgba(6,10,6,0) 66%);
  border-bottom:2px solid rgba(200,162,74,.4);
}
.fall{z-index:2}
/* Řádkování CRT + odlesk skla. Nesmí brát kliknutí — hráč míří na listy. */
.scan{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 42%),
    repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:overlay;
}

/* Spodní deska přístroje — žebřík známek je na ní potištěný, ne nalepený. */
.dev-deck{
  position:relative;
  padding:clamp(7px,1.2vh,12px) clamp(4px,.9vw,10px) 0;
}
.screws{
  position:absolute;left:clamp(6px,1vw,12px);right:clamp(6px,1vw,12px);bottom:2px;height:6px;
  background:
    radial-gradient(circle at left center,rgba(14,18,13,.45) 0 2.5px,transparent 3px),
    radial-gradient(circle at right center,rgba(14,18,13,.45) 0 2.5px,transparent 3px);
  background-repeat:no-repeat;
}
.game-msg{
  position:absolute;inset:0;z-index:5;
  display:grid;place-content:center;justify-items:center;gap:clamp(9px,1.7vh,17px);
  text-align:center;padding:clamp(16px,3vh,30px);
  background:rgba(14,18,13,.88);
}
.game-msg[hidden]{display:none}
.game-msg h2{font-size:clamp(21px,4vh,40px)}
.game-msg p{color:rgba(242,237,227,.74);max-width:46ch}
.game-grade{font-family:'Eczar',serif;font-weight:800;font-size:clamp(46px,11vh,92px);line-height:1;color:var(--brass)}

/* Padající kus. Tvary jsou CSS, ne glyfy — emoji se na každé platformě kreslí
   jinak a hráč musí list od stonku poznat na první pohled, všude stejně. */
.fall{
  position:absolute;top:0;left:0;width:54px;height:54px;
  display:grid;place-items:center;
  will-change:transform;
  -webkit-tap-highlight-color:transparent;
}
.fall::before{content:"";display:block}
/* Kus musí být čitelný i tam, kde je za ním světlejší list háje — proto světlejší
   zeleň než pozadí a tvrdý stín pod ní, ne jen mosazný obrys. */
.fall-leaf::before{
  width:44px;height:44px;border-radius:0 62% 0 62%;
  background:linear-gradient(140deg,#7FCF92,#2C6642);
  box-shadow:
    0 0 0 1.5px rgba(200,162,74,.8),
    0 0 14px -2px rgba(0,0,0,.9),
    0 8px 22px -10px rgba(0,0,0,.95);
}
/* Špičky listu jsou v rozích vlevo-nahoře a vpravo-dole (border-radius výše),
   takže žilka musí být otočená −45°. Při +45° běžela NAPŘÍČ listem a tvar se
   četl jako placka, ne jako list. */
.fall-leaf::after{           /* středová žilka — čitelný „to je list" signál */
  content:"";position:absolute;width:2px;height:30px;
  background:rgba(200,162,74,.75);transform:rotate(-45deg);border-radius:2px;
}
.fall-stem::before{
  width:11px;height:46px;border-radius:6px;
  background:linear-gradient(180deg,#D2673E,#7A2F19);
  box-shadow:
    0 0 0 1.5px rgba(242,237,227,.45),
    0 0 14px -2px rgba(0,0,0,.9),
    0 8px 22px -10px rgba(0,0,0,.95);
}
.fall.is-gone{transition:transform .16s ease,opacity .16s ease;opacity:0}
.fall.is-hit::before{transform:scale(1.5)}

/* Potisk na desce přístroje — tmavé na krémovém, ne obrácený panel. */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(4px,.7vw,9px)}
.ladder div{
  display:flex;align-items:baseline;gap:8px;
  padding:clamp(5px,.9vh,10px) clamp(7px,1vw,13px);
  border:1px solid rgba(14,18,13,.24);border-radius:3px;
  background:rgba(14,18,13,.05);
  transition:background .25s ease,border-color .25s ease;
}
.ladder b{
  font-family:'Eczar',serif;font-weight:800;line-height:1;
  font-size:clamp(14px,2.2vh,22px);color:var(--green);
}
.ladder span{color:rgba(14,18,13,.55)}
.ladder .is-hit{background:var(--green);border-color:var(--green)}
.ladder .is-hit b{color:var(--brass)}
.ladder .is-hit span{color:rgba(242,237,227,.9)}
/* Příčka, na které hráč PRÁVĚ TEĎ stojí. Bez ní je žebřík během běhu mrtvý
   a hráč zjistí až po čtyřiceti vteřinách, o co vlastně hrál. */
.ladder .is-now{border-color:var(--clay);box-shadow:inset 0 0 0 2px var(--clay)}
.ladder .is-now b{color:var(--clay)}

/* ==========================================================================
   SBĚR E-MAILŮ
   ========================================================================== */
.claim{display:grid;grid-template-columns:1fr .92fr;gap:clamp(22px,4vw,64px);align-items:center}
.what{list-style:none;padding:0;margin:clamp(14px,2.4vh,26px) 0 0}
.what li{
  padding:clamp(8px,1.4vh,15px) 0;border-top:1px solid var(--line-lt);
  color:rgba(242,237,227,.72);
}
.what li:last-child{border-bottom:1px solid var(--line-lt)}
.what b{color:var(--paper);font-weight:700}
.fine{margin-top:clamp(10px,1.8vh,20px);color:rgba(242,237,227,.4)}

.form{
  background:var(--paper);color:var(--ink);
  border-radius:var(--r);box-shadow:0 24px 60px -28px rgba(0,0,0,.75);
  padding:clamp(16px,2.6vh,32px) clamp(16px,2vw,32px);
  position:relative;
}
.form::after{   /* perforace — dokument utržený z bloku */
  content:"";position:absolute;left:0;right:0;top:-1px;height:3px;
  background:repeating-linear-gradient(90deg,var(--brass) 0 9px,transparent 9px 18px);
  border-radius:var(--r) var(--r) 0 0;
}
.form-top{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:rgba(14,18,13,.5);
  padding-bottom:clamp(9px,1.5vh,16px);margin-bottom:clamp(11px,1.8vh,20px);
  border-bottom:1px solid var(--line);
}
#lotTag{color:var(--clay)}
.field{display:block;margin-bottom:clamp(8px,1.3vh,14px)}
.field>span{display:block;color:rgba(14,18,13,.55);margin-bottom:5px}
.field>span i{color:var(--clay);font-style:normal}
.field input,.field select{
  width:100%;font-family:inherit;font-size:16px;      /* 16px = iOS nezoomuje při focusu */
  color:var(--ink);background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(8px,1.3vh,13px) 13px;
  transition:border-color .2s ease,background .2s ease;
  -webkit-appearance:none;appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--green);background:#fff}
.field input.is-bad{border-color:var(--clay);background:rgba(142,59,34,.07)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{
  display:flex;gap:10px;align-items:flex-start;
  margin:clamp(4px,.8vh,8px) 0 clamp(11px,1.8vh,20px);
  font-size:clamp(12.5px,1.5vh,14.5px);color:rgba(14,18,13,.7);cursor:pointer;
}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--green);flex:none}
.status{margin-top:clamp(8px,1.3vh,14px);min-height:1.4em;color:rgba(14,18,13,.55);letter-spacing:.07em}
.status.is-bad{color:var(--clay)}
.alt{
  margin-top:clamp(9px,1.5vh,16px);padding-top:clamp(9px,1.5vh,16px);
  border-top:1px solid var(--line);color:rgba(14,18,13,.5);letter-spacing:.07em;
}
.alt a{color:var(--green);font-weight:700}

/* Formulář je krémový papír — krémové tlačítko na něm zmizí. */
.form .btn-solid{background:var(--green);color:var(--paper);border-color:var(--green)}
.form .btn-solid:hover{background:var(--ink);border-color:var(--ink)}
.form .btn-solid[disabled]{background:var(--green);opacity:.45}

.earned{
  display:none;gap:12px;align-items:center;
  border:1px dashed var(--brass);border-radius:var(--r);
  background:rgba(200,162,74,.14);
  padding:clamp(8px,1.3vh,14px) 14px;margin-bottom:clamp(10px,1.6vh,18px);
}
.earned.is-on{display:flex}
.earned-grade{font-family:'Eczar',serif;font-weight:800;font-size:clamp(24px,3.6vh,34px);line-height:1;color:var(--green);flex:none}
.earned-txt{font-size:clamp(12.5px,1.5vh,14px);color:rgba(14,18,13,.75)}
.earned-txt b{color:var(--ink)}

/* ---------- hotovo ---------- */
.done{max-width:720px;text-align:center}
.done .row-c{margin-top:clamp(16px,2.8vh,30px)}
.code{
  font-family:'Fragment Mono',monospace;
  font-size:clamp(17px,3.4vh,30px);letter-spacing:.1em;color:var(--ink);
  background:var(--paper);border:2px dashed var(--green);border-radius:var(--r);
  padding:clamp(12px,2.2vh,22px) 14px;
  margin:clamp(14px,2.4vh,26px) 0 clamp(11px,1.8vh,18px);
  user-select:all;
}
.done-note{color:rgba(242,237,227,.75);max-width:46ch;margin:0 auto}

/* ---------- lot / COA ---------- */
.lab-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:clamp(12px,2.2vh,26px);
  background:var(--line-lt);border:1px solid var(--line-lt);
}
.lab-grid article{background:rgba(14,18,13,.68);padding:clamp(10px,1.7vh,20px) clamp(12px,1.5vw,20px)}
.lab-k{color:var(--brass);padding-bottom:clamp(7px,1.2vh,13px);border-bottom:1px solid var(--line-lt)}
.lab-grid dl{margin:0}
.lab-grid dl>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:clamp(4px,.85vh,9px) 0;border-bottom:1px dotted var(--line-lt);
}
.lab-grid dl>div:last-child{border-bottom:none}
.lab-grid dt{color:rgba(242,237,227,.68)}
.lab-grid dd{margin:0;color:var(--paper);white-space:nowrap}
.lab-wide{grid-column:1/-1;background:var(--green) !important}
.lab-big{font-family:'Eczar',serif;font-weight:700;font-size:clamp(17px,3vh,32px);line-height:1.12;margin:clamp(8px,1.4vh,15px) 0}
.lab-big span{color:var(--brass)}
.lab-note{color:rgba(242,237,227,.5)}

/* ---------- právní ---------- */
.legal{max-width:82ch}
.legal p{color:rgba(242,237,227,.66);margin-top:clamp(12px,2vh,22px)}

/* ==========================================================================
   MOBIL — layout se přepočítává, nikdy nezmenšuje (webs-no-zoom)
   ========================================================================== */
@media (max-width:900px){
  .bar-nav{gap:14px}
  .claim{grid-template-columns:1fr;gap:clamp(12px,2vh,20px)}
  .claim-left .what,.claim-left .fine{display:none}   /* na jedné obrazovce má přednost formulář */
  .lab-grid{grid-template-columns:1fr 1fr}
  /* `.pad` má jinak jen max-height, což NENÍ definitivní výška — procenta uvnitř
     se pak chovají jako auto a mřížka klidně přeroste pod patičku (terminál se
     uřízl v půlce fotky). Proto se úvodní panel natáhne na plnou výšku. */
  [data-panel="intro"]{place-items:stretch center}
  [data-panel="intro"] .pad{height:100%;min-height:0}
  /* Scéna se skládá pod sebe. Text má PEVNOU výšku (auto) a terminál spolkne
     zbytek (1fr) — obráceně to text vytlačí terminál pod hranu obrazovky
     a čísla z COA, kvůli kterým hero existuje, nikdo neuvidí. */
  .intro{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(96px,1fr);
    height:100%;align-items:stretch;gap:clamp(10px,1.8vh,18px);
  }
  .intro-copy{min-height:0}
  .spec{min-height:0}
  .spec-eye{min-height:0}
  .intro-sub{max-width:none}
  /* Krátký široký výřez by ukázal jen oblohu — musí kousnout níž, na ruku s větví. */
  .spec-eye img{object-position:52% 64%}
}
@media (max-width:620px){
  /* Navigace na mobilu ZŮSTÁVÁ — bez ní se návštěvník nedostane k COA, což je
     hlavní důkaz. Místo ní ustoupí WhatsApp, který je i v patičce a formuláři. */
  .bar-wa{display:none}
  .bar-nav{gap:11px}
  .bar-nav .mono{font-size:9px;letter-spacing:.08em}
  .bar-mark-sub{display:none}
  .rail p:first-child{display:none}
  .rail{justify-content:center}
  /* 48px lámalo „One lot at a time." na čtvrtý řádek a ten sežral terminál. */
  .intro-h{font-size:clamp(24px,4.4vh,37px)}
  .intro-sub{font-size:clamp(12.5px,1.55vh,14.5px);margin-top:8px}
  .intro-copy .row{margin-top:clamp(10px,1.6vh,16px)}
  .intro-copy .btn-big{padding:11px 16px}
  .row .btn{flex:1 1 100%}
  /* Jméno a země jsou krátká pole — pod sebou přidají ~70 px a právě o ty
     přetékalo odesílací tlačítko pod hranu obrazovky. Vedle sebe se vejdou. */
  .two{grid-template-columns:1fr 1fr;gap:9px}
  .intro-fine{display:none}     /* totéž říká patička — na telefonu je to dvakrát */
  .spec-read span{padding:6px 5px;letter-spacing:.04em}
  .tag-leaf{left:7%;top:24%}
  .tag-stem{left:32%;bottom:14%}
  /* ---- formulář se musí VEJÍT, ne jen dát doscrollovat ----------------
     Odesílací tlačítko je jediný smysl téhle obrazovky. Když se ho návštěvník
     musí dolovat pod hranou displeje, sběr e-mailů nefunguje. Proto se tady
     ubírá jen tam, kde to nic neříká: rámy, mezery a jeden duplicitní řádek. */
  .claim .kicker{margin-bottom:8px}
  .claim .panel-h{font-size:clamp(20px,3.4vh,28px)}
  .form{padding:14px 14px}
  .form-top{padding-bottom:8px;margin-bottom:10px}
  .field{margin-bottom:9px}
  .field>span{margin-bottom:3px}
  .check{margin:6px 0 11px}
  /* Číslo na WhatsApp stojí natrvalo v patičce — v formuláři je podruhé. */
  .alt{display:none}

  /* ---- COA: hutněji, ale bez mazání naměřených čísel ------------------
     Laboratorní protokol je důkaz; ubrat z něj řádek by byl podvod. Zmenšuje
     se tedy obal (odsazení, mezery, velikost nadpisu), obsah zůstává celý.
     Co se přesto nevejde na nejmenší displeje, dojede pojistkovým scrollem. */
  .lab-grid{grid-template-columns:1fr;margin-top:10px}
  .lab-grid article:nth-child(3){display:none}
  .lab-grid article{padding:9px 12px}
  .lab-k{padding-bottom:6px}
  .lab-grid dl>div{padding:3px 0}
  .lab-big{font-size:clamp(15px,2.4vh,19px);margin:7px 0}
  /* Kdo protokol podepsal a k jakému vzorku platí, je součást důkazu —
     nemazat, jen zmenšit. */
  .lab-note{font-size:9px;line-height:1.5;letter-spacing:.05em}
  .lab .kicker{margin-bottom:7px}
  .lab .panel-h{font-size:clamp(20px,3.4vh,28px)}
  .lab .row{margin-top:11px}
  .fall{width:60px;height:60px}
  .ladder{grid-template-columns:1fr 1fr}
  .dev-model{display:none}
  .sticker{font-size:9px;padding:3px 7px}
}
/* Nízké okno na šířku (telefon otočený) — hra dostane všechno místo. */
@media (max-height:520px){
  .what,.fine,.ladder,.intro-fine{display:none}
  .intro-sub{display:none}
}

/* Kdo si vypnul animace, musí vidět TÝŽ obsah — ne prázdno. Proto se všechno
   nastaví rovnou do koncového stavu, jen se to nikam nepohne. */
@media (prefers-reduced-motion:reduce){
  .panel{transition:none}
  .btn{transition:none}
  .spec{clip-path:none;animation:none}
  .spec-scan{display:none}
  .intro-h i{transform:none;animation:none}
  .spec-tag,.spec-read span,.intro-copy .row,.intro-fine{opacity:1;transform:none;animation:none}
  .fall-pop{display:none}
}