/* Lokamo :: 19:45 Kuchnia. iPad Air w poziomie z ekranem kuchni i iPhone kelnera.
   Kompozycja 77.5 x 42.4 em w .kx-cam; kamera (transform) liczona w kuchnia.js
   jako prostokat widoku. Bony, plan sali i zdarzenia to komponenty z home.css
   (.kds*, .tk*, .wt*, .tb2*); tu tylko urzadzenia, uklad i dotyk. */

.scn--kitchen{--sh:42.4;height:42.4em;overflow:hidden}
.kx-cam{position:absolute;left:0;top:0;width:77.5em;height:42.4em;transform-origin:0 0}
.kx-still,.kx-still *,.kx-still *::before,.kx-still *::after{transition:none!important;animation:none!important}
.kx-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* iPad Air: rowna czarna ramka, aluminiowa krawedz, kamera na dluzszym boku */
.kx-ipad{position:absolute;left:3em;top:2.7em;width:52em;height:37em;border-radius:2.45em;border:.24em solid transparent;background:linear-gradient(#08080A,#08080A) padding-box,linear-gradient(140deg,#A6A6AE 0%,#4C4C52 14%,#26262B 40%,#35353B 66%,#78787F 86%,#BBBBC2 100%) border-box;box-shadow:0 3em 4.6em -2.4em rgba(13,13,15,.55),0 .7em 1.4em -.7em rgba(13,13,15,.3)}
.kx-ipad::before{content:"";position:absolute;left:50%;top:.44em;width:.38em;height:.38em;margin-left:-.19em;border-radius:50%;background:radial-gradient(circle at 38% 38%,#3A4668 0 20%,#0E0F14 60%);box-shadow:0 0 0 .07em #1A1B20}
.kx-ipad__scr{position:absolute;inset:1.3em;border-radius:.95em;overflow:hidden;background:#fff;isolation:isolate}

/* Pasek statusu iPadOS */
.kx-sb{position:absolute;left:0;right:0;top:0;z-index:5;height:2.4em;display:flex;align-items:center;justify-content:space-between;padding:0 1.9em;font:500 .66em/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;color:var(--ink)}
.kx-sb b{font-weight:600;margin-right:.35em}
.kx-sb__i{display:flex;align-items:center;gap:.4em}
.kx-sb__i svg{width:1.25em;height:1.25em}
.kx-sb .gx__bat{width:1.9em;height:.92em;border-radius:.28em;opacity:.85}

/* Ekran kuchni na calym ekranie iPada */
.kx-ipad .kds{position:absolute;inset:1.58em 0 0;height:auto;border-radius:0;box-shadow:none;font-size:.8em}
.kx-ipad .kds__head{padding:.55em 1.2em .8em}
.kx-ipad .kds__pos{display:inline-flex}
.kx-ipad .kds__cols{padding:.9em;gap:.9em}
.kx-ipad .tk.is-flash{animation:drop .5s var(--ease-out) both,flash 1.4s var(--ease-out)}
.tk__b{display:flex;align-items:flex-end;gap:.6em}
.tk__l{flex:1;min-width:0}
.kds--big .tk__l>p:first-child{margin-top:0}
.tk__act{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:5.4em;height:2.05em;padding:0 .8em;border-radius:.55em;font-size:.8em;font-weight:650;background:var(--ink);color:#fff;transition:background-color .25s,color .25s,box-shadow .25s,transform .14s var(--ease-out),filter .14s}
.tk__act::before{content:"Przyjmij"}
[data-kstack="prep"] .tk__act{background:var(--ok)}
[data-kstack="prep"] .tk__act::before{content:"Gotowe"}
[data-kstack="ready"] .tk__act{background:#fff;color:#45454B;box-shadow:inset 0 0 0 1px #DADAE0}
[data-kstack="ready"] .tk__act::before{content:"Wydaj"}
.tk__act.is-press,.wt__go.is-press{transform:scale(.92);filter:brightness(.78)}
.wt__go{transition:transform .14s var(--ease-out),filter .14s,background-color .3s,color .3s}

/* iPhone kelnera */
.kx-waiter{position:absolute;left:58em;top:5.7em;width:16.5em}
.kx-waiter .wt__ev{font-size:.9em}
.kx-waiter .wt__ev small,.kx-waiter .wt__go{font-size:.62em}
.kx-waiter .wt__bar{font-size:.56em}

/* Dotyk palca: kolko jak "pokaz dotkniecia" w nagraniu ekranu iOS (44 pt) */
.kx-tap{position:absolute;left:0;top:0;width:1.9em;height:1.9em;margin:-.95em 0 0 -.95em;border-radius:50%;background:rgba(13,13,15,.2);box-shadow:inset 0 0 0 .08em rgba(13,13,15,.2),0 .15em .5em rgba(13,13,15,.16);opacity:0;transform:scale(.72);pointer-events:none;z-index:55}
.kx-tap--tel{width:2.2em;height:2.2em;margin:-1.1em 0 0 -1.1em}
.kx-tap.is-on{opacity:1;transform:scale(1);transition:opacity .08s,transform .14s var(--ease-out)}
.kx-tap.is-up{opacity:0;transform:scale(1.3);transition:opacity .3s,transform .34s var(--ease-out)}

/* Telefon i tablet: scena wypelnia przyklejone pudlo, kompozycja miesci sie w nim,
   kamera przybliza kadr kroku. */
@media (max-width:999px){
  .js .scn--kitchen{height:auto}
  .js .scn--kitchen>.kx-cam{font-size:min(calc(100cqw / 77.5),calc(100cqh / 42.4))}
}
@media (prefers-reduced-motion:reduce){
  .kx-tap{display:none}
}