/* Komponenta B: karta Imaginace s kresbou „ano, a…“ (okno karty a hra). Načítá ji prototyp (index.html,
   spolu s b.css, který napodobuje okolí stránky G) i stránka G (_work/260925 alternativy/alt-g.html).
   Proměnné barev a písem bere ze stránky (--modra-pera, --linka-svetla, --inkoust, --tma-*, --nadpis,
   --text, --dojezd, --otevreni); vlastní má jen papír a šířku hry. Pero a jeho značka z engine/linka2.css. */
:root {
  /* Papír: reliéfní textura, kterou dodal DF 260930 (painted-relief-texture.jpg, zmenšená na 1800 px do
     papir.webp). Barva pod ní je její průměr: drží ji background-color, ze kterého pero čte jas podkladu
     (linka2.js, jasPozadi; obrázky nečte), a nesou ji plochy, kde by obrázek neměl měřítko papíru. */
  --papir-barva: #F4F4F4;
  --papir-textura: var(--papir-barva) url("/interakce/B-imaginace/papir.webp") center / cover no-repeat;
  --sirka-hry: min(920px, 78vw, calc((100vh - 270px) * 16 / 9));
  --tlumene-papir: #555A63;
}
/* Stránka pod hrou stojí. Místo po posuvníku drží odsazení vpravo o jeho šířku (--b-posuvnik, 0 px bez
   posuvníku; nastaví skript při otevření), jinak by stránka poskočila. Ne scrollbar-gutter: ten zmenší
   i jednotky vw, stránka se pod hrou přeskládá a po odemčení ji ukotvení scrollu posune (G: o 4 px).
   Na stránce G stojí i Lenis (LENIS.stop), jehož lenis.css dává zastavené stránce overflow: clip; přebití. */
html.b-zamceno, html.b-zamceno.lenis.lenis-stopped { overflow: hidden; padding-right: var(--b-posuvnik); }
/* Atribut hidden: prvky komponenty mají vlastní display, který by ho jinak přebil. */
:is(.b-zaclona, .b-scena, .b-scena *)[hidden] { display: none !important; }
.im-okno, :is(.im-okno, .b-scena) :is(button, input, select) { font: inherit; }

/* ---------- okno karty Imaginace: papír místo fotky ---------- */
.im-okno { position: relative; display: block; width: 100%; overflow: hidden; border: 0; padding: 0; background: var(--papir-textura); color: var(--inkoust); cursor: pointer; text-align: center; --linka: var(--modra-pera); }
.im-vyzva { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 26px; transition: opacity 240ms ease; }
.im-vyzva strong { max-width: 15em; font-family: var(--nadpis); font-variation-settings: "wdth" 94, "opsz" 36; font-weight: 660; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
/* Na co kliknout: plné tlačítko v barvě pera, kolem něj pomalu pulzuje kruh. */
.im-start { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 17px 10px 14px; background: var(--modra-pera); color: #FFFFFF; font-size: 15px; font-weight: 600; line-height: 1.2; animation: im-pulz 2400ms ease-out infinite; transition: background-color 200ms ease, transform 200ms var(--dojezd); }
.im-start svg { width: 17px; height: 17px; flex: none; }
.im-okno:hover .im-start, .im-okno:focus-visible .im-start { background: #1E36A8; transform: translateY(-1px); }
@keyframes im-pulz { 0% { box-shadow: 0 0 0 0 rgb(39 67 200 / 0.45); } 70%, 100% { box-shadow: 0 0 0 14px rgb(39 67 200 / 0); } }
.im-vyzva-2 { margin-top: 10px; font-size: 13px; font-weight: 540; color: var(--tlumene-papir); }
.im-kresba { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.im-kresba path { fill: var(--linka); }
.im-limit { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px 30px; background: var(--papir-textura); font-family: var(--nadpis); font-variation-settings: "wdth" 94, "opsz" 36; font-weight: 640; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; opacity: 0; transition: opacity 280ms ease; pointer-events: none; }
.im-znovu { position: absolute; top: 9px; right: 10px; padding: 3px 9px; font-size: 12px; font-weight: 600; color: var(--modra-pera); background: rgb(255 255 255 / 0.9); opacity: 0; transform: translateY(-3px); transition: opacity 200ms ease, transform 200ms ease; }
.im-okno.hotovo .im-vyzva { opacity: 0; }
.im-okno.hotovo .im-kresba { opacity: 1; }
.im-okno.hotovo:hover .im-znovu, .im-okno.hotovo:focus-visible .im-znovu { opacity: 1; transform: none; }
.im-okno.limit .im-limit { opacity: 1; }
.im-okno.limit .im-znovu { opacity: 0 !important; }
/* Vlastní pero karty (LINKA2.znacka, dítě okna; jen samostatný prototyp) jen nad prázdným papírem s výzvou. */
.im-okno.hotovo > :is(.pero-aura, .pero-svetlo, .pero-hrot), .im-okno.limit > :is(.pero-aura, .pero-svetlo, .pero-hrot) { opacity: 0 !important; }
/* Papír je během hry venku z karty: okno zůstane prázdné. */
.im-okno.venku { background: #23252C; }
.im-okno.venku > * { opacity: 0 !important; transition: none; }

/* ---------- hra ---------- */
/* Závoj: pás workshopů ustoupí (ztmavne a rozostří se), aby se nadpis stránky nepletl s hlavičkou hry. */
.b-zaclona { position: fixed; inset: 0; z-index: 40; background: rgb(6 7 10 / 0.84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 420ms ease; }
.b-zaclona.otevrena { opacity: 1; }
.b-scena { position: fixed; inset: 0; z-index: 41; display: grid; place-items: center; padding: 20px; color: var(--tma-text); font-family: var(--text); font-size: 18px; line-height: 1.55; }
.b-scena :is(p, h2, figure) { margin: 0; }
/* Pero stránky (dítě body, jen na stránce G), které si hra půjčila: nad hrou. */
html.b-zamceno body > .pero-aura, html.b-zamceno body > .pero-svetlo { z-index: 43; }
html.b-zamceno body > .pero-hrot { z-index: 44; }
.b-obal { position: relative; width: var(--sirka-hry); display: flex; flex-direction: column; gap: 12px; outline: none; }
.b-obal > :not(.b-papir) { opacity: 0; transition: opacity 260ms ease; }
.b-scena.otevrena .b-obal > :not(.b-papir) { opacity: 1; transition-delay: 280ms; }
.b-hlava { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 34px; }
.b-kolo-hlava { display: flex; align-items: center; gap: 18px; }
.b-titulek { font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 36; font-size: 26px; font-weight: 660; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; transform-origin: left center; }
/* Nové kolo: titulek v hlavičce krátce naskočí a zazáří (oznámení kola nesmí být přes papír, DF 260930). */
.b-titulek.zmena { animation: b-titulek 900ms var(--dojezd); }
@keyframes b-titulek { 0% { transform: scale(1.22); color: var(--linka-svetla); } 60% { color: var(--linka-svetla); } 100% { transform: none; color: inherit; } }
/* Ukazatel kol: dílek na kolo, v něm půlka „vy“ (světle modrá) a půlka „AI“ (bílá), jako odpočet pod papírem. */
.b-kola { display: flex; gap: 10px; }
.b-kolo { display: flex; gap: 3px; }
.b-kolo i { width: 26px; height: 7px; background: var(--tma-vlasec); transition: background-color 260ms ease; }
.b-kolo i:first-child:is(.hotovo, .aktivni) { background: var(--linka-svetla); }
.b-kolo i:last-child:is(.hotovo, .aktivni) { background: #FFFFFF; }
.b-kolo i.aktivni { animation: b-blik 900ms ease-in-out infinite alternate; }
@keyframes b-blik { from { opacity: 0.3; } to { opacity: 1; } }
.b-hlava-prava { display: flex; align-items: center; gap: 12px; }
.b-stav { font-size: 15px; color: var(--tma-text2); text-align: right; }
/* AI přemýšlí: tři tečky vpravo nahoře (DF 260930). */
.b-tecky { display: none; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgb(255 255 255 / 0.1); }
.b-hlava.premysli .b-tecky { display: inline-flex; }
.b-tecky i { width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; animation: b-tecka 1100ms ease-in-out infinite; }
.b-tecky i:nth-child(2) { animation-delay: 160ms; }
.b-tecky i:nth-child(3) { animation-delay: 320ms; }
@keyframes b-tecka { 0%, 60%, 100% { transform: none; opacity: 0.35; } 30% { transform: translateY(-5px); opacity: 1; } }
.b-stav.upozorneni { color: #FFFFFF; animation: b-cuk 360ms ease; }
@keyframes b-cuk { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.b-zavrit { position: fixed; top: 16px; right: 20px; z-index: 42; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.08); color: var(--tma-text); font-size: 26px; line-height: 1; cursor: pointer; transition: background-color 200ms ease; }
.b-zavrit:hover { background: rgb(255 255 255 / 0.16); }

/* Papír: přes FLIP se zvětší z okna karty (transformaci nastavuje skript). Kurzor fixu jen, když se kreslí. */
.b-papir { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--papir-textura); --linka: var(--modra-pera); transform-origin: 0 0; transition: transform 560ms var(--otevreni); touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 34px 90px -30px rgb(0 0 0 / 0.7); }
.b-papir.kresli { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='5' fill='none' stroke='%232743C8' stroke-width='1.6'/%3E%3Ccircle cx='10' cy='10' r='1.4' fill='%232743C8'/%3E%3C/svg%3E") 10 10, crosshair; }
.b-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.b-cara { fill: var(--linka); }
.b-konec { fill: none; stroke: var(--modra-pera); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 240ms ease; }
.b-papir.navaz .b-konec { opacity: 0.55; animation: b-pulz 1400ms ease-in-out infinite; }
.b-papir.navaz.naleha .b-konec { opacity: 1; stroke-width: 4; }
@keyframes b-pulz { 0%, 100% { transform: scale(0.8); } 50% { transform: scale(1.12); } }
/* Výzva u kurzoru, když má čtenář kreslit (DF 260930): bublina vpravo nahoře od kurzoru s ocáskem k němu,
   jede s myší; jakmile čtenář začne kreslit, zmizí. U pravého okraje okna se přehodí na levou stranu kurzoru.
   Polohu (left a top = bod kurzoru) nastavuje skript. */
.b-bublina { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 220ms ease; }
.b-bublina.ukaz { opacity: 1; }
.b-bublina-telo { position: absolute; left: 18px; bottom: 14px; display: flex; flex-direction: column; gap: 1px; padding: 9px 14px 10px; background: var(--inkoust); color: #FFFFFF; white-space: nowrap; box-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.45); transform-origin: 0 100%; }
.b-bublina.ukaz .b-bublina-telo { animation: b-bublina 380ms var(--dojezd); }
.b-bublina-telo::after { content: ""; position: absolute; left: -7px; bottom: -7px; width: 14px; height: 14px; background: inherit; clip-path: polygon(0 100%, 50% 0, 100% 50%); }
.b-bublina.vlevo .b-bublina-telo { left: auto; right: 18px; transform-origin: 100% 100%; }
.b-bublina.vlevo .b-bublina-telo::after { left: auto; right: -7px; clip-path: polygon(100% 100%, 0 50%, 50% 0); }
.b-bublina b { font-size: 16px; font-weight: 650; }
.b-bublina span { font-size: 13px; color: var(--linka-svetla); }
.b-bublina.naleha .b-bublina-telo { animation: b-cuk 360ms ease; }
@keyframes b-bublina { from { transform: scale(0.85) translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Vlastní pero hry (LINKA2.znacka, dítě papíru; jen samostatný prototyp): skryté, dokud papír neleží na místě. */
.b-papir.pero-skryte > :is(.pero-aura, .pero-svetlo, .pero-hrot) { opacity: 0 !important; transition: opacity 160ms ease; }

/* Odpočet: kolik zbývá z tahu (--zbyva 1 až 0 nastavuje skript). */
.b-cas { position: relative; height: 3px; background: var(--tma-vlasec); overflow: hidden; }
.b-cas i { position: absolute; inset: 0; background: var(--linka-svetla); transform-origin: left; transform: scaleX(var(--zbyva, 1)); }
.b-cas.ai i { background: #FFFFFF; }
.b-cas.klid i { opacity: 0.35; }

.b-dole { position: relative; min-height: 132px; }
.b-pozn { position: absolute; left: 0; right: 0; bottom: 0; font-size: 12.5px; color: var(--tma-tlumene); }

/* Konec hry: dvě stejná pole vedle sebe, „Vy“ píše čtenář, „AI“ píše jako na klávesnici, ale rozmazaně,
   takže není vidět co; po čtenářově odpovědi se text AI zaostří. Pole mají papír ve stejném měřítku jako
   zvětšený papír hry. */
.b-tipy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 20px; }
.b-pole { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.b-stitek { font-size: 14px; font-weight: 600; color: var(--tma-text); }
.b-stitek span { margin-left: 6px; font-weight: 500; color: var(--tma-tlumene); }
.b-box { position: relative; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 0; background: var(--papir-barva) url("/interakce/B-imaginace/papir.webp") 0 0 / var(--sirka-hry) auto; color: var(--inkoust); --linka: var(--modra-pera); }
.b-box input { flex: 1; min-width: 0; height: 100%; padding: 0 16px; border: 0; background: transparent; color: var(--inkoust); font-size: 19px; font-weight: 600; outline: none; }
.b-box input::placeholder { color: #7C818B; font-weight: 400; }
.b-pole:focus-within .b-box { box-shadow: 0 0 0 2px var(--linka-svetla); }
.b-box button, .b-tlacitko { padding: 10px 18px; border: 0; background: var(--modra-pera); color: #FFFFFF; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 200ms ease; }
.b-box button:hover, .b-tlacitko:hover { background: #3553DB; }
.b-tlacitko.b-vedlejsi { background: rgb(255 255 255 / 0.1); }
.b-tlacitko.b-vedlejsi:hover { background: rgb(255 255 255 / 0.18); }
.b-tipy.odeslano .b-box button { display: none; }
.b-tipy.odeslano .b-box input { cursor: default; }
.b-ai-radek { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 16px; overflow: hidden; white-space: nowrap; }
.b-ai-text { font-size: 19px; font-weight: 600; color: var(--modra-pera); filter: blur(6px); opacity: 0.85; transition: filter 520ms ease, opacity 520ms ease; }
.b-kurzor { flex: none; width: 2px; height: 22px; margin-left: 3px; background: var(--modra-pera); animation: b-kurzor 1s steps(1) infinite; }
@keyframes b-kurzor { 50% { opacity: 0; } }
.b-hotovo { flex: none; margin-right: 6px; font-size: 14px; font-weight: 600; color: var(--modra-pera); opacity: 0; transition: opacity 300ms ease; }
.b-tipy.ai-hotovo .b-hotovo { opacity: 1; }
.b-tipy.ai-hotovo .b-kurzor, .b-tipy.odhaleno .b-hotovo { display: none; }
.b-tipy.odhaleno .b-ai-text { filter: none; opacity: 1; }
.b-dokarty { grid-column: 2; justify-self: end; margin-top: 6px; visibility: hidden; }
.b-tipy.odhaleno .b-dokarty { visibility: visible; }

.b-chyba { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.b-chyba p { flex-basis: 100%; font-size: 15px; color: var(--tma-text2); }
.b-chyba.limit button { display: none; }
.b-chyba.limit p { font-family: var(--nadpis); font-size: 28px; font-weight: 640; letter-spacing: -0.02em; color: var(--tma-text); }

@media (prefers-reduced-motion: reduce) {
  .b-papir { transition: none; }
  .b-konec, .im-start, .b-kolo i.aktivni { animation: none !important; }
}