@font-face{font-family:Alegreya;font-style:normal;font-weight:400;font-display:swap;src:url(font/alegreya-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Alegreya;font-style:normal;font-weight:400;font-display:swap;src:url(font/alegreya-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Alegreya;font-style:normal;font-weight:700;font-display:swap;src:url(font/alegreya-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Alegreya;font-style:normal;font-weight:700;font-display:swap;src:url(font/alegreya-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--g-ui_ramecek:url(gfx/p/ui_ramecek.webp);--g-ui_tlacitko:url(gfx/p/ui_tlacitko.webp);--g-ui_tlacitko_on:url(gfx/p/ui_tlacitko_on.webp);--g-ui_tlacitko_off:url(gfx/p/ui_tlacitko_off.webp);--ink:#1a1410;--brass:#c9973a;--brass2:#e8c67a;--cream:#f4e9d2;--rose:#b8403f;--smoke:rgba(20,16,12,.82);--font:"Georgia","Times New Roman",serif;--ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:var(--ink);color:var(--cream);font-family:var(--ui);overflow:hidden;overscroll-behavior:none}
#hra{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.ov{position:fixed;left:0;right:0;pointer-events:none;z-index:5}
#ukol{bottom:max(10px,env(safe-area-inset-bottom));left:10px;right:150px;font:600 15px/1.25 var(--ui);color:var(--cream);background:rgba(20,16,12,.72);border:1px solid rgba(201,151,58,.55);border-radius:10px;padding:8px 12px;max-width:560px;text-shadow:0 1px 2px #000}
#ukol b{color:var(--brass2);font-weight:700;margin-right:6px}
#ukol:empty{display:none}
.btn{position:fixed;z-index:6;pointer-events:auto;border:2px solid var(--brass);background:rgba(30,22,16,.85);color:var(--brass2);font:700 15px var(--ui);border-radius:12px;padding:10px 14px;cursor:pointer;user-select:none;box-shadow:0 2px 0 #000}
.btn:active{transform:translateY(1px)}
#btnKabelka{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));min-width:120px}
#btnKabelka small{display:block;font-weight:400;font-size:12px;color:var(--cream)}
#btnPauza{right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));padding:8px 12px}
.panel{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:var(--smoke);pointer-events:auto;padding:16px}
.panel[hidden]{display:none}
.box{background:#2a2017;border:3px solid var(--brass);border-radius:16px;padding:20px 22px;max-width:520px;width:100%;box-shadow:0 10px 40px #000;text-align:center}
.box h2{font:700 26px var(--font);color:var(--brass2);margin:0 0 6px;letter-spacing:.5px}
.box p{margin:6px 0 12px;font-size:16px;line-height:1.4}
.box .ukolk{font:600 17px var(--ui);color:var(--cream);background:rgba(201,151,58,.15);border-radius:10px;padding:10px;margin:8px 0 14px}
.box .pok{opacity:.75;font-size:13px;margin-top:10px}
.box button,.box a.zak{display:block;width:100%;margin:8px 0 0;padding:12px 14px;font:700 16px var(--ui);color:var(--ink);background:var(--brass2);border:0;border-radius:12px;cursor:pointer;text-decoration:none}
.box button.sek{background:transparent;color:var(--cream);border:2px solid var(--brass)}
.box button[disabled]{opacity:.45;cursor:not-allowed}
.box button .proc{display:block;font-weight:400;font-size:12px;opacity:.85}
.box a.zak{background:var(--rose);color:#fff}
.sch{display:flex;gap:10px;justify-content:center;margin:10px 0}
.sch div{width:76px;padding:8px 4px;border:2px solid var(--brass);border-radius:10px;font-size:12px;line-height:1.2}
.sch div i{display:block;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;border:3px solid var(--brass2);background:#555;font-style:normal}
.sch div.ma i{background:var(--brass2)}
.sch div.dk i{border-radius:6px}
.sch div.dk.ma i{background:#7fb77e;border-color:#cfe8ce}
.sch div.ne{opacity:.45}
.jak{text-align:left;font-size:15px;line-height:1.45}
.jak li{margin:4px 0}
.hr{height:1px;background:rgba(201,151,58,.4);margin:12px 0}
/* --- grafika SeaArt (v2) --- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.box{background:#14203a;border:26px solid transparent;border-image:var(--g-ui_ramecek) var(--s-ui_ramecek,50) fill / 26px stretch;box-shadow:0 14px 50px rgba(0,0,0,.7);border-radius:0;padding:10px 12px;max-height:calc(100vh - 32px);overflow:auto}
.box h2{text-shadow:0 2px 0 #000}
.box p,.box .ukolk,.jak{color:#f4e9d2;text-shadow:0 1px 2px #000}
.box .ukolk{background:rgba(10,14,30,.45);border:1px solid rgba(201,151,58,.35)}
img.let{display:block;max-width:100%;height:auto;margin:0 auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.65))}
#kartaNazev img.let{max-height:76px}
#kartaNazev img.let.nadpis{max-height:min(34vh,250px)}
#kartaPok img.tl{max-height:42px;margin-top:4px}
#karta.titul .box{background:transparent;border-image:none;border:0;box-shadow:none}
#karta.titul{background:rgba(10,8,6,.25)}
#karta.titul #kartaPok img.tl{max-height:70px;animation:dych 1.6s ease-in-out infinite}
@keyframes dych{50%{transform:scale(1.06)}}
#volbaNazev img.let{max-height:70px}
#kabelka h2 img.let{max-height:52px}
.box button,.box a.zak{background:transparent;color:#f4e9d2;border:0;border-radius:0;border-style:solid;border-width:12px 34px;border-image:var(--g-ui_tlacitko) var(--s-ui_tlacitko,52 120) fill / 12px 34px stretch;padding:4px 6px;text-shadow:0 1px 2px #000;min-height:56px}
.box button:hover,.box button:focus-visible{border-image-source:var(--g-ui_tlacitko_on)}
.box button[disabled]{border-image-source:var(--g-ui_tlacitko_off);color:#d8d8d0;opacity:.75}
.box button.sek{border-image-source:var(--g-ui_tlacitko_off);color:#f4e9d2;border-color:transparent}
.box button.tlet img{max-height:38px;display:block;margin:0 auto}
.box button.gr{display:grid;grid-template-columns:44px 1fr;align-items:center;text-align:left;column-gap:8px}
.box button.gr img{grid-row:span 2;width:44px;height:44px;object-fit:contain}
.box a.zak{border-image-source:var(--g-ui_tlacitko_on);color:#fff;background:transparent}
#btnKabelka{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;text-align:left}
#btnKabelka img{width:40px;height:40px;object-fit:contain}
.konecbox img.ilu{display:block;width:100%;border-radius:6px;margin:0 0 6px;box-shadow:0 4px 14px rgba(0,0,0,.6)}
.konecbox img.dohrano{max-height:64px;margin:-30px auto 0;position:relative}
#konecNazev img.let{max-height:58px}
.sch div img{display:block;width:40px;height:40px;object-fit:contain;margin:0 auto 4px}
.sch div{border-color:rgba(201,151,58,.6);background:rgba(10,14,30,.35)}
@media (max-width:520px){.konecbox img.ilu{max-height:20vh;object-fit:cover}.sch div{width:64px;font-size:11px}.konecbox img.dohrano{max-height:48px}}
@media (max-height:520px){#kartaNazev img.let.nadpis{max-height:30vh}.konecbox img.ilu{max-height:28vh;object-fit:cover}}
body.titul #btnKabelka,body.titul #btnPauza{display:none}
#karta.titul #kartaPok img.tl{filter:drop-shadow(0 0 8px rgba(255,226,160,.85)) drop-shadow(0 2px 3px #000)}
#karta.titul .ukolk{background:rgba(10,8,6,.55)}
/* --- volba doby (Pohádka / Odboj): titulka + pauza --- */
.doba{margin:10px 0 4px}
.doba[hidden]{display:none}
.doba .dobaTl{display:flex;gap:10px;justify-content:center}
.box .doba .dobaTl button{width:auto;flex:1 1 0;max-width:210px;margin:0;min-height:58px;display:flex;align-items:center;justify-content:center;font:700 19px var(--font);letter-spacing:.5px}
.box .doba .dobaTl button img{max-height:34px;max-width:100%;display:block}
.box .doba .dobaTl button[aria-pressed="true"]{border-image-source:var(--g-ui_tlacitko_on);filter:drop-shadow(0 0 6px rgba(255,214,140,.7))}
.box .doba .dobaTl button[aria-pressed="false"]{border-image-source:var(--g-ui_tlacitko_off);opacity:.8}
.doba .dobaPopis{font-size:13px;opacity:.85;margin:6px 0 0}
.doba .dobaPoz{font-size:13px;color:#ffd9a0;margin:8px 0 0}
.doba .dobaPoz button{margin-top:6px}
#karta.titul .doba .dobaPopis{text-shadow:0 1px 3px #000}
.box .doba .dobaTl button{border-width:10px 18px;border-image-width:10px 18px;padding:2px 4px}
@media (max-width:520px){.doba .dobaTl{gap:5px}.box .doba .dobaTl button{min-height:46px;border-width:8px 10px;border-image-width:8px 10px;padding:1px 2px}.box .doba .dobaTl button img{max-height:30px}}

/* --- kolo 2: knižní písmo Alegreya všude, malované rámy místo CSS boxů ---
   Rámy/tlačítka se berou z --g-ui_* (hra.js je nastaví podle UI_SADA – zatím Pohádka pro všechny doby;
   po dodání listů ui_hud/ui_panely stačí v hra.js přepnout UI_SADA a doplnit --g-ui_poznamka/--g-ui_stitek). */
:root{--ui:"Alegreya",Georgia,serif;--font:"Alegreya",Georgia,serif}
html,body{font-family:var(--ui)}
#ukol{background:transparent;border:0;border-radius:0;border-style:solid;border-width:18px 22px;border-image:var(--g-ui_poznamka,var(--g-ui_ramecek)) var(--s-ui_poznamka,50) fill / 18px 22px stretch;padding:0 4px;font:700 16px/1.25 var(--ui);max-width:540px;right:160px}
#ukol b{font-weight:700}
body.titul #ukol{display:none}
.btn{background:transparent;border:0;border-radius:0;border-style:solid;border-width:10px 24px;border-image:var(--g-ui_tlacitko) var(--s-ui_tlacitko,52 120) fill / 10px 24px stretch;box-shadow:none;color:#f4e9d2;text-shadow:0 1px 2px #000;font:700 16px var(--ui)}
.btn:active{border-image-source:var(--g-ui_tlacitko_on)}
#btnKabelka{padding:0 4px 0 0;min-width:136px}
#btnKabelka small{color:#f4e9d2;font-size:13px}
#btnPauza{padding:2px 4px;min-width:64px;font-size:20px;letter-spacing:2px}
.box h2{font-family:var(--font)}
.box .ukolk{background:transparent;border:0;border-radius:0;border-style:solid;border-width:10px 24px;border-image:var(--g-ui_tlacitko_off) var(--s-ui_tlacitko,52 120) fill / 10px 24px stretch;font:700 16px var(--ui);padding:2px 4px}
#karta.titul .ukolk{display:none}
.box button.sek{opacity:1;border-image-source:var(--g-ui_tlacitko_off)}
.box button,.box a.zak{font-family:var(--ui);font-size:17px}
.box button .proc{font-size:13px}
.sch div{background:transparent;border:0;border-radius:0;border-style:solid;border-width:8px 10px;border-image:var(--g-ui_tlacitko_off) var(--s-ui_tlacitko,52 120) fill / 8px 10px stretch;font-size:12px}
.hr{display:none}
.jak{font-size:16px}
.dotyk .pc{display:none}
/* mobil: větší písmo, kratší pauza bez přetékání */
@media (max-width:520px){
 #ukol{font-size:15px;right:150px;left:8px;border-width:14px 16px;border-image-width:14px 16px}
 .box{padding:6px 8px;border-width:20px;border-image-width:20px}
 .box h2{font-size:22px}
 .jak{font-size:15px;line-height:1.35;padding-left:20px;margin:6px 0}
 .box p{font-size:15px}
 #pauzaDal img{max-height:30px}
 .box button,.box a.zak{min-height:48px;font-size:16px}
}

/* --- kolo 3: UI každé doby (rámy, tlačítka, poznámky, pauza) --- */
#ukol{color:#2a1d12;text-shadow:none;font-weight:700}
#ukol img.letu{height:26px;vertical-align:-6px;margin-right:6px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.box .ukolk{border-image:var(--g-ui_poznamka) var(--s-ui_poznamka,40) fill / 14px 18px stretch;color:#2a1d12;text-shadow:none;padding:4px 8px}
#btnPauza{border:0;border-image:none;background:var(--g-ui_pauza) center/contain no-repeat;width:58px;height:58px;min-width:0;padding:0}
#btnPauza:active{transform:scale(.94)}
.sch div{border-image:var(--g-ui_stitek,var(--g-ui_tlacitko_off)) var(--s-ui_stitek,52 120) fill / 8px 10px stretch;color:#f4e9d2}
.box button.tlet img{max-height:40px}
#pauza h2 img.let{max-height:56px}
/* titulka: nadpis vedle Popelky (Odboj: Popelka vlevo → karta vpravo; Budoucnost: Popelka vpravo → karta vlevo) */
@media (min-aspect-ratio:1/1){
 body[data-doba="o"] #karta.titul{justify-content:flex-end;padding-right:3vw}
 body[data-doba="b"] #karta.titul{justify-content:flex-start;padding-left:3vw}
 body[data-doba="o"] #karta.titul .box,body[data-doba="b"] #karta.titul .box{max-width:min(44vw,520px)}
}
/* mobil: titulka nahoře, obrázek s Popelkou dole */
@media (max-aspect-ratio:1/1){ body[data-doba="o"] #karta.titul,body[data-doba="b"] #karta.titul{align-items:flex-start;padding-top:4vh} }

/* --- kolo 4: popisky na cedulkách, kontrast, rám vedlejších voleb --- */
.doba .dobaPopis{display:inline-block;border-style:solid;border-width:8px 14px;border-image:var(--g-ui_stitek) var(--s-ui_stitek,30 30) fill / 8px 14px stretch;color:#f4e9d2;padding:0 4px;opacity:1;font-weight:700;max-width:100%}
.doba .dobaPoz{border-style:solid;border-width:10px 14px;border-image:var(--g-ui_poznamka) var(--s-ui_poznamka,40) fill / 10px 14px stretch;color:#2a1d12;text-shadow:none;padding:0 4px}
.box button.sek{border-style:solid;border-width:12px 34px;border-image-width:12px 34px;border-color:transparent}
body[data-doba="b"] #btnPauza{filter:brightness(1.45) contrast(1.25) drop-shadow(0 0 3px rgba(240,250,245,.6))}
body[data-doba="p"] img.let,body[data-doba="p"] .box button.tlet img,body[data-doba="p"] #kartaPok img{filter:brightness(1.55) saturate(1.15) drop-shadow(0 0 2px #140a03) drop-shadow(0 0 2px #140a03) drop-shadow(0 2px 3px rgba(0,0,0,.85))}
body[data-doba="b"] .box{background:#0f2a2c}
.box button.sek{border-image-slice:var(--s-ui_tlacitko,52 120) fill;border-image-repeat:stretch}

/* --- kolo 6 --- */
#karta.titul #kartaPok{display:inline-block;border-style:solid;border-width:12px 34px;border-image:var(--g-ui_tlacitko_on) var(--s-ui_tlacitko,52 120) fill / 12px 34px stretch;padding:2px 14px;margin-top:10px;cursor:pointer}
#karta.titul #kartaPok img.tl{max-height:56px;animation:none}
.box button.sek{opacity:.92;font-size:15px;min-height:46px}
.konecbox p{padding:0 8%}
.konecbox img.dohrano{filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 3px #000) drop-shadow(0 2px 4px rgba(0,0,0,.9));max-height:54px}
.konecbox img.vin{display:block;max-height:110px;margin:4px auto 0}
.pecet{display:flex;gap:6px;justify-content:center;margin:2px 0 6px}
.pecet img{width:46px;height:46px;object-fit:contain}
.pecet span{font-size:30px;line-height:1;color:#ffd24d;text-shadow:0 0 3px #000,0 2px 2px #000}
.pecet .ne{opacity:.25;filter:grayscale(1)}
body[data-doba="b"] #btnPauza{filter:brightness(1.8) contrast(1.35) drop-shadow(0 0 2px #06191a) drop-shadow(0 0 4px rgba(240,250,245,.7))}

/* vedlejší tlačítka z listu ui_pecet dané doby; stuha pod „Dohráno!" */
.box button.sek{border-image-source:var(--g-ui_tlacitko_sek,var(--g-ui_tlacitko_off));border-image-slice:var(--s-ui_tlacitko_sek,var(--s-ui_tlacitko,52 120)) fill;border-width:12px 28px;border-image-width:12px 28px}
.box button.sek:hover,.box button.sek:focus-visible,.box button.sek:active{border-image-source:var(--g-ui_tlacitko_sek_on,var(--g-ui_tlacitko_on))}
/* kolo 6 – konec se vejde, vinětka celá, čitelná vedlejší tlačítka */
#konec{align-items:safe center;overflow-y:auto}
.konecbox img.ilu{flex:0 0 auto;height:auto;width:auto;max-width:100%;max-height:26vh;object-fit:contain;margin:0 auto 6px}
@media (max-width:520px){.konecbox img.ilu{max-height:22vh}}
.box button.sek{color:#2b1a0b;text-shadow:0 1px 0 rgba(255,245,225,.55);font-weight:700}
.konecbox{overflow-anchor:none}
body[data-doba="p"] .konecbox img.dohrano{max-height:88px;margin-top:-12px;filter:drop-shadow(0 0 2px #120a02) drop-shadow(0 2px 4px rgba(0,0,0,.9))}
@media (max-width:520px){body[data-doba="p"] .konecbox img.dohrano{max-height:66px}}
/* kolo 7 */
.pecet{flex-wrap:wrap;align-items:center}
.pecet img{width:60px;height:60px}
.pecet .ne{opacity:.8;filter:none}
.pecetN{display:table;margin:0 auto 8px;padding:6px 26px 9px;font:700 15px/1 var(--font,Alegreya),serif;color:#2b1a0b;border-style:solid;border-width:8px 22px;border-image:var(--g-ui_tlacitko_sek,var(--g-ui_tlacitko_off)) var(--s-ui_tlacitko_sek,var(--s-ui_tlacitko,52 120)) fill / 8px 22px stretch}
@media (max-width:520px){.pecet img{width:48px;height:48px}}
body[data-doba="p"] .konecbox img.dohrano{max-height:58px;max-width:78%;margin-top:-6px;filter:drop-shadow(0 0 2px #120a02) drop-shadow(0 2px 3px rgba(0,0,0,.9))}
@media (max-width:520px){body[data-doba="p"] .konecbox img.dohrano{max-height:44px}}
body[data-doba="p"] #karta.titul #kartaPok{filter:brightness(1.35) saturate(1.1)}
body[data-doba="p"] #karta.titul #kartaPok img.tl{filter:brightness(2.2) saturate(1.2) drop-shadow(0 0 1px #1a0c02) drop-shadow(0 0 6px rgba(255,230,160,.95)) drop-shadow(0 2px 2px #000)}

/* načítání: dokud nejsou obrázky scény, panely a tlačítka se neukazují (hra kreslí malovanou načítací obrazovku) */
body.nacita .panel,body.nacita .btn,body.nacita #ukol{visibility:hidden!important}
/* Pohádka: zlatý rám má široké ornamenty – text nesmí najíždět do rohů */
body[data-doba="p"] .box>p{padding:0 14px}
body[data-doba="p"] .jak{padding-right:14px}

/* --- zvuk: malované tlačítko vedle pauzy (prstenec doby + zvonek / tlampač / reproduktor); vypnuto = zhaslé --- */
#btnZvuk{right:calc(max(10px,env(safe-area-inset-right)) + 66px);top:calc(max(10px,env(safe-area-inset-top)) + 4px);width:50px;height:50px;min-width:0;padding:0;border:0;border-image:none;background:var(--g-ui_prsten) center/contain no-repeat;z-index:25;display:flex;align-items:center;justify-content:center}
#btnZvuk img{width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));transition:filter .2s,opacity .2s}
#btnZvuk:active{transform:scale(.94)}
#btnZvuk.vyp img{filter:grayscale(1) brightness(.55) drop-shadow(0 1px 2px rgba(0,0,0,.7));opacity:.7}
#btnZvuk.vyp{opacity:.8}
body[data-doba="b"] #btnZvuk{filter:brightness(1.3) drop-shadow(0 0 3px rgba(240,250,245,.5))}
body[data-doba="p"] #btnZvuk img{width:52%;height:66%}
body.nacita #btnZvuk{visibility:hidden}