/* Fotobudka: jedna stranka pro iPad, mobil i desktop, na vysku i na sirku.
 * Barvy, pisma, tvary a stiny prichazeji z konfigurace klienta jako CSS
 * promenne (config/types.ts Theme, nastavuje index.html). Tady je jen
 * rozvrzeni, ktere je pro vsechny klienty stejne. */
:root{
  --bg:#111; --card:#1a1a1a; --card-border:rgba(255,255,255,.2); --text:#fff; --muted:#999;
  --line:rgba(255,255,255,.2); --glow:none;
  --header-bg:transparent; --header-text:#fff; --header-border:transparent;
  --accent:#ccc; --accent-text:#111; --accent-border:#ccc;
  --ghost-bg:transparent; --ghost-text:#fff; --ghost-border:rgba(255,255,255,.4);
  --tile-bg:#1a1a1a; --tile-text:#fff; --tile-border:rgba(255,255,255,.2);
  --plate-text:#111; --overlay:rgba(0,0,0,.75);
  --radius-card:16px; --radius-tile:12px; --radius-button:999px;
  --shadow-button:none; --shadow-button-active:none; --shadow-card:none;
  --font-heading:system-ui,sans-serif; --font-body:system-ui,sans-serif;
  --heading-transform:uppercase; --tile-transform:none; --heading-tracking:.2em; --heading-weight:600;
  --top:max(env(safe-area-inset-top), 10px);
  --bot:max(env(safe-area-inset-bottom), 10px);
  --left:max(env(safe-area-inset-left), 12px);
  --right:max(env(safe-area-inset-right), 12px);
  --pata-v:26px;
}
*{ box-sizing:border-box; margin:0; padding:0;
   -webkit-user-select:none; user-select:none;
   -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; overflow:hidden; overscroll-behavior:none; touch-action:manipulation; }
body{ background:var(--bg); color:var(--text); font-family:var(--font-body);
      background-image:radial-gradient(120% 70% at 50% 0%, var(--glow) 0%, rgba(0,0,0,0) 62%); }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; color:inherit; }
h1,h3,.go,.ghost,.scena-nazev,.lab,.pata,.jazyk button{ font-family:var(--font-heading); }
h1,.go,.ghost,.lab{ text-transform:var(--heading-transform); letter-spacing:var(--heading-tracking); }

/* Cela appka je jeden tok shora dolu, zadne scrollovani. Zmensuje se jen
   karta, nikdy nadpis, sceny ani tlacitka. */
#app{ height:100dvh; display:flex; flex-direction:column; align-items:center;
      gap:clamp(8px,1.5vh,16px); padding:0 var(--right) var(--bot) var(--left);
      max-width:1400px; margin:0 auto; }

/* Hlavicka jde pres celou sirku, u nekterych brandu je to barevna lista. */
.hlava{ flex:none; width:calc(100% + var(--left) + var(--right)); margin:0 calc(-1 * var(--right)) 0 calc(-1 * var(--left));
        padding:var(--top) var(--right) 10px var(--left);
        background:var(--header-bg); color:var(--header-text); border-bottom:1px solid var(--header-border);
        display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.hlava h1{ grid-column:2; font-size:clamp(15px,2.2vh,24px); font-weight:var(--heading-weight); text-align:center; line-height:1.1; }
.jazyk{ grid-column:3; justify-self:end; display:flex; gap:6px; }
.jazyk button{ background:transparent; border:1.5px solid var(--ghost-border); color:var(--header-text); border-radius:var(--radius-button);
               padding:6px 11px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; min-height:32px; font-weight:600; }
.jazyk button.on{ background:var(--accent); color:var(--accent-text); border-color:var(--accent-border); }

/* Karta a QR. Vyska je cisty zbytek, sirku karty dopocitame z nej. */
.plocha{ flex:1 1 0; min-height:0; width:100%;
         display:grid; grid-template-rows:minmax(0,1fr);
         justify-items:stretch; align-items:stretch; gap:clamp(8px,1.4vh,16px); }
.plocha.s-qr{ grid-template-rows:minmax(0,1.35fr) minmax(0,1fr); }

/* Kartabox dostava vysku od gridu (ne od obsahu, jinak se mereni zacykli).
   --prostor meri ResizeObserver na skutecnem zbytku mista. */
.kartabox{ min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; }
.karta{ display:flex; flex-direction:column; box-shadow:var(--shadow-card); border-radius:var(--radius-card);
        width:min(100%, calc((var(--prostor, 55vh) - var(--pata-v)) * 3 / 4)); }
.stage{ position:relative; aspect-ratio:3/4; width:100%;
        background:var(--card); border-radius:var(--radius-card) var(--radius-card) 0 0; overflow:hidden;
        border:1px solid var(--card-border); border-bottom:0; }
body.bez-paty .stage{ border-radius:var(--radius-card); border-bottom:1px solid var(--card-border); }
body.bez-paty .karta{ width:min(100%, calc(var(--prostor, 55vh) * 3 / 4)); }
video,#nahled,#vysledek{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#nahled,#vysledek{ display:none; }
video.zrcadlo{ transform:scaleX(-1); }
#ramecek{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; display:none; z-index:4; }
#logo{ position:absolute; object-fit:contain; pointer-events:none; display:none; z-index:5; }

/* Paticka karty se stitkem. Je to soucast karty, ne fotky. */
.pata{ height:var(--pata-v); flex:none; display:flex; align-items:center; justify-content:center;
       background:var(--card); border:1px solid var(--card-border); border-top:0;
       border-radius:0 0 var(--radius-card) var(--radius-card);
       font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:500; }
body.bez-paty .pata{ display:none; }

/* Prepinac kamery v rohu karty. Velky terc na palec. */
.otoc{ position:absolute; right:10px; top:10px; z-index:7; width:48px; height:48px;
       border-radius:var(--radius-button); border:1.5px solid var(--ghost-border); background:rgba(0,0,0,.45);
       color:#fff; font-size:22px; line-height:1; }

/* Odpocet pred snimkem. */
.odpocet{ position:absolute; inset:0; display:none; align-items:center; justify-content:center;
          z-index:6; font-family:var(--font-heading); font-size:clamp(90px,22vh,220px); font-weight:var(--heading-weight);
          color:var(--accent); text-shadow:0 6px 30px rgba(0,0,0,.6); pointer-events:none; }
.odpocet.on{ display:flex; }
.odpocet.slovo{ font-size:clamp(34px,7vh,72px); letter-spacing:.1em; text-transform:var(--heading-transform); }

/* Cekani na AI trva klidne pul minuty, proto hlasky a ukazatel. */
.stav{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center;
       gap:clamp(10px,2vh,20px); background:var(--overlay); z-index:6; text-align:center; padding:22px; }
.stav.on{ display:flex; }
.stav-hlaska{ font-size:clamp(15px,2.5vh,26px); color:var(--text); font-weight:600; min-height:2.6em; display:flex; align-items:center; }
.pruh{ width:min(78%,320px); height:8px; border-radius:var(--radius-button); background:rgba(255,255,255,.18); overflow:hidden; }
.pruh > i{ display:block; height:100%; width:0%; border-radius:var(--radius-button); background:var(--accent); transition:width .45s ease; }

/* QR plato: vzdy bile, cerny kod, klidova zona. Nikdy pres fotku. */
.qrbox{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px;
        background:#fff; border-radius:var(--radius-card); padding:14px 18px 10px; overflow:hidden;
        justify-self:center; align-self:center; max-height:100%; min-height:0; max-width:100%; box-shadow:var(--shadow-card); }
.qrbox.on{ display:flex; }
#qr{ min-height:0; flex:none; display:flex; align-items:center; justify-content:center; }
/* Velikost kodu nastavuje JS podle mista, ktere na plato zbylo (viz
   velikostQR v app.js), at plato neni vetsi nez kod a kod ne mensi nez 120 px. */
#qr svg{ display:block; width:var(--qr, 200px); height:var(--qr, 200px); }
.qrbox small{ color:var(--plate-text); font-weight:600; font-size:clamp(12px,1.7vh,17px); text-align:center; font-family:var(--font-body); }

/* Sceny: velke terce na prst, nahled + nazev. */
.lab{ flex:none; color:var(--muted); font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; }
.sceny{ flex:none; display:grid; grid-template-columns:repeat(2,1fr);
        gap:clamp(6px,1.1vh,12px); width:100%; max-width:820px; }
.scena{ display:flex; align-items:center; gap:10px; background:var(--tile-bg); color:var(--tile-text);
        border:1.5px solid var(--tile-border); border-radius:var(--radius-tile); padding:6px 12px 6px 6px; text-align:left;
        min-height:clamp(52px,7.4vh,76px); }
.scena img{ width:clamp(40px,5.6vh,60px); height:clamp(40px,5.6vh,60px); border-radius:calc(var(--radius-tile) * .6); object-fit:cover; flex:none; background:var(--bg); }
.scena-nazev{ font-size:clamp(15px,2.1vh,21px); font-weight:var(--heading-weight); line-height:1.15; text-transform:var(--tile-transform); letter-spacing:calc(var(--heading-tracking) * .3); }
.scena-rezim{ font-size:10px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; font-family:var(--font-body); }
.scena.on{ background:var(--accent); color:var(--accent-text); border-color:var(--accent-border); box-shadow:var(--shadow-button); }
.scena.on .scena-rezim{ color:var(--accent-text); opacity:.75; }
.scena:disabled{ opacity:.45; }

/* Po vyfoceni ma host videt fotku a kod, ne vyber scen. */
body.hotovo .sceny, body.hotovo .lab{ display:none; }

/* Ovladani dole, palcem dosazitelne. */
.ovladani{ flex:none; display:flex; gap:12px; align-items:center; justify-content:center; width:100%; }
.go{ background:var(--accent); color:var(--accent-text); border:2px solid var(--accent-border); border-radius:var(--radius-button);
     padding:clamp(13px,2.1vh,20px) clamp(30px,6vw,72px); box-shadow:var(--shadow-button); transition:transform .1s, box-shadow .1s;
     font-size:clamp(18px,2.8vh,30px); font-weight:var(--heading-weight);
     min-height:60px; flex:1 1 auto; max-width:520px; }
.go:active{ box-shadow:var(--shadow-button-active); transform:translate(2px,2px); }
.go:disabled{ opacity:.45; }
.ghost{ background:var(--ghost-bg); color:var(--ghost-text); border:2px solid var(--ghost-border); border-radius:var(--radius-button);
        padding:clamp(11px,1.9vh,18px) clamp(18px,4vw,34px); font-size:clamp(15px,2.2vh,22px); min-height:60px; font-weight:var(--heading-weight); }
.mala{ min-height:40px; padding:8px 16px; font-size:14px; }
.hlaska{ flex:none; min-height:1.2em; color:var(--muted); text-align:center; font-size:clamp(12px,1.7vh,16px); padding:0 44px; }

#gear{ position:fixed; right:calc(var(--right) - 2px); bottom:calc(var(--bot) - 2px); z-index:20; width:36px; height:36px;
       border-radius:var(--radius-button); border:1px solid var(--line); background:rgba(0,0,0,.5);
       color:var(--muted); font-size:17px; line-height:1; opacity:.35; transition:opacity .15s ease; }
#gear:hover,#gear:focus-visible{ opacity:1; color:var(--accent); }

/* Uzka sirka na vysku. */
@media (max-width:420px){ .scena-nazev{ font-size:13px; } .scena{ min-height:48px; } .hlava h1{ letter-spacing:calc(var(--heading-tracking) * .5); font-size:14px; } }
/* Na sirku: karta a QR vedle sebe, sceny do jedne rady. */
@media (min-aspect-ratio: 1/1){
  .plocha{ grid-auto-flow:column; grid-template-rows:minmax(0,1fr); }
  .plocha.s-qr{ grid-template-columns:minmax(0,1fr) auto; grid-template-rows:minmax(0,1fr); }
  .sceny{ grid-template-columns:repeat(4,1fr); max-width:1100px; }
}
@media (min-aspect-ratio: 1/1) and (max-height:520px){
  .sceny{ grid-template-columns:repeat(4,1fr); } .scena img{ display:none; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important; } }

/* ---- Admin ---- */
body.kiosk .admin{ display:none!important; }
.admin{ position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw); z-index:30; overflow:auto;
        background:var(--card); border-left:1px solid var(--line); padding:18px; display:flex; flex-direction:column; gap:18px;
        -webkit-user-select:text; user-select:text; }
.admin[hidden]{ display:none; }
.admin-hlava{ display:flex; justify-content:space-between; align-items:center; }
.admin h3{ font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.admin section{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:12px; }
.admin label{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.admin label.radek{ flex-direction:row; align-items:center; gap:8px; }
.admin input,.admin select{ background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:calc(var(--radius-tile) * .5); padding:8px; font-size:16px; }
.admin .radek{ display:flex; gap:8px; align-items:center; }
.admin .pozn{ font-size:12px; color:var(--muted); }
.admin .mono{ font-family:ui-monospace,monospace; font-size:12px; color:var(--text); white-space:pre-wrap; }
.admin code{ font-size:12px; }
.pozadi-radek{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.pozadi-radek .stav-bg{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.pozadi-radek .stav-bg.ok{ color:var(--accent); }
body.admin-otevreny #app{ padding-right:calc(min(420px,100vw) + var(--right)); }
@media (max-width:700px){ body.admin-otevreny #app{ display:none; } }