/* Peckomat — vizuální systém podle ROZHODNUTI §2.1.
Jedna značka, dvě plochy: katalog i Peckomat Data sdílejí tokeny.
Od 12. 9. 2026 je VÝCHOZÍ SVĚTLÝ motiv (zadání „Katalog po edicích"):
světlé tokeny stojí v :root, tmavé jen pod prefers-color-scheme: dark
a pod [data-theme="dark"]. Přepínač v hlavičce nastaví data-theme.
Každá textová barva je ověřená na 4,5:1 proti všem třem podkladům svého
motivu — časové razítko je povinný údaj a --text-slaby už jednou spadl.
Podklad pod obrázkem a pod logem edice je čistě bílý #FFFFFF v OBOU
motivech: obrázky z kitu mají průhledné pozadí a jiný odstín pod nimi
by se tvářil jako úprava fotky, kterou licence nepovoluje.
Rádiusy jsou jen dva (zadání 23, fáze B zadání 24): --r-akce (kulaté) nese
ovládací prvek a stav — tlačítko, pole, výběr, tečka dostupnosti, aktivní
položka; --r-data (hranaté) nese údaj — karta, dlaždice, tabulka, náhled,
i když je celá odkazem. Značka automatu (.mark) má geometrii ze zadání 23. */
:root{
color-scheme: light;
--pismo-ui: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--pismo-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--pismo-edice: "Bricolage Grotesque", var(--pismo-ui);
--podklad: #FFFFFF;
--plocha: #FFFFFF;
--podklad-2: #F4EDEC;
--ram: #E2D5D4;
--ram-jemny: #EDE3E2;
--ram-silny: #CDBDB9;
--text: #1A1416;
--text-tlumeny: #6E5C5E;
--text-slaby: #776869; /* 4,6:1 */
--znacka: #8C2F39;
--akcent: #8C2F39;
--akcent-tmavsi: #6E242C;
--akcent-podklad: rgba(140,47,57,.08);
--skladem: #2F6B4F;
--predobjednavka: #8A5A12;
--vyprodano: #776869;
--cara:#B9A9A8;
--mrizka:#EFE7E6;
--vnitrek:#E7DCDB;
--lista:#CFBFBE;
--stin-baleni:rgba(110,92,94,.35);
/* Barvy her podle jejich log (Karel 19. 9. 2026, zadání 63, §6.92). Do té doby to byla
paleta odvozená od webu, ne od značek. SWU žlutá se NIKDY nepoužívá jako barva textu —
na bílé má kontrast 2,6:1; nese plochy a linky, text na ní je tmavý. */
--g-lorcana: #5B3A8E;
--g-one_piece: #C8102E;
--g-swu: #C99700;
--g-riftbound: #E07A12;
/* Skříň automatu (zadání 63). Světlý motiv. */
--skrin:#EFE4E2; --skrin-svetla:#F8F1EF; --skrin-stin:#D6C6C3;
--ram-skla:#231B1E; --interier:#FAF6F5; --kov:#B9ADAC; --kov-svetly:#DCD3D2; --cenovka:#FFFFFF;
--displej:#0E1511; --displej-text:#7FE0A8; --sokl:#2A2124;
--dlazdice: #FFFFFF;
--foto-jas: 1;
--stin: 0 1px 2px rgba(26,20,22,.05), 0 10px 30px -22px rgba(26,20,22,.4);
/* Jazyk automatu (zadání 23, fáze A zadání 24, 13. 9. 2026). Jen přibývají, nic nepřepisují.
Pravidlo rádiusu: co je kulaté, to něco udělá; co je hranaté, to jen něco říká. */
--r-data: 5px;
--r-akce: 999px;
/* Poměr okna se zbožím. Od zadání 59 je obrázek zhruba na polovinu výšky dlaždice
(bylo 1 / 1.4): pod oknem stojí čtyři řádky textu — co to je, z které edice, za kolik
a jestli to jde koupit — a při vysokém okně by se text zmáčkl na nečitelný proužek. */
--slot-pomer: 1 / 0.62;
--sklo: rgba(26,20,22,.04);
--kontrolka-off: #C9BFBE;
--t-pad: 360ms;
--e-pad: cubic-bezier(0.3, 0, 0.8, 0.15);
--e-dosed: cubic-bezier(0.05, 0.7, 0.1, 1);
--sklad-podklad: rgba(47,107,79,.10);
--predobj-podklad: rgba(138,90,18,.12);
--sedy-podklad: rgba(119,104,105,.12);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
color-scheme: dark;
--podklad: #141013;
--plocha: #1C171A;
--podklad-2: #241D20;
--ram: #352B2E;
--ram-jemny: #2A2225;
--ram-silny: #4A3A3C;
--text: #F3ECEB; /* 14,2:1 */
--text-tlumeny: #B3A2A4; /* 6,8:1 */
--text-slaby: #968788; /* 4,8:1 — nese časové razítko a zdroj fotky */
--znacka: #C9505F; /* jen velké písmo: logo, hry v titulku (3,8:1 ≥ 3:1) */
--akcent: #E4818B;
--akcent-tmavsi: #F0A6AD; /* hover na tmavém podkladu zesvětluje */
--akcent-podklad: rgba(228,129,139,.12);
--skladem: #5FBE8F;
--predobjednavka: #DFA94E;
--vyprodano: #968788; /* podklad navrhoval #7C6E70 = 3,8:1, pro text málo */
--cara:#6B5A5C;
--mrizka:#2A2225;
--vnitrek:#0C090B;
--lista:#453639;
--stin-baleni:rgba(0,0,0,.56);
--g-lorcana: #A68BD8;
--g-one_piece: #F0515E;
--g-swu: #FFE81F;
--g-riftbound: #F59A3C;
--skrin:#2B2327; --skrin-svetla:#362C31; --skrin-stin:#1B1518; --ram-skla:#080607;
--interier:#16111A; --kov:#6D6266; --kov-svetly:#8C8084; --cenovka:#221B1F; --sokl:#0D0A0C;
--dlazdice: #FFFFFF;
--foto-jas: .94; /* na tmavém, ať bílá dlaždice nebodá */
--stin: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px -24px rgba(0,0,0,.9);
--sklo: rgba(243,236,235,.05);
--kontrolka-off: #4A3A3C;
--sklad-podklad: rgba(95,190,143,.14);
--predobj-podklad: rgba(223,169,78,.14);
--sedy-podklad: rgba(150,135,136,.16);
}
}
:root[data-theme="dark"]{
color-scheme: dark;
--podklad: #141013;
--plocha: #1C171A;
--podklad-2: #241D20;
--ram: #352B2E;
--ram-jemny: #2A2225;
--ram-silny: #4A3A3C;
--text: #F3ECEB; /* 14,2:1 */
--text-tlumeny: #B3A2A4; /* 6,8:1 */
--text-slaby: #968788; /* 4,8:1 — nese časové razítko a zdroj fotky */
--znacka: #C9505F; /* jen velké písmo: logo, hry v titulku (3,8:1 ≥ 3:1) */
--akcent: #E4818B;
--akcent-tmavsi: #F0A6AD; /* hover na tmavém podkladu zesvětluje */
--akcent-podklad: rgba(228,129,139,.12);
--skladem: #5FBE8F;
--predobjednavka: #DFA94E;
--vyprodano: #968788; /* podklad navrhoval #7C6E70 = 3,8:1, pro text málo */
--cara:#6B5A5C;
--mrizka:#2A2225;
--vnitrek:#0C090B;
--lista:#453639;
--stin-baleni:rgba(0,0,0,.56);
--g-lorcana: #A68BD8;
--g-one_piece: #F0515E;
--g-swu: #FFE81F;
--g-riftbound: #F59A3C;
--skrin:#2B2327; --skrin-svetla:#362C31; --skrin-stin:#1B1518; --ram-skla:#080607;
--interier:#16111A; --kov:#6D6266; --kov-svetly:#8C8084; --cenovka:#221B1F; --sokl:#0D0A0C;
--displej:#0E1511; --displej-text:#7FE0A8;
--dlazdice: #FFFFFF;
--foto-jas: .94; /* na tmavém, ať bílá dlaždice nebodá */
--stin: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px -24px rgba(0,0,0,.9);
--sklo: rgba(243,236,235,.05);
--kontrolka-off: #4A3A3C;
--sklad-podklad: rgba(95,190,143,.14);
--predobj-podklad: rgba(223,169,78,.14);
--sedy-podklad: rgba(150,135,136,.16);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--podklad); color:var(--text);
font-family:var(--pismo-ui); font-size:15px; line-height:1.5;
font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
}
a{color:var(--akcent); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--akcent-tmavsi)}
:focus-visible{outline:2px solid var(--akcent); outline-offset:2px; border-radius:var(--r-data)}
.jen-pro-ctecky{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
h1,h2,h3{text-wrap:balance}
.obal{max-width:1100px; margin:0 auto; padding:0 20px}
.uzky{max-width:760px}
.mono{font-family:var(--pismo-mono); font-variant-numeric:tabular-nums}
.tlumene{color:var(--text-tlumeny)}
/* ── hlavička ─────────────────────────────────────────────── */
.hlavicka{border-bottom:1px solid var(--ram-jemny); background:var(--podklad); position:sticky; top:0; z-index:20}
.hlavicka .obal{display:flex; align-items:center; gap:20px; height:58px}
/* Kurzíva u *Disney Lorcana* je licenční podmínka Ravensburgeru, ne
typografické rozhodnutí — nerušit. Třída se NESMÍ jmenovat `znacka`,
ta je obsazená značkou typu balení a má `display:block`. */
.znacka-vyrobce{font-style:italic}
.nezalom{white-space:nowrap}
/* Položky vyplní výšku hlavičky a obsah drží na společném středu. Všechny hry
jsou text, i aktivní (zadání 21, bod 3) — značka hry jako obrázek vysoký
18 px byla vedle písma nečitelná. Aktivní stav je proužek u dolní hrany. */
.hl-nav{display:flex; gap:20px; margin-left:auto; align-items:center; align-self:stretch; font-size:13.5px}
.hl-nav a{position:relative; display:inline-flex; align-items:center; align-self:stretch;
color:var(--text-tlumeny); text-decoration:none}
.hl-nav a:hover,.hl-nav a[aria-current]{color:var(--text)}
.hl-nav a[aria-current]::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
border-radius:var(--r-akce); background:var(--akcent)}
.zed-pripojujeme{font-size:12.5px; margin:14px 0 0}
.prepinac{width:31px; height:31px; border-radius:var(--r-akce); border:1px solid var(--ram);
background:var(--plocha); color:var(--text-tlumeny); font-size:12px; cursor:pointer;
display:grid; place-items:center; padding:0}
.prepinac:hover{border-color:var(--ram-silny); color:var(--text)}
/* ===== navrh/automat.css, oddíl 7: vloženo doslova ===== */
/* ---------- 7. ZNAČKA ---------- */
/* Jedna proměnná --m řídí celou velikost. Nic jiného se nenastavuje. */
.mark{
--m:48px; display:inline-flex; flex-direction:column; gap:calc(var(--m)*.06);
width:calc(var(--m)*.82); padding:calc(var(--m)*.07);
border-radius:calc(var(--m)*.15); background:var(--podklad-2);
border:1px solid var(--ram); vertical-align:bottom;
}
.m-okno{
display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--m)*.045);
padding:calc(var(--m)*.055); border-radius:calc(var(--m)*.09); background:var(--plocha);
}
.m-okno i{
display:block; aspect-ratio:1/1.35; border-radius:calc(var(--m)*.035);
background:var(--ram-jemny);
}
.m-okno i.f{ background:var(--text-tlumeny) }
.m-okno i.f.lor{ background:var(--g-lorcana) }
.m-okno i.f.op{ background:var(--g-one_piece) }
.m-okno i.f.swu{ background:var(--g-swu) }
.m-okno i.f.rb{ background:var(--g-riftbound) }
.m-slot{ height:calc(var(--m)*.11); border-radius:calc(var(--m)*.05);
background:var(--text); opacity:.8 }
/* načítání = stroj se plní, ne točící se kolečko */
.mark.nacita .m-okno i{ animation:plni 1.8s ease-in-out infinite }
.mark.nacita .m-okno i:nth-child(2){ animation-delay:.15s }
.mark.nacita .m-okno i:nth-child(3){ animation-delay:.30s }
.mark.nacita .m-okno i:nth-child(4){ animation-delay:.45s }
.mark.nacita .m-okno i:nth-child(5){ animation-delay:.60s }
.mark.nacita .m-okno i:nth-child(6){ animation-delay:.75s }
@keyframes plni{
0%,70%,100%{ background:var(--ram-jemny) }
25%,45% { background:var(--znacka) }
}
@media (prefers-reduced-motion: reduce){
.mark.nacita .m-okno i{ animation:none }
}
/* ===== navrh/logotyp.css: vloženo doslova (fáze B, ROZHODNUTI §6.59 a §6.60, zadání 26) ===== */
/* ============================================================
PECKOMAT — LOGOTYP
Varianta B, vybráno Karlem 13. 9. 2026 (revize téhož večera).
V HLAVIČCE JE JEN JMÉNO. PIKTOGRAM AUTOMATU TAM NENÍ.
Důvod: piktogram i okno místo „o" říkají totéž a vedle sebe
je to jeden nápad dvakrát. Pravidlo pro celý web zní:
V JEDNOM MÍSTĚ VŽDY JEN JEDEN NOSITEL NÁPADU.
Piktogram (.mark z automat.css) proto žije tam, kde se slovo
nevejde: favicon, ikona aplikace, sdílecí obrázek, měřák
pokrytí u her. Nikdy ne vedle jména.
PRAVIDLO STEJNÉ JAKO U automat.css: kopíruje se, nepřepisuje.
Názvy tříd zůstávají. Žádný obrázek — logotyp je text a CSS,
takže je ostrý v každé velikosti a funguje v obou motivech
bez druhé verze souboru.
============================================================ */
/* ---------- logotyp ---------- */
.logotyp{
font-family:var(--pismo-edice); /* Bricolage Grotesque */
font-weight:800;
letter-spacing:-.035em;
line-height:1;
white-space:nowrap;
font-size:24px; /* desktop */
display:inline-flex;
align-items:baseline;
text-decoration:none;
color:var(--text);
}
/* okno místo písmene „o" — jediné „o" ve jméně, a celá značka */
.logotyp .okno-o{
display:inline-block;
width:.62em; height:.72em;
border-radius:.1em;
background:var(--plocha);
border:.1em solid currentColor;
position:relative;
transform:translateY(.04em);
margin:0 .04em;
}
.logotyp .okno-o::after{
content:"";
position:absolute; inset:.11em;
border-radius:.04em;
background:var(--znacka); /* zboží za sklem */
}
/* náhradní plné „o" — zapíná se až v nejmenších šířkách, viz níž */
.logotyp .plne-o{ display:none }
/* kontrolka stavu služby — jediná věc v hlavičce, která nese
informaci a ne ozdobu. Pravidla níž, NIKDY natvrdo zelená. */
.logotyp .kontrolka{
display:inline-block;
width:.19em; height:.19em;
border-radius:var(--r-akce);
margin-left:.16em;
vertical-align:.5em;
background:var(--kontrolka-off);
box-shadow:0 0 0 .07em transparent;
}
.logotyp .kontrolka[data-stav="bezi"]{
background:var(--skladem);
box-shadow:0 0 0 .07em var(--sklad-podklad);
}
.logotyp .kontrolka[data-stav="zpozdeno"]{
background:var(--predobjednavka);
box-shadow:0 0 0 .07em var(--predobj-podklad);
}
/* ---------- mobil ---------- */
/* Jméno zůstává vždycky. Není co odebírat — piktogram tu není. */
@media (max-width: 640px){
.logotyp{ font-size:19px }
.logotyp .kontrolka{ display:none }
}
/* Pod 340 px se okno v písmenu slije do skvrny.
Tam nastupuje plné jméno — je to výměna jednoho písmene,
ne jiná značka. */
@media (max-width: 340px){
.logotyp{ font-size:17px; letter-spacing:-.045em }
.logotyp .okno-o{ display:none }
.logotyp .plne-o{ display:inline }
}
/* ============================================================
HTML — takhle přesně, ne jinak
Peckomat
V hlavičce NIC dalšího. Žádný .
aria-label je povinný: okno místo „o" je prázdný a plné „o"
má display:none, čtečka by bez něj přečetla „Peckmat". data-sestaveno
nese čas sestavení pro pravidlo 4 (stránka pozná, že zastarala),
title říká slovy, co kontrolka hlásí. Doplněno 14. 9. 2026 (zadání 27).
============================================================ */
/* ============================================================
PRAVIDLA, KTERÁ NEJSOU V CSS A MUSÍ PLATIT
1. V HLAVIČCE NENÍ PIKTOGRAM. V jednom místě vždy jen jeden
nositel nápadu. Piktogram patří tam, kde se slovo nevejde:
favicon, ikona aplikace, sdílecí obrázek, měřák pokrytí.
2. NEJMENŠÍ VELIKOST JMÉNA JE 14 px. Pod ní se přepíná na plné
jméno bez okna, nezmenšuje se dál.
3. VOLNÝ PROSTOR kolem jména = výška velkého písmene. Nic do něj
nevstupuje.
4. KONTROLKA SE NIKDY NEMALUJE ZELENĚ NATVRDO.
Atribut data-stav dosazuje SESTAVENÍ podle hlídače výpadku:
- poslední běh v pořádku -> data-stav="bezi"
- hlídač něco hlásí -> data-stav="zpozdeno"
A protože je web statický, může zastarat i sám: do stránky se
uloží čas sestavení a drobný skript při načtení porovná
s hodinami prohlížeče — stránka starší než 8 hodin (dva
zmeškané běhy při čtyřech denně) přepne kontrolku na
"zpozdeno" sama.
ZELENÁ KONTROLKA NAD SPADLÝM SBĚREM JE HORŠÍ NEŽ ŽÁDNÁ.
Dokud tohle napojení není hotové, kontrolka se NENASAZUJE.
5. JMÉNO SE NEPÍŠE VERZÁLKAMI. „PECKOMAT" je jiná značka.
6. Dva tvary jsou maximum. Žádné nožičky, žádné sklo s odleskem,
žádné oči v okně.
============================================================ */
/* ===== konec navrh/logotyp.css ===== */
/* ===== navrh/hlavni-strana.css: vloženo doslova (zadání 30) ===== */
/* ============================================================
PECKOMAT — JAZYK AUTOMATU, DRUHÁ ČÁST
Prvky hlavní strany a doplnění katalogu.
Navazuje na navrh/automat.css a používá jeho tokeny i třídy.
PRAVIDLO STEJNÉ: tenhle soubor se KOPÍRUJE, nepřepisuje.
Názvy tříd zůstávají. Žádná hodnota se nemění, aby
„sedla do našich stylů". Když je opravdu potřeba něco
změnit, změní se to TADY a napíše do reportu i s důvodem.
Živá ukázka: navrh/hlavni-strana.html
============================================================ */
/* ============================================================
1. BĚŽÍCÍ PÁS OBCHODŮ
Nahrazuje seznam 39 jmen v patičce.
Jediná animace na hlavní straně.
============================================================ */
.pas-titulek{
text-align:center;
font-family:var(--pismo-mono);
font-size:11px; letter-spacing:.1em; text-transform:uppercase;
color:var(--text-slaby);
margin:0 0 2px;
}
.pas{
position:relative;
overflow:hidden;
padding:16px 0;
/* okraje se rozplývají, aby jména neusekával ostrý řez */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.pas-stopa{
display:flex; gap:34px;
width:max-content;
animation:jede 38s linear infinite;
}
.pas:hover .pas-stopa,
.pas:focus-within .pas-stopa{ animation-play-state:paused }
/* Posun o 50 % — v HTML je seznam obchodů DVAKRÁT za sebou,
jinak pás na konci poskočí. */
@keyframes jede{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){
.pas-stopa{ animation:none; flex-wrap:wrap; width:auto; justify-content:center }
.pas{ -webkit-mask-image:none; mask-image:none }
}
.obchod{
display:flex; align-items:center; gap:9px;
white-space:nowrap;
font-size:15px; font-weight:500;
color:var(--text-tlumeny); text-decoration:none;
}
.obchod:hover{ color:var(--text) }
.obchod i{ width:9px; height:9px; border-radius:3px; flex:none; display:block }
/* Tečka = TRH, ne hra. */
.obchod .cz{ background:var(--g-swu) }
.obchod .sk{ background:var(--g-riftbound) }
/* ============================================================
2. PROUD UDÁLOSTÍ — „poslední pohyby"
Odznak stavu vlevo, barevně. Jediné místo na webu,
kam barevnost patří: do stavu dat, ne do pozadí bloků.
Používá .chip z automat.css, přidává dva stavy.
============================================================ */
.proud{ display:flex; flex-direction:column }
.udalost{
display:flex; align-items:center; gap:14px;
padding:13px 2px;
border-bottom:1px solid var(--ram-jemny);
font-size:15px; flex-wrap:wrap;
text-decoration:none; color:inherit;
}
.udalost:last-child{ border-bottom:0 }
.udalost:hover{ background:var(--podklad-2) }
.udalost .co{ flex:1 1 240px; min-width:0 }
.udalost .co b{ font-weight:600; display:block }
.udalost .kde{
display:block; font-size:12.5px; color:var(--text-slaby); margin-top:1px;
}
.udalost .cena{
font-family:var(--pismo-mono); font-weight:600;
font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* U slevy se ukazují OBĚ ceny. Samotná nová cena neřekne, že zlevnilo. */
.udalost .cena .stara{
font-weight:400; color:var(--text-slaby); margin-right:6px;
}
.udalost .kdy{
font-family:var(--pismo-mono); font-size:12.5px; color:var(--text-slaby);
white-space:nowrap; min-width:76px; text-align:right;
}
/* .chip.sk a .chip.sl jsou v automat.css. Tady jen dva chybějící stavy. */
.chip.pre{ color:var(--predobjednavka); background:var(--predobj-podklad) }
.chip.pryc{ color:var(--vyprodano); background:var(--sedy-podklad) }
/* ============================================================
3. BARVY HER — přepínač nad katalogem
Barva drží napříč celým webem: katalog, proud, graf, e-mail.
============================================================ */
.hry{ display:flex; gap:10px; flex-wrap:wrap }
.hra-chip{
display:flex; align-items:center; gap:9px;
padding:9px 15px 9px 12px;
border-radius:var(--r-akce);
background:var(--podklad-2);
font-weight:600; font-size:14.5px;
color:var(--text); text-decoration:none;
}
.hra-chip:hover{ background:var(--ram-jemny) }
.hra-chip.on{ box-shadow:inset 0 0 0 1.5px var(--znacka) }
.hra-chip i{ width:10px; height:10px; border-radius:3px; display:block; flex:none }
.hra-chip b{
font-family:var(--pismo-mono); font-weight:600;
color:var(--text-slaby); font-size:13px;
}
.hra-chip.lor i{ background:var(--g-lorcana) }
.hra-chip.op i{ background:var(--g-one_piece) }
.hra-chip.swu i{ background:var(--g-swu) }
.hra-chip.rb i{ background:var(--g-riftbound) }
/* ============================================================
4. PRÁZDNÝ STAV NA DETAILU PRODUKTU
Vyprodáno je náš nejčastější stav. Tady patří fakta,
ne slovo „nikde skladem" a nic víc.
Tlačítko „dej mi vědět" se NEPŘIDÁVÁ, dokud neběží hlídač.
============================================================ */
.prazdno{ display:flex; flex-direction:column; gap:12px }
.prazdno .nadpis{
font-family:var(--pismo-edice); font-weight:800;
font-size:22px; letter-spacing:-.02em;
}
.prazdno p{ margin:0; font-size:14.5px; color:var(--text-tlumeny) }
.prazdno p b{ color:var(--text); font-weight:600 }
/* ============================================================
5. ZMĚNY PRO WEB
Claude Code, 14. 9. 2026 (stejné pravidlo jako u automat.css:
změna jen tady a s důvodem).
a) Základní .chip bez předka. automat.css ho má jen jako
.polozka .chip (uvnitř klapky) a ukázka hlavni-strana.html si ho
vkládá sama mimo tenhle soubor; v .udalost by odznak neměl písmo
ani odsazení. Hodnoty jsou stejné jako u .polozka .chip.
b) Druhá kopie seznamu obchodů nese aria-hidden="true" a tabindex="-1":
čtečka ani klávesnice nemají procházet obchody dvakrát. Při omezeném
pohybu se pás rozpadne do zalomeného seznamu a tam by stál každý
obchod dvakrát, proto se druhá kopie skryje.
c) .obchod vede na web obchodu, ne na /obchody// — stránky
jednotlivých obchodů na webu nejsou.
d) V .hra-chip stojí „Disney Lorcana" celé, ne „Lorcana": přijaté
podmínky Ravensburgeru zkrácení nedovolují (stejně jako v hlavičce).
============================================================ */
.chip{
font-family:var(--pismo-mono); font-size:10px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; padding:3px 8px; border-radius:var(--r-akce); flex:none;
}
@media (prefers-reduced-motion: reduce){
.pas-stopa [aria-hidden="true"]{ display:none }
}
/* ============================================================
POZNÁMKA
Tokeny používané navíc proti automat.css: žádné.
Všechno je z existujícího styl.css plus tří, které
doplňuje automat.css (--sklad-podklad, --predobj-podklad,
--sedy-podklad).
Co se sem ZÁMĚRNĚ nedává:
- klapka a pád balíčku (fáze D, až bude hlídač),
- tlačítko „dej mi vědět" (až budou registrace),
- „čeká na to N lidí" (až bude souhlas podle §11.1).
============================================================ */
/* ===== konec navrh/hlavni-strana.css ===== */
/* Rozvržení kolem komponent hlavní strany (mimo vloženou kopii). */
nav.hry{margin-top:26px}
/* ===== navrh/graf.css: vloženo doslova (zadání 31) ===== */
/* ============================================================
PECKOMAT — JAZYK AUTOMATU, TŘETÍ ČÁST
Graf ceny. Tři tvary: rozptyl nabídek, pás dostupnosti,
nejlepší cena s pásmem trhu.
Navazuje na navrh/automat.css a používá jeho tokeny.
PRAVIDLO STEJNÉ: tenhle soubor se KOPÍRUJE, nepřepisuje.
Názvy tříd zůstávají. Žádná hodnota se nemění, aby
„sedla do našich stylů". Když je opravdu potřeba něco
změnit, změní se to TADY a napíše do reportu i s důvodem.
Dva tokeny navíc proti automat.css. Hodnoty jsou dole
v sekci TOKENY:
--cara neutrální inkoust čar
--mrizka vodorovná mřížka a pásmo trhu
ŽÁDNÁ PALETA PRO IDENTITU OBCHODU TU NENÍ A NEBUDE.
Obchod se pozná jménem. Barva znamená hru, nebo stav skladu.
Živá ukázka: navrh/graf.html
============================================================ */
/* ---------- SPOLEČNÉ ---------- */
.graf{ display:flex; flex-direction:column; gap:14px }
.graf-hlava{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap }
.graf-hlava h3{
font-family:var(--pismo-ui); font-weight:600; font-size:16px; margin:0; letter-spacing:-.01em;
}
.graf-hlava .rozsah{
font-family:var(--pismo-mono); font-size:11.5px; letter-spacing:.05em;
text-transform:uppercase; color:var(--text-slaby);
}
.graf-zdroj{
margin:0; font-size:12.5px; line-height:1.6; color:var(--text-slaby);
border-left:2px solid var(--ram); padding-left:11px; max-width:66ch;
}
.graf-zdroj b{ color:var(--text-tlumeny); font-weight:600 }
/* legenda stavů — barva tu nikdy nestojí bez slova vedle sebe */
.stavy{ display:flex; gap:16px; flex-wrap:wrap; padding:0 10px }
.stavy span{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-slaby) }
.stavy i{ width:13px; height:9px; border-radius:2px; display:block; flex:none }
.stavy i.ok { background:var(--skladem) }
.stavy i.pryc { background:var(--vyprodano); opacity:.42 }
.stavy i.nevede{ background:var(--mrizka) }
.stavy i.nemer {
background:repeating-linear-gradient(135deg, var(--mrizka) 0 2px, transparent 2px 4px);
box-shadow:inset 0 0 0 1px var(--mrizka);
}
/* ============================================================
A. ROZPTYL NABÍDEK
„Kde to koupím teď?"
Jeden řádek na obchod, jedna společná osa ceny.
Kreslí se vždycky. Nepotřebuje historii.
============================================================ */
.rozptyl{ display:flex; flex-direction:column }
.rozptyl-radek{
display:grid;
grid-template-columns: minmax(96px,auto) 1fr minmax(74px,auto);
align-items:center; gap:14px;
padding:9px 10px; border-radius:var(--r-data);
text-decoration:none; color:inherit;
}
.rozptyl-radek:hover{ background:var(--podklad-2) }
.rozptyl-radek.nej{ background:var(--sklad-podklad) }
.rozptyl-radek .obchod{ font-size:14.5px; font-weight:500; white-space:nowrap }
.rozptyl-radek .drat{
position:relative; height:2px; background:var(--mrizka); border-radius:1px;
}
.rozptyl-radek .bod{
position:absolute; top:50%; width:11px; height:11px; border-radius:var(--r-akce);
transform:translate(-50%,-50%);
background:var(--text-tlumeny);
box-shadow:0 0 0 2px var(--plocha); /* 2px kroužek, ať se překryté body nesplynou */
}
.rozptyl-radek.nej .bod{ background:var(--skladem) }
.rozptyl-radek.pryc .bod{ background:var(--vyprodano); opacity:.55 }
.rozptyl-radek .cena{
font-family:var(--pismo-mono); font-size:14px; font-weight:600;
font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;
}
.rozptyl-radek.nej .cena{ color:var(--skladem) }
.rozptyl-radek.pryc .cena{ color:var(--text-slaby); font-weight:400 }
.rozptyl-radek .stav{
font-family:var(--pismo-mono); font-size:10px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-slaby); margin-left:8px;
}
.rozptyl-radek.nej .stav{ color:var(--skladem) }
/* osa pod rozptylem */
.rozptyl-osa{
display:grid; grid-template-columns: minmax(96px,auto) 1fr minmax(74px,auto);
gap:14px; padding:0 10px; margin-top:2px;
}
.rozptyl-osa .skala{
position:relative; height:20px;
font-family:var(--pismo-mono); font-size:11px; color:var(--text-slaby);
font-variant-numeric:tabular-nums;
}
.rozptyl-osa .znacka-osy{ position:absolute; transform:translateX(-50%); white-space:nowrap }
.rozptyl-osa .znacka-osy::before{
content:""; position:absolute; left:50%; top:-6px; width:1px; height:5px;
background:var(--ram);
}
/* svislá kotva — medián, naše minimum, doporučená cena výrobce */
.kotva-cary{ position:absolute; inset:0; pointer-events:none }
.kotva-cara{
position:absolute; top:-4px; bottom:-4px; width:1px;
background:var(--ram);
}
.kotva-cara.tecko{ background:none; border-left:1px dashed var(--ram) }
/* ============================================================
C. PÁS DOSTUPNOSTI
„Kdo to drží skladem?"
Řádek na obchod, jeden dílek = jedno čtení.
Kreslí se vždycky. Je úplný od prvního dne.
============================================================ */
.dostupnost{ display:flex; flex-direction:column }
.dost-radek{
display:grid;
grid-template-columns: minmax(96px,auto) 1fr minmax(88px,auto);
align-items:center; gap:14px;
padding:8px 10px; border-radius:var(--r-data);
text-decoration:none; color:inherit;
}
.dost-radek:hover{ background:var(--podklad-2) }
.dost-radek .obchod{ font-size:14.5px; font-weight:500; white-space:nowrap }
.dost-radek .pocet{
font-family:var(--pismo-mono); font-size:12.5px; color:var(--text-slaby);
font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;
}
.pruh{ display:flex; gap:2px; height:13px }
.pruh i{ display:block; flex:1; border-radius:2px }
.pruh i.ok { background:var(--skladem) }
.pruh i.pryc { background:var(--vyprodano); opacity:.42 }
.pruh i.nevede{ background:var(--mrizka) }
.pruh i.nemer {
background:repeating-linear-gradient(135deg, var(--mrizka) 0 2px, transparent 2px 4px);
box-shadow:inset 0 0 0 1px var(--mrizka);
}
/* ============================================================
D. NEJLEPŠÍ CENA A PÁSMO TRHU
„Kam to jde?"
Jedna čára (nejlevnější nabídka) a za ní šedé pásmo
mezi nejlevnější a nejdražší. Nahrazuje pětičarý graf.
Kreslí se až od 14 dnů historie.
============================================================ */
.vyvoj{ width:100%; height:auto; overflow:visible; display:block }
.vyvoj .mriz{ stroke:var(--mrizka); stroke-width:1 }
/* pásmo trhu — plocha mezi nejlevnější a nejdražší nabídkou */
.vyvoj .pasmo{ fill:var(--mrizka) }
/* jediná čára v grafu */
.vyvoj .nejcara{
fill:none; stroke:var(--skladem); stroke-width:2.5;
stroke-linejoin:round; stroke-linecap:round;
}
.vyvoj .nejbod{ fill:var(--skladem); stroke:var(--plocha); stroke-width:2 }
/* svislice tam, kde nejlepší cenu přebírá jiný obchod */
.vyvoj .predavka{ stroke:var(--ram); stroke-width:1; stroke-dasharray:3 3 }
.vyvoj .popisek{ font-family:var(--pismo-ui); font-size:12.5px; fill:var(--text-slaby) }
.vyvoj .popisek.nej{ fill:var(--text); font-weight:600 }
.vyvoj .osa{ font-family:var(--pismo-mono); font-size:11px; fill:var(--text-slaby) }
.vyvoj .kotva{ stroke:var(--ram); stroke-width:1; stroke-dasharray:3 4 }
.vyvoj .kotva-text{ font-family:var(--pismo-mono); font-size:10.5px; fill:var(--text-slaby) }
/* ============================================================
TOKENY NAVÍC
Vlož do :root a do obou tmavých bloků ve styl.css
přesně takhle, na stejná místa jako ostatní tokeny.
============================================================ */
/* světlý režim */
:root{
--cara:#B9A9A8;
--mrizka:#EFE7E6;
}
/* tmavý — systémová volba */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
--cara:#6B5A5C;
--mrizka:#2A2225;
}}
/* tmavý — výslovné přepnutí */
:root[data-theme="dark"]{
--cara:#6B5A5C;
--mrizka:#2A2225;
}
/* ============================================================
ZMĚNY PRO WEB
Claude Code, 14. 9. 2026 (stejné pravidlo: změna jen tady a s důvodem).
Soubor byl v 1:55 přepsaný na revizi zadání 31, změny z první
verze se proto vracejí sem a c) platí nově i pro pás dostupnosti.
a) .rozptyl-radek .obchod a .dost-radek .obchod dědí barvu.
navrh/hlavni-strana.css má .obchod bez předka (běžící pás, barva
--text-tlumeny) a jméno obchodu v grafu by zešedlo.
b) Tokeny --cara a --mrizka jsou ve styl.css i mezi ostatními tokeny;
sekce TOKENY níž je ve vložené kopii taky, se stejnými hodnotami.
c) Jedna společná osa pro všechny řádky. Řádky měly vlastní mřížku se
sloupci podle obsahu: v rozptylu měl řádek „nejlevnější" kratší drát
(na 400 px 85 proti 98 px) a body neležely na téže škále; v pásu by
se dílky posouvaly podle délky „10 z 10". Řádky a osa proto sdílejí
sloupce rodiče přes subgrid; osa rozptylu leží uvnitř .rozptyl.
d) Do 640 px stojí stav („nejlevnější", „vyprodáno") pod cenou. Sdílený
sloupec ceny jinak sebral drátu místo a popisky osy se překrývaly.
e) Kotva doporučené ceny (zadání 51): .rozptyl je umístěný, aby překryv
.kotva-cary z oddílu kotvy mohl ležet v buňce mřížky přes sloupec drátů
všech řádků nabídek. Čára je pak souvislá i na mobilu, kde jsou řádky
vyšší. Kotva se kreslí jen u produktu s doloženým MSRP.
============================================================ */
.rozptyl-radek .obchod, .dost-radek .obchod{ color:inherit }
.rozptyl{ display:grid; grid-template-columns:minmax(96px,auto) 1fr minmax(74px,auto); column-gap:14px }
.rozptyl-radek, .rozptyl > .rozptyl-osa{ grid-column:1 / -1; grid-template-columns:subgrid }
.dostupnost{ display:grid; grid-template-columns:minmax(96px,auto) 1fr minmax(88px,auto); column-gap:14px }
.dost-radek{ grid-column:1 / -1; grid-template-columns:subgrid }
@media (max-width: 640px){ .rozptyl-radek .stav{ display:block; margin-left:0 } }
.rozptyl{ position:relative }
/* ============================================================
CO SE SEM ZÁMĚRNĚ NEDÁVÁ
- Paleta pro identitu obchodů. Obchod se pozná jménem
na začátku řádku nebo u konce čáry. Pětibarevná duha
propadla validátorem (odstup 12,2 u nejhorší sousední
dvojice, hranice je 15) a odporuje našemu pravidlu,
že barva znamená hru nebo stav skladu.
- Legenda obchodů pod grafem. Nahrazují ji jména v řádcích
a popisky u konců čar. Legenda STAVŮ (.stavy) zůstává —
tam barva bez slova stát nesmí.
- Pět souběžných čar (dřívější „vývoj ceny"). Nahrazeno
tvarem D: jedna čára a pásmo. Nekreslit ani jako volbu.
- Doporučená cena výrobce jako kotva — až bude potvrzená
u všech čtyř her (zadání 22 a 27).
============================================================ */
/* ===== konec navrh/graf.css ===== */
/* ===== navrh/automat.css, oddíly 2, 3, 4, 6 a 8: vloženo doslova (fáze C) ===== */
/* ---------- 2. SLOT ---------- */
.regal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:14px; align-items:start }
.slot{
display:flex; flex-direction:column; gap:0;
border-radius:var(--r-data); overflow:hidden;
border:1px solid var(--ram-jemny); background:var(--plocha);
}
.okno{
position:relative; flex:none; aspect-ratio:var(--slot-pomer); background:var(--sklo);
display:flex; align-items:center; justify-content:center; padding:14px; overflow:hidden;
}
.zbozi{
width:58%; height:78%; border-radius:3px; background:var(--g-lorcana); opacity:.92;
box-shadow:0 1px 0 rgba(0,0,0,.12) inset;
}
.zbozi.op{ background:var(--g-one_piece) }
.zbozi.swu{ background:var(--g-swu) }
.zbozi.rb{ background:var(--g-riftbound) }
.zbozi.sirsi{ width:74%; height:66% } /* display, karton */
.stitek{
display:flex; align-items:center; justify-content:space-between; gap:6px;
padding:7px 9px; border-top:1px solid var(--ram-jemny); background:var(--plocha);
}
.stitek .kod{ font-family:var(--pismo-mono); font-size:10px; color:var(--text-slaby); letter-spacing:.04em }
.stitek .cena{ font-family:var(--pismo-mono); font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums }
.stitek.nej{ background:var(--sklad-podklad) }
.stitek.nej .cena{ color:var(--skladem) }
/* ---------- 3. STAVY SLOTU ---------- */
.lampa{ position:absolute; top:8px; right:8px; width:9px; height:9px;
border-radius:var(--r-akce); background:var(--kontrolka-off) }
.lampa.sviti{ background:var(--skladem); box-shadow:0 0 0 3px var(--sklad-podklad) }
.lampa.pre{ background:var(--predobjednavka); box-shadow:0 0 0 3px var(--predobj-podklad) }
.cedule{
position:absolute; inset:auto 0 0 0; background:#8C2F39; color:#fff; text-align:center;
font-family:var(--pismo-mono); font-size:10px; font-weight:700; letter-spacing:.12em; padding:4px 0;
}
/* cedule i páska leží na bílé dlaždici v obou motivech: barvy světlého motivu natvrdo, oddíl 8 f) */
.slot.pryc .zbozi{ filter:grayscale(1); opacity:.4 }
.slot.prazdny .okno{ background:repeating-linear-gradient(135deg,transparent 0 7px,var(--sklo) 7px 14px) }
.slot.prazdny .stitek .cena{ color:var(--text-slaby); font-weight:400 }
.slot.brzy .zbozi{ background:none; border:1.5px dashed var(--ram); opacity:.8 }
.slot.mimo .okno{ background:var(--sedy-podklad) }
.paska{
position:absolute; left:-14%; right:-14%; top:50%; transform:translateY(-50%) rotate(-11deg);
background:#8A5A12; color:#fff; font-family:var(--pismo-mono); font-size:10px;
font-weight:700; letter-spacing:.11em; text-align:center; padding:4px 0;
}
/* ---------- 4. TLAČÍTKO — ČTYŘI STAVY ---------- */
.tl{
display:inline-flex; align-items:center; gap:8px; border:0; border-radius:var(--r-akce);
padding:10px 18px; font-family:var(--pismo-ui); font-size:14.5px; font-weight:600;
cursor:pointer; background:var(--podklad-2); color:var(--text);
}
.tl .zarovka{ width:8px; height:8px; border-radius:var(--r-akce); background:var(--kontrolka-off); flex:none }
.tl.sviti{ background:var(--znacka); color:#fff }
.tl.sviti .zarovka{ background:#fff }
:root[data-theme="dark"] .tl.sviti{ color:#221013 }
:root[data-theme="dark"] .tl.sviti .zarovka{ background:#221013 }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .tl.sviti{ color:#221013 }
:root:not([data-theme="light"]) .tl.sviti .zarovka{ background:#221013 }
}
.tl.zhasle{ background:var(--sedy-podklad); color:var(--text-slaby); cursor:not-allowed }
.tl.blika .zarovka{ background:var(--predobjednavka); animation:blik 1.1s steps(1) infinite }
@keyframes blik{ 0%,49%{ opacity:1 } 50%,100%{ opacity:.2 } }
@media (prefers-reduced-motion: reduce){
.tl.blika .zarovka{ animation:none; opacity:.75 }
}
/* ---------- 6. KLAPKA A PÁD ---------- */
.klapka{ border:1px solid var(--ram-jemny); border-radius:var(--r-data); overflow:hidden }
.klapka .usti{ height:9px; background:var(--text); opacity:.82 }
.vydej{ padding:12px 14px; display:flex; flex-direction:column; gap:9px; background:var(--podklad-2) }
.polozka{
display:flex; align-items:center; gap:10px; background:var(--plocha); border-radius:var(--r-data);
padding:9px 11px; font-size:14px; border:1px solid var(--ram-jemny);
}
.polozka .chip{
font-family:var(--pismo-mono); font-size:10px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; padding:3px 8px; border-radius:var(--r-akce); flex:none;
}
.chip.sk{ color:var(--skladem); background:var(--sklad-podklad) }
.chip.sl{ color:var(--znacka); background:var(--akcent-podklad) }
.polozka .n{ flex:1 1 auto; min-width:0 }
.polozka .c{ font-family:var(--pismo-mono); font-weight:600;
font-variant-numeric:tabular-nums; white-space:nowrap }
/* VÝCHOZÍ STAV JE BEZ ANIMACE — WCAG 2.3.3.
Pohyb se ZAPÍNÁ, nevypíná. Nepřepisovat na opačný zápis. */
@keyframes pad{
from{ transform:translateY(-46px); opacity:0 }
to { transform:translateY(0); opacity:1 }
}
@media (prefers-reduced-motion: no-preference){
.pada{ animation:pad var(--t-pad) var(--e-pad) both }
}
/* ---------- 8. ZMĚNY PRO WEB ----------
Claude Code, 13. 9. 2026 (zadání 23, pravidlo 2: změna jen tady, s důvodem).
a) Oddíl 4: tmavé písmo svítícího tlačítka jen v tmavém motivu.
Selektor :root:not([data-theme="light"]) bez media dotazu platil i ve
světlém motivu bez ručně zvoleného motivu (tmavé písmo na višňové ploše).
b) Obrázek z tiskového kitu výrobce: licence dovoluje jen proporcionální
zmenšení (hlídá web.kontrola_obrazku). Proto bílá dlaždice, žádný filtr,
průhlednost ani stín, a páska mimo provoz nejde přes obrázek.
c) Okno je na webu odkaz na produkt: bez podtržení, jen prolnutí 160 ms
(tabulka kde se smí hýbat co: katalog jen prolnutí 160 ms).
d) Štítek je cenovka, ne popiska: vlevo krátký typ balení (booster, display,
balíček, karton, trove, sada…), název produktu je v title a aria-label
okna (zadání 29). Výpustka zůstává jen jako pojistka pro „viděno před…“.
e) Tlačítko je na webu odkaz: bez podtržení, barva písma drží při najetí.
f) Cedule a páska leží na bílé dlaždici v obou motivech, proto mají natvrdo
barvy světlého motivu s bílým písmem (zadání 27, 14. 9. 2026):
cedule #8C2F39 = 8,14 : 1, páska #8A5A12 = 5,91 : 1.
Barvy podle motivu dávaly 4,17 (cedule v tmavém) a 3,07 (páska ve světlém).
g) Chybějící pravidla návrhu, doplněná přímo v oddílech 2 a 8 (zadání 29, 14. 9. 2026):
.regal align-items:start — slot končí štítkem, nenatahuje se na výšku
nejvyššího slotu v řadě (bylo 152 px prázdna pod štítkem);
.okno flex:none — poměr 1 : 1,4 drží i prázdné okno (bylo 297 místo 192 px);
.slot.brzy .zbozi.obraz border:0 — přerušovaný obrys nahrazuje zboží, jen když
ho není čím ukázat; u skutečné fotky vypadal jako nenahraný obrázek. */
.zbozi.obraz{ display:grid; place-items:center; padding:6%; background:#FFFFFF; opacity:1; box-shadow:none }
.zbozi.obraz img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain }
.slot.pryc .zbozi.bez-filtru{ filter:none; opacity:1 }
.slot.brzy .zbozi.obraz{ background:#FFFFFF; opacity:1; border:0 }
.zbozi.obraz ~ .paska{ left:0; right:0; top:0; transform:none }
a.okno{ text-decoration:none; transition:background-color 160ms }
a.okno:hover{ background:var(--podklad-2) }
@media (prefers-reduced-motion: reduce){ a.okno{ transition:none } }
.stitek .kod{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
a.tl{ text-decoration:none }
.tl.sviti:hover{ color:#fff }
:root[data-theme="dark"] .tl.sviti:hover{ color:#221013 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tl.sviti:hover{ color:#221013 } }
/* ===== konec navrh/automat.css ===== */
/* Rozvržení stránky kolem komponent automatu — není součást navrh/automat.css. */
.sloty-zdroj{margin:16px 0 0; font-size:12.5px; color:var(--text-slaby)}
.edice-souhrn .mark{margin-right:10px}
.cena-blok .tl{margin-top:14px}
/* ── hlavní strana ────────────────────────────────────────── */
.hledani{position:relative; display:flex; align-items:center; gap:12px;
border:1.5px solid var(--ram); background:var(--plocha); border-radius:var(--r-akce);
padding:0 16px; box-shadow:var(--stin)}
.hledani:focus-within{border-color:var(--akcent)}
.hledani svg{flex:none; color:var(--text-slaby)}
.hledani input{flex:1; min-width:0; border:0; background:transparent; color:var(--text);
font:inherit; font-size:17px; padding:15px 0; outline:none}
.hledani input::placeholder{color:var(--text-slaby)}
.hledani kbd{font-family:var(--pismo-mono); font-size:11px; color:var(--text-slaby);
border:1px solid var(--ram); border-radius:var(--r-data); padding:2px 6px; flex:none}
@media (hover:none){ .hledani kbd{display:none} }
.vysledky{margin-top:10px; border:1px solid var(--ram); border-radius:var(--r-data);
background:var(--plocha); box-shadow:var(--stin); overflow:hidden}
.vysledky:empty{display:none}
.vysledky a{display:flex; gap:10px; align-items:baseline; padding:10px 14px;
text-decoration:none; color:var(--text); border-bottom:1px solid var(--ram-jemny)}
.vysledky a:last-child{border-bottom:none}
.vysledky a:hover,.vysledky a:focus-visible{background:var(--podklad-2)}
.vysledky .v-hra{font-size:12px; color:var(--text-slaby); margin-left:auto; white-space:nowrap}
.legenda{border:1px solid var(--ram-jemny); border-radius:var(--r-data); background:var(--plocha);
padding:30px 26px 22px; display:grid; gap:18px}
.legenda-radek{display:flex; justify-content:space-around; align-items:flex-end; gap:12px}
.legenda figure{margin:0; display:grid; justify-items:center; gap:8px}
.legenda figcaption{font-family:var(--pismo-mono); font-size:11px; color:var(--text-slaby)}
.legenda p{margin:0; font-size:13px; color:var(--text-tlumeny); line-height:1.55}
/* ===== navrh/automat.css, oddíl 5: vloženo doslova (fáze B) ===== */
/* ---------- 5. DISPLEJ ---------- */
.displej{ display:flex; gap:26px; flex-wrap:wrap;
font-family:var(--pismo-mono); font-variant-numeric:tabular-nums }
.displej div{ font-size:12px; color:var(--text-slaby); letter-spacing:.05em; text-transform:uppercase }
.displej b{ display:block; font-size:26px; color:var(--text); letter-spacing:-.02em;
font-weight:600; text-transform:none }
.displej b.zel{ color:var(--skladem) }
.displej{margin:6px 0 4px}
.seznam{list-style:none; padding:0; margin:0}
.seznam li{padding:10px 0; border-bottom:1px solid var(--ram-jemny); display:flex;
gap:10px; align-items:baseline; flex-wrap:wrap}
.seznam .kdy{margin-left:auto}
/* ── obecné bloky ─────────────────────────────────────────── */
section{padding:30px 0}
h1{font-size:26px; line-height:1.25; letter-spacing:-.02em; margin:0 0 6px}
h2{font-size:17px; margin:0 0 14px; letter-spacing:-.01em}
.nadpis-male{font-size:11px; letter-spacing:.12em; text-transform:uppercase;
color:var(--text-slaby); font-weight:600; margin:0 0 14px}
h3{font-size:14px; margin:0 0 8px; color:var(--text-tlumeny); font-weight:600;
text-transform:uppercase; letter-spacing:.06em}
.karta{background:var(--plocha); border:1px solid var(--ram); border-radius:var(--r-data)}
.mrizka{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
/* ── produkt ──────────────────────────────────────────────── */
.produkt{display:grid; grid-template-columns:212px minmax(0,1fr); gap:44px;
padding:44px 0 8px; align-items:start}
.lista{display:flex; flex-direction:column; gap:14px}
.lista figure{margin:0}
/* Fotka se nikdy neupravuje (§5.1, O6). Neprůhledná fotka na bílém by na
tmavém podkladu svítila jako obdélník, proto dostane bílou dlaždici:
bílá fotky s ní splyne a hrana zmizí. Průhledná sedí přímo na podkladu. */
.dlazdice{background:var(--dlazdice); border:1px solid var(--ram); border-radius:var(--r-data);
padding:14px; display:grid; place-items:center;
/* jas na celé dlaždici, ne na fotce: jinak je bílá fotky šedší než dlaždice
a hrana, kterou dlaždice měla schovat, je vidět */
filter:brightness(var(--foto-jas))}
/* Obrázek z tiskového kitu výrobce: podmínky dovolují JEN proporcionální
zmenšení, takže na něj nesmí padnout žádný filtr. Je to právní podmínka,
ne estetika — proto výjimka i tam, kde by dlaždici dostal. */
.dlazdice.bez-filtru{filter:none}
/* Obrázek od výrobce stojí VŽDY na čistě bílé #FFFFFF — i když má průhledné
pozadí a dlaždici nedostane. Jiný odstín pod průhledným originálem se tváří
jako jeho úprava, a podmínky dovolují jen zmenšení. Do 12. 9. 2026 tu bílá
chyběla: průhledné obrázky z kitu stály na ploše stránky, v tmavém motivu
na #141013. Fotky z obchodů (bez „bez-filtru") se to netýká. */
.foto-volna.bez-filtru{filter:none; background:#FFFFFF; border-radius:var(--r-data)}
.foto{max-width:100%; height:auto; display:block}
.foto-volna{display:grid; place-items:center; padding:4px 0}
.foto-zdroj{font-size:11.5px; color:var(--text-slaby); margin-top:8px}
.znacka-box{border:1px solid var(--ram-jemny); border-radius:var(--r-data); background:var(--plocha);
padding:22px 18px 16px; display:grid; justify-items:center; gap:10px; margin:0}
.znacka-box figcaption{font-family:var(--pismo-mono); font-size:11px; color:var(--text-slaby);
letter-spacing:.02em; text-align:center}
.znacka{display:block}
/* Silueta balení mimo slot (detail produktu, legenda na /o-projektu; zadání 39, odd. 6). Okno má
poměr karty jako slot a silueta ho vyplní celé — jinak se ztratí společná základna. */
.okno-baleni{position:relative; display:block; width:112px; aspect-ratio:1/1.4}
.legenda .okno-baleni{width:64px}
.legenda-radek{flex-wrap:wrap}
.g-lorcana{color:var(--g-lorcana)} .g-one_piece{color:var(--g-one_piece)}
.g-swu{color:var(--g-swu)} .g-riftbound{color:var(--g-riftbound)}
.nadtitulek{font-family:var(--pismo-mono); font-size:11.5px; letter-spacing:.1em;
text-transform:uppercase; color:var(--text-slaby); margin:0 0 12px}
.nadtitulek a{color:inherit; text-decoration:none}
.nadtitulek a:hover{color:var(--text)}
/* Název produktu písmem edic, ve skutečné velikosti: stránka, ne řádek tabulky. Serif zrušen
(zadání 35); Bricolage máme jen v řezu 800, proto 800 výslovně. */
.titul-produktu{font-family:var(--pismo-edice); font-weight:800;
font-size:clamp(26px,3.4vw,38px); line-height:1.14; letter-spacing:-.018em; margin:0}
.meta-produktu{margin:12px 0 0; font-family:var(--pismo-mono); font-size:12.5px;
color:var(--text-tlumeny); display:flex; flex-wrap:wrap; gap:4px 10px}
/* oddělovač ZA položkou: při zalomení visí na konci řádku, nezačíná jím další */
.meta-produktu span:not(:last-child)::after{content:"·"; margin-left:10px; color:var(--text-slaby)}
.cena-blok{margin-top:26px; padding-top:22px; border-top:1px solid var(--ram)}
.cena-blok .cislo{font-family:var(--pismo-mono); font-size:38px; font-weight:500;
letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.cena-blok .cislo.nic{font-family:var(--pismo-edice); font-size:26px; letter-spacing:-.01em;
font-weight:800}
.cena-blok .rika{margin:8px 0 0; font-size:14px; color:var(--text-tlumeny)}
.cena-blok .rika b{color:var(--text); font-weight:600}
/* Nabídky: seznam obchodů, ne tabulka — hustota zůstává, hierarchie přibude. */
.nabidky-seznam{margin:22px 0 0; padding:0; list-style:none; border-top:1px solid var(--ram-jemny)}
.nabidka{display:grid; grid-template-columns:minmax(0,1fr) 150px 150px; gap:16px;
align-items:center; padding:14px 2px; border-bottom:1px solid var(--ram-jemny)}
.nabidka-obchod{font-weight:500; font-size:15.5px; min-width:0}
.nabidka-obchod a{color:var(--text); text-decoration:none}
.nabidka-obchod a:hover{color:var(--akcent); text-decoration:underline}
.nabidka-obchod small{display:block; font-family:var(--pismo-mono); font-size:11.5px;
color:var(--text-slaby); font-weight:400; margin-top:3px; overflow-wrap:anywhere}
.nabidka-nej{display:inline-block; margin-left:8px; font-size:10.5px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:var(--akcent); vertical-align:1px}
.nabidka-cena{font-family:var(--pismo-mono); font-size:18px; font-weight:500; text-align:right;
white-space:nowrap; font-variant-numeric:tabular-nums}
.nabidka-cena small{display:block; font-size:11px; color:var(--text-slaby); font-weight:400; margin-top:3px}
.nabidka-cena .bez{font-family:var(--pismo-ui); font-size:13px; font-weight:400; color:var(--text-tlumeny)}
.nabidka-vpravo{text-align:right}
.kdy{font-family:var(--pismo-mono); font-size:11.5px; color:var(--text-slaby);
margin-top:4px; white-space:nowrap}
/* dostupnost nese TVAR, ne jen barvu */
.dost{display:inline-flex; align-items:center; gap:7px; font-size:13px; white-space:nowrap}
.dost i{width:9px; height:9px; border-radius:var(--r-akce); flex:none}
.dost.skladem{color:var(--skladem)}
.dost.skladem i{background:var(--skladem)}
.dost.predobjednavka{color:var(--predobjednavka)}
.dost.predobjednavka i{background:transparent; border:2px solid var(--predobjednavka)}
.dost.vyprodano{color:var(--vyprodano)}
.dost.vyprodano i{background:transparent; border:1px solid var(--vyprodano)}
/* věty o řazení a provizi stojí U seznamu (§4 bod 5 zadání fáze 5) */
.pravidla{margin-top:24px; font-size:13px; color:var(--text-tlumeny); line-height:1.65;
max-width:72ch; padding-bottom:36px}
.pravidla p{margin:0 0 4px}
.pravidla strong{color:var(--text); font-weight:600}
/* ── prázdný stav: nejčastější stránka webu, musí být nejlepší ── */
/* Prázdná stránka produktu. Dřív .prazdny — kolidovalo se stavem slotu .slot.prazdny
z navrh/automat.css a natahovalo prázdná okna (zadání 29). */
.produkt-prazdny{display:grid; grid-template-columns:212px minmax(0,1fr); gap:44px;
padding:60px 0 20px; align-items:start}
.produkt-prazdny .znacka-box{padding:30px 22px 20px}
.prazdny-veta{font-size:19px; line-height:1.55;
color:var(--text-tlumeny); margin:18px 0 0; max-width:44ch}
.prazdny-kdy{margin:16px 0 0; font-family:var(--pismo-mono); font-size:12.5px; color:var(--text-slaby)}
/* ── tabulky na výpisech her, obchodů a stavu ─────────────── */
.nabidky{width:100%; border-collapse:collapse; font-size:14px}
.nabidky th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
color:var(--text-slaby); font-weight:600; padding:0 12px 7px; white-space:nowrap}
.nabidky td{padding:9px 12px; border-top:1px solid var(--ram-jemny); vertical-align:middle}
.nabidky tr:hover td{background:var(--podklad-2)}
.nabidky .cena{font-family:var(--pismo-mono); font-variant-numeric:tabular-nums;
font-size:14px; font-weight:500; white-space:nowrap; text-align:right}
.nabidky .cas{font-family:var(--pismo-mono); font-variant-numeric:tabular-nums;
font-size:12px; color:var(--text-slaby); white-space:nowrap}
.patka{border-top:1px solid var(--ram-jemny); margin-top:40px; padding:26px 0 40px;
font-size:13px; color:var(--text-tlumeny)}
.patka a{color:var(--text-tlumeny)}
.patka strong{color:var(--text)}
.patka-mrizka{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* Prohlášení o neoficiálnosti: samostatný řádek v plné barvě textu, ne drobné písmo mezi odkazy (zadání 03). */
.patka-neoficialni{margin-top:0; margin-bottom:22px; font-size:14px; color:var(--text); line-height:1.55}
/* Graf cen na detailu produktu (zadání 04, bod 2). */
.graf-cen{margin:26px 0 0}
.graf-cen .graf + .graf{margin-top:30px}
/* Co o obchodě víme (zadání 04, bod 3): doložitelné, ne marketingové. */
.duvera{display:block; font-size:11.5px; font-weight:400; color:var(--text-slaby); margin-top:3px}
.duvera-radky{font-size:12.5px; color:var(--text-tlumeny); line-height:1.5; min-width:220px}
/* Široká tabulka se posouvá sama, stránka do strany nikdy. */
.tabulka-posun{overflow-x:auto; -webkit-overflow-scrolling:touch}
@media (max-width:880px){
.produkt,.produkt-prazdny{grid-template-columns:1fr; gap:26px; padding-top:28px}
.lista{flex-direction:row; align-items:flex-start; gap:14px}
.lista > *{flex:1 1 0; max-width:180px}
.produkt-prazdny .znacka-box{max-width:180px}
.nabidka{grid-template-columns:minmax(0,1fr) auto; gap:4px 12px}
/* časové razítko zůstává vidět i na telefonu — je to povinný údaj */
.nabidka-vpravo{grid-column:1 / -1; text-align:left; display:flex; gap:14px; align-items:baseline}
.kdy{margin-top:0}
.hl-nav{gap:12px; font-size:13px}
.hl-nav a.hra{display:none}
}
@media (max-width:640px){
h1{font-size:21px}
.hlavicka .obal{gap:12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
@media print{ .hlavicka,.prepinac,.hledani{display:none} }
/* ── katalog po edicích ─────────────────────────────────────────
Hra → řada → edice → produkty. Na obrázky z kitu tu nepadá žádný filter,
mix-blend-mode ani opacity: nepokrytý řádek se ztmavuje textem a podkladem,
protože průhlednost by padla i na fotku (licence: jen zmenšení). */
.edice-hlava{padding:34px 0 8px}
.edice-hlava h1{font-size:clamp(28px,3.6vw,40px); letter-spacing:-.025em; margin:0 0 10px}
.edice-souhrn{color:var(--text-tlumeny); font-size:13px; margin:8px 0 0}
/* Pokrytí hry stojí na stránce jednou, větou pod nadpisem (zadání 21, bod 4). */
.edice-hlava .edice-souhrn{font-size:15px; margin:0; font-variant-numeric:tabular-nums}
.edice-souhrn b{color:var(--text); font-weight:600}
.edice-uvod{font-size:14px; margin:6px 0 0; max-width:66ch}
.edice-rada{padding:26px 0 6px}
.edice-rada h2{font-size:19px; letter-spacing:-.01em; margin:0}
.edice-rada-kolik{font-variant-numeric:tabular-nums; font-size:12px; color:var(--text-slaby); margin:3px 0 0}
/* Bez rámečků a bez stínů: karty odděluje mezera, ne linka. Hover je neutrální
--podklad-2 — růžová znamená vybranou hru a nesmí znamenat zároveň „myš nad kartou".
Celá dlaždice je odkaz a má to být vidět (zadání 21, bod 2): odsazení 10 px
se vrací záporným okrajem, takže mřížka zůstává na stejném rastru. Žádný
rámeček, stín ani zvednutí. Fokus z klávesnice dostane podbarvení i obrys. */
.edice-mrizka{display:grid; grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); gap:34px 26px; margin-top:20px}
.edice-karta{display:flex; flex-direction:column; border-radius:var(--r-data); padding:10px; margin:-10px;
text-decoration:none; color:var(--text); transition:background-color 160ms}
.edice-karta:hover{background:var(--podklad-2); color:var(--text)}
.edice-karta:focus-visible{background:var(--podklad-2); outline:2px solid var(--text-tlumeny); outline-offset:2px; border-radius:var(--r-data)}
/* Sbalená řada (zadání 05): souhrn nese počet edic i kolik z nich má nabídku,
po rozbalení seznam místo mřížky. Bez rámečků; hover stejně šedý jako karta. */
.edice-rada-sbalena summary{cursor:pointer; list-style:none; display:block; border-radius:var(--r-data); padding:6px; margin:-6px}
.edice-rada-sbalena summary::-webkit-details-marker{display:none}
.edice-rada-sbalena summary h2::before{content:"▸"; display:inline-block; width:1.1em; color:var(--text-slaby); transition:transform .12s}
.edice-rada-sbalena[open] summary h2::before{transform:rotate(90deg)}
.edice-rada-sbalena summary .edice-rada-kolik{padding-left:calc(19px * 1.1)}
.edice-rada-sbalena summary:focus-visible{outline:2px solid var(--text-tlumeny); outline-offset:2px}
.edice-seznam{list-style:none; margin:14px 0 0; padding:0}
.edice-seznam a{display:grid; grid-template-columns:6.5em minmax(14em,1fr) 8.5em 13.5em minmax(0,14em); gap:4px 16px; align-items:baseline;
padding:9px 8px; border-radius:var(--r-data); color:var(--text); text-decoration:none}
.edice-seznam-kod{font-size:11.5px; color:var(--text-slaby); letter-spacing:.06em}
.edice-seznam-jmeno{font-weight:600; font-size:14.5px}
.edice-seznam a:hover, .edice-rada-sbalena summary:hover{background:var(--podklad-2); color:var(--text)}
.edice-seznam a:focus-visible{background:var(--podklad-2); outline:2px solid var(--text-tlumeny); outline-offset:2px}
/* V řádku seznamu se cena a pokrytí zarovnávají na účaří s ostatními sloupci, ne pod sebe. */
.edice-seznam .edice-pokryti, .edice-seznam .edice-cena{margin-top:0}
.edice-seznam .edice-cena-castka{font-size:15px}
@media (max-width: 1040px){
.edice-seznam a{grid-template-columns:5.5em minmax(0,1fr)}
.edice-seznam a > :nth-child(n+3){grid-column:2}
}
/* Štítek edice: vlastní typografie, ne logo. Plocha je bílá v obou motivech
(Karel, 12. 9. v noci) — barvu edice nese text a pás, ne plocha. */
.edice-stitek{display:grid; grid-template-rows:auto 1fr auto; height:138px; padding:14px 15px; background:#FFFFFF;
border-radius:var(--r-data); overflow:hidden; text-align:left}
.edice-kod{font-family:var(--pismo-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#6E5C5E}
.edice-jmeno{font-family:var(--pismo-edice); font-weight:800; font-synthesis:weight; font-size:22px; line-height:1.03;
letter-spacing:-.035em; color:#1A1416; align-self:center; text-wrap:balance;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.edice-jmeno.dlouhy{font-size:17.5px; line-height:1.08}
.edice-pas{display:block; height:5px; width:44px; border-radius:var(--r-data)}
.edice-logo{background:#FFFFFF; display:grid; place-items:center}
/* Velikost loga určuje evidence z OBSAHU loga (width/height v HTML). Tady jen strop,
ať úzká dlaždice nepřeteče. Soubor se needituje, mění se jen měřítko zobrazení. */
.edice-logo{padding:10px 14px}
.edice-logo img{max-width:100%; height:auto}
/* Tmavá dlaždice jen u loga, jehož nejtmavší desetina kresby nemá k bílé kontrast 4,5 : 1
(zadání 13, rozhodnutí Karla 13. 9. 2026). Barva je --podklad tmavého motivu, žádná nová
hodnota. Podklad není úprava obrázku; mřížka tím přestane být jednotná a je to vědomá cena. */
.edice-logo.edice-logo-tmava{background:#141013}
.edice-stitek-velky{height:118px; width:190px; flex:none}
/* Karta edice (zadání 21, bod 1): sběratel mřížku skenuje kvůli dvěma věcem —
kolik to stojí a jestli to jde koupit. Proto je částka největší prvek karty
a stav bez ceny má barvu stavu, ne tučnou černou jako částka. Strojopis
jen tam, kde se čísla mají zarovnat: rok a částka. */
.edice-telo{display:flex; flex-direction:column; padding:11px 13px 3px; flex:1}
.edice-meta{font-size:12px; color:var(--text-slaby); letter-spacing:.01em}
.edice-pokryti{margin-top:8px; font-size:13px; color:var(--text-tlumeny); font-variant-numeric:tabular-nums}
.edice-tecka-sklad{display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:var(--r-akce);
background:var(--skladem); vertical-align:1px}
.edice-cena{margin-top:10px; color:var(--text)}
.edice-cena-pred{font-size:12px; font-weight:500; color:var(--text-tlumeny)}
/* Mezera ve strojopisu je široká jako číslice a „359 Kč" se rozpadalo na dvě slova. */
.edice-cena-castka{font-family:var(--pismo-mono); font-size:19px; font-weight:600; letter-spacing:-.01em;
word-spacing:-.3em; font-variant-numeric:tabular-nums; white-space:nowrap}
.edice-stav{font-size:14px; font-weight:500}
.edice-stav.edice-sklad{color:var(--skladem)}
.edice-stav.edice-predobj{color:var(--predobjednavka)}
.edice-stav.edice-nic{color:var(--vyprodano)}
.edice-zpet{margin:22px 0 0; font-size:13.5px}
.edice-zpet a{color:var(--text-tlumeny); text-decoration:none}
.edice-radky{list-style:none; margin:10px 0 0; padding:0}
.edice-radek{display:grid; grid-template-columns:62px minmax(0,1fr) auto auto; gap:14px; align-items:center;
padding:11px 14px; border-top:1px solid var(--ram-jemny)}
.edice-radek:first-child{border-top:0}
.edice-radek-jmeno{display:flex; flex-direction:column; gap:1px; font-size:14.5px; line-height:1.3}
.edice-radek-jmeno .tlumene{font-size:12px}
.edice-radek-stav{font-size:12.5px; white-space:nowrap; text-align:right}
.edice-radek-cena{font-size:14px; white-space:nowrap; text-align:right; min-width:96px}
.edice-radek.nikdo{background:var(--podklad-2)}
.edice-radek.nikdo .edice-radek-jmeno a{color:var(--text-tlumeny)}
.edice-nikdo{color:var(--vyprodano)}
.edice-radek[hidden]{display:none}
@media (max-width:640px){
.edice-radek{grid-template-columns:48px minmax(0,1fr); row-gap:6px}
.edice-radek-stav,.edice-radek-cena{grid-column:2; text-align:left}
.edice-stitek-velky{width:150px; height:104px}
}
/* Skříň je vložená až na konec: její .vydej, .usti a .polozka mají přebít
oddíl 6 z automat.css (navrh/skrin.css, změna c). */
/* ===== navrh/skrin.css: vloženo doslova (zadání 32) ===== */
/* ============================================================
PECKOMAT — JAZYK AUTOMATU, ČTVRTÁ ČÁST
Skříň stroje kolem regálu: tělo, sklo, police, místo,
panel s ovladači a výdejní klapka.
Navazuje na navrh/automat.css. Regál a slot uvnitř
zůstávají beze změny, tenhle soubor je jen obal kolem nich.
PRAVIDLO STEJNÉ: tenhle soubor se KOPÍRUJE, nepřepisuje.
Názvy tříd zůstávají. Žádná hodnota se nemění, aby
„sedla do našich stylů". Když je opravdu potřeba něco
změnit, změní se to TADY a napíše do reportu i s důvodem.
POZOR — jedno pravidlo ze zadání 29 se PŘESOUVÁ, neruší:
.sklo .regal{ align-items:stretch }
.misto{ display:flex; flex-direction:column }
.misto > .slot{ flex:none }
Slot se pořád neroztahuje. Roztahuje se místo kolem něj,
aby lišta police seděla v celém řádku na stejné výšce.
V automat.css zůstává .regal{ align-items:start } pro
mřížky mimo skříň.
Dva tokeny navíc, hodnoty jsou dole v sekci TOKENY:
--vnitrek zadní stěna stroje, TMAVŠÍ než stránka
--lista nosník police
Živá ukázka: navrh/skrin.html
============================================================ */
/* ------------------------------------------------------------
SKŘÍŇ — tělo stroje. Dva vnořené boxy, jako na fotkách:
tělo (materiál) a v něm sklo (vnitřek, tmavší než stránka).
------------------------------------------------------------ */
.skrin{
position:relative;
border:1px solid var(--ram);
border-radius:11px;
background:var(--podklad-2);
padding:9px;
}
.sklo{
position:relative;
border-radius:7px;
background:var(--vnitrek);
box-shadow:inset 0 0 0 1px var(--ram);
/* 7px po stranách = přesně polovina mezery mřížky.
Díky tomu lišta police dosáhne na obě stěny. */
padding:15px 7px 5px;
}
/* odlesk na horní hraně skla */
.sklo::before{
content:""; position:absolute; left:12px; right:12px; top:1px; height:1px;
background:linear-gradient(90deg,transparent,var(--plocha) 16%,var(--plocha) 84%,transparent);
opacity:.45; pointer-events:none; border-radius:1px;
}
/* ------------------------------------------------------------
POLICE — jedno patro stroje. Uvnitř běží .regal beze změny.
------------------------------------------------------------ */
.police{ position:relative }
.police + .police{ margin-top:20px }
.police-jmeno{
display:block; padding:0 7px 9px;
font-family:var(--pismo-mono); font-size:10px; font-weight:600;
letter-spacing:.13em; text-transform:uppercase; color:var(--text-slaby);
}
/* ------------------------------------------------------------
MÍSTO — jedna pozice ve stroji.
Každá buňka mřížky je místo. Místo BUĎ drží slot, NEBO je volné.
Sem se přesouvá pravidlo proti roztahování ze zadání 29:
místo se natáhne na výšku řádku, slot uvnitř si drží svoji.
------------------------------------------------------------ */
.sklo .regal{ column-gap:14px; row-gap:0; align-items:stretch }
.misto{
position:relative;
display:flex; flex-direction:column;
padding-bottom:18px;
}
.misto > .slot{ flex:none } /* slot se NEROZTAHUJE — jen místo kolem něj */
/* lišta police — přesah 7px do mezer, takže je souvislá od stěny ke stěně */
.misto::after{
content:""; position:absolute; left:-7px; right:-7px; bottom:7px; height:3px;
background:var(--lista); border-radius:1px;
box-shadow:0 1px 0 var(--sklo);
}
/* ------------------------------------------------------------
VOLNÉ MÍSTO — holá zadní stěna stroje.
Nemá štítek, kontrolku ani obrys. Tím se odlišuje od slotu,
který stojí prázdný proto, že produkt existuje a nikdo ho nevede.
------------------------------------------------------------ */
.misto.volne .zed{
flex:1 1 auto;
border-radius:var(--r-data);
background:rgba(0,0,0,.045);
}
:root[data-theme="dark"] .misto.volne .zed{ background:rgba(255,255,255,.03) } /* změna b) */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .misto.volne .zed{ background:rgba(255,255,255,.03) } }
/* ------------------------------------------------------------
PANEL — ovládání stroje.
Na širokém displeji sloupec vpravo, jinak pruh nad sklem.
Jedna sada značek, dvě polohy. Do panelu patří JEN ovladače,
které opravdu něco dělají.
------------------------------------------------------------ */
.automat{ display:grid; grid-template-columns:1fr; gap:9px }
@media (min-width:1080px){
.automat{ grid-template-columns:1fr 112px; align-items:start }
}
.panel{
display:flex; flex-wrap:wrap; gap:8px;
padding:10px; border-radius:7px;
background:var(--podklad-2); box-shadow:inset 0 0 0 1px var(--ram);
}
@media (min-width:1080px){
.panel{ flex-direction:column; flex-wrap:nowrap }
}
/* displej — jediné místo, kde je barva pevná v obou režimech */
.panel-displej{
flex:1 1 160px; border-radius:4px; padding:8px 10px;
background:#1A1416; color:#E8DEDC;
font-family:var(--pismo-mono); font-variant-numeric:tabular-nums;
}
.panel-displej b{ display:block; font-size:17px; font-weight:600; letter-spacing:-.01em }
.panel-displej span{ display:block; font-size:9.5px; letter-spacing:.1em;
text-transform:uppercase; opacity:.6; margin-top:2px }
/* tlačítko v panelu — používá .tl a .zarovka z automat.css */
.panel .tl{
width:100%; justify-content:flex-start; padding:8px 11px;
font-size:13px; background:var(--plocha);
box-shadow:inset 0 0 0 1px var(--ram-jemny);
}
.panel .tl b{ font-family:var(--pismo-mono); font-size:11px; font-weight:600;
color:var(--text-slaby); margin-left:auto }
.panel .tl.on{ box-shadow:inset 0 0 0 1.5px var(--znacka) }
.panel .tl .zarovka.lor{ background:var(--g-lorcana) } /* změna a) */
.panel .tl .zarovka.op { background:var(--g-one_piece) }
.panel .tl .zarovka.swu{ background:var(--g-swu) }
.panel .tl .zarovka.rb { background:var(--g-riftbound) }
.panel-deleni{ height:1px; background:var(--ram); margin:2px 0; flex:1 0 100% }
/* ------------------------------------------------------------
KLAPKA — výdejní otvor. Nikdy není prázdný:
když se nic nezměnilo, je to taky odpověď.
------------------------------------------------------------ */
.vydejna{
margin-top:9px; border-radius:7px; overflow:hidden;
background:var(--vnitrek); box-shadow:inset 0 0 0 1px var(--ram);
}
.usti{ height:9px; background:var(--text); opacity:.72 }
.vydej{ padding:11px; display:flex; flex-direction:column; gap:8px }
.vydej-titulek{
font-family:var(--pismo-mono); font-size:9.5px; font-weight:600;
letter-spacing:.13em; text-transform:uppercase; color:var(--text-slaby);
}
.polozka{
display:flex; align-items:center; gap:10px; background:var(--plocha);
border-radius:var(--r-data); padding:8px 11px; font-size:13.5px;
box-shadow:inset 0 0 0 1px var(--ram-jemny); text-decoration:none; color:inherit;
}
.polozka .chip{
font-family:var(--pismo-mono); font-size:9.5px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; padding:3px 8px; border-radius:var(--r-akce); flex:none;
}
.chip.sk { color:var(--skladem); background:var(--sklad-podklad) }
.chip.pryc{ color:var(--text-slaby);background:var(--sedy-podklad) }
.polozka .n{ flex:1 1 auto; min-width:0 }
.polozka .c{ font-family:var(--pismo-mono); font-weight:600;
font-variant-numeric:tabular-nums; white-space:nowrap; font-size:12.5px }
.vydej-nic{ font-size:13.5px; color:var(--text-slaby); padding:2px 1px }
.vydej-nic b{ color:var(--text-tlumeny); font-weight:600 }
/* ============================================================
DOROVNÁNÍ ŘÁDKU NA PLNÝ POČET MÍST
Drobný skript, ne CSS — počet sloupců je responzivní.
Bez JavaScriptu zůstane stroj s neúplným posledním řádkem,
což je pořád v pořádku. Nic se nerozbije.
function dorovnej(regal){
regal.querySelectorAll('.misto.volne').forEach(e => e.remove())
const sloupce = getComputedStyle(regal)
.gridTemplateColumns.split(' ').filter(Boolean).length
if(!sloupce) return
const pocet = regal.querySelectorAll('.misto').length
const chybi = (sloupce - (pocet % sloupce)) % sloupce
for(let i=0;i {
dorovnej(r)
new ResizeObserver(() => dorovnej(r)).observe(r)
})
============================================================ */
/* ============================================================
TOKENY NAVÍC
Vlož do :root a do obou tmavých bloků ve styl.css
přesně takhle, na stejná místa jako ostatní tokeny.
============================================================ */
/* světlý režim */
:root{
--vnitrek:#E7DCDB;
--lista:#CFBFBE;
}
/* tmavý — systémová volba */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
--vnitrek:#0C090B;
--lista:#453639;
}}
/* tmavý — výslovné přepnutí */
:root[data-theme="dark"]{
--vnitrek:#0C090B;
--lista:#453639;
}
/* ============================================================
ZMĚNY PRO WEB
Claude Code, 14. 9. 2026 (stejné pravidlo: změna jen tady a s důvodem).
a) Kontrolky her v panelu berou barvy z tokenů --g-*, ne pevné
hodnoty. Pevné se lišily od barev her na zbytku webu (Riftbound
#8A6A2E proti tokenu #1F6B62, jiný odstín; One Piece a SWU
o kousek) a neměly tmavou variantu. Barva hry drží napříč webem.
b) Světlejší zadní stěna volného místa jen v tmavém motivu. Selektor
:root:not([data-theme="light"]) bez media dotazu platil i ve
světlém motivu bez ručně zvoleného motivu — stejná chyba jako
automat.css, oddíl 8 a).
c) .polozka, .usti, .vydej a .chip.pryc tu mají jiné hodnoty než
automat.css (oddíl 6) a hlavni-strana.css. Na webu platí tyto:
skříň je ve styl.css vložená až za ně, a vlastnosti, které oddíl 6
nastavuje a tady chybí (podklad .vydej, rámeček .polozka), se
uvnitř klapky níž ruší — bez toho měla klapka odsazení 12/14 px
a podklad místo průhledné výdejny. .chip.pryc vychází stejně:
--text-slaby = --vyprodano v obou motivech.
d) Filtr v panelu skrývá celé místo: .misto[hidden] a .police[hidden]
se musí skrýt výslovně, jinak display:flex přebije atribut hidden.
Skript dorovnání počítá jen viditelná místa.
e) Pod 1080 px stojí panel NAD sklem, jak říká popis panelu výš
(„jinak pruh nad sklem"). Pořadí v HTML (sklo, pak panel) ho bez
toho dávalo pod sklo, i v ukázce skrin.html.
f) Varianta pro hlavní stranu (.hlavni-stroj, zadání 35 a 36): panel je
vždy pruh POD sklem, na každé šířce. Nese hledání, které potřebuje
šířku, a zboží má být na první obrazovce. Na stránce edice platí e).
g) Řádek klapky je jeden řádek (zadání 46), na hlavní straně i na
stránce edice z jedné funkce. Dlouhý název se neláme, ořízne se
třemi tečkami. Čas události stojí za cenou menším písmem
a --text-slaby: stáří údaje je u hlídače podstatné, ale nemá mít
váhu ceny. Rozměry karty zůstávají ze skříně (8px 11px, 13.5px);
9px 11px, které cituje zadání, je z automat.css, oddíl 6, a ten
skříň přebíjí (viz c).
Pod 560 px dostane text vlastní řádek přes celou šířku a odznak,
cena a čas jdou pod něj (Karel 15. 9. 2026). Na jednom řádku
zbývalo textu na telefonu 49–83 px, typ ani obchod nebyly vidět.
============================================================ */
.misto[hidden], .police[hidden]{ display:none }
.vydejna .vydej{ background:none }
.vydejna .polozka{ border:0 }
.polozka .n{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.polozka .kdy{
font-family:var(--pismo-mono); font-size:11px; color:var(--text-slaby);
white-space:nowrap; flex:none;
}
@media (max-width:559.98px){
.polozka{ flex-wrap:wrap; row-gap:6px }
.polozka .n{ order:-1; flex:1 0 100% }
.polozka .c{ margin-left:auto }
}
@media (max-width:1079.98px){ .automat > .panel{ order:-1 } }
.hlavni-stroj .automat{ grid-template-columns:1fr }
.hlavni-stroj .automat > .panel{ order:0; flex-direction:row; flex-wrap:wrap; align-items:center }
.hlavni-stroj .panel .hledani, .hlavni-stroj .panel .vysledky{ flex:1 0 100% }
.hlavni-stroj .panel .vysledky{ margin-top:0 }
.hlavni-stroj .panel .tl{ width:auto }
/* ============================================================
CO SE SEM ZÁMĚRNĚ NEDÁVÁ
- Černé tělo stroje. Na bílé stránce by tři patra zabilo.
Nese se VZTAH z fotky (tmavý vnitřek, světlé zboží),
ne doslovná barva.
- Nožičky, kolečka, mincovník, čtečka karet, číselná
klávesnice. Nekreslíme automat, půjčujeme si jeho
gramatiku. Ovladač, který nic nedělá, je kostým.
- Čísla pozic (01–60) na liště. V automatu je vyťukáš,
u nás bys na ně jen koukal.
- Druhá kontrolka stavu služby na panelu. Stav služby
nese kontrolka v logotypu (§6.59).
- Klapka na detailu produktu. Vydávala by změny jednoho
produktu, což je totéž, co ukazuje graf nad ní.
============================================================ */
/* ===== konec navrh/skrin.css ===== */
/* ===== navrh/skrin-hlava.css: vloženo doslova (zadání 33) ===== */
/* ============================================================
PECKOMAT — JAZYK AUTOMATU, DOPLNĚK KE SKŘÍNI
Štítek stroje, štítek police a licenční řádek.
Navazuje na navrh/skrin.css — nasazuje se AŽ PO NĚM.
Samostatný soubor schválně: skrin.css se mezitím mohl
zpracovávat a nechtěl jsem do něj sahat uprostřed běhu.
Až bude obojí nasazené, můžeš to spojit do jednoho souboru
a napsat to do reportu.
PRAVIDLO STEJNÉ: tenhle soubor se KOPÍRUJE, nepřepisuje.
Žádné tokeny navíc, všechno je z automat.css a skrin.css.
Živá ukázka: navrh/skrin.html, sekce „logo nad policemi"
============================================================ */
/* ------------------------------------------------------------
HLAVA STROJE — štítek nahoře na těle skříně.
Jeden stroj = jedna edice, proto je logo edice TADY a jednou.
Vkládá se dovnitř .skrin, PŘED .automat.
------------------------------------------------------------ */
.stroj-hlava{ display:flex; align-items:center; gap:15px; padding:5px 5px 13px }
.stroj-logo{
width:74px; flex:none; aspect-ratio:1/1;
display:flex; align-items:center; justify-content:center;
/* bílý podklad v OBOU motivech — licenční podmínka, nesahat */
background:#FFFFFF; border-radius:var(--r-data); padding:7px;
box-shadow:inset 0 0 0 1px var(--ram-jemny);
}
.stroj-logo img{ max-width:100%; height:auto; display:block }
/* Výjimka z bílého podkladu: logo, jehož nejtmavší desetina kresby nemá k bílé kontrast 4,5 : 1,
dostane tmavou dlaždici i na štítku stroje — totéž pravidlo a táž barva jako u štítků edic
v rozcestníku (.edice-logo-tmava, zadání 13). Bez toho jsou SOR a LOF na stránce edice
prakticky neviditelné (zadání 56). Ostatní loga zůstávají na bílé. */
.stroj-logo.stroj-logo-tmava{ background:#141013 }
.stroj-text{ min-width:0 }
.stroj-nadrazene{
font-family:var(--pismo-mono); font-size:9.5px; font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--text-slaby);
}
.stroj-nazev{
font-family:var(--pismo-edice); font-weight:800; font-size:clamp(21px,3.4vw,28px);
letter-spacing:-.025em; line-height:1.1; margin:2px 0 4px;
}
.stroj-meta{
font-family:var(--pismo-mono); font-size:11.5px; color:var(--text-tlumeny);
font-variant-numeric:tabular-nums;
}
/* licenční řádek — zůstává u loga, ale POD tělem stroje.
Uvnitř skříně by se ztratil a musí být čitelný. */
.stroj-pravni{ margin:7px 2px 0; font-size:10.5px; color:var(--text-slaby) }
/* ------------------------------------------------------------
ŠTÍTEK POLICE — proužek na hraně regálu.
Nese to, ČÍM SE POLICE LIŠÍ, tedy typ balení.
NIKDY logo edice: to je na celém stroji jedno.
Nahrazuje .police-jmeno ze skrin.css.
------------------------------------------------------------ */
.police-stitek{
display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
margin:0 7px 11px; padding:5px 10px;
border-radius:3px; background:var(--podklad-2);
box-shadow:inset 0 0 0 1px var(--ram);
}
.police-stitek b{
font-family:var(--pismo-mono); font-size:10px; font-weight:700;
letter-spacing:.13em; text-transform:uppercase; color:var(--text-tlumeny);
}
.police-stitek span{
font-family:var(--pismo-mono); font-size:10px; color:var(--text-slaby);
}
/* ============================================================
CO TÍMHLE ZE STRÁNKY MIZÍ
-