/* YABAi Signage kiosk */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: "Segoe UI", Roboto, Arial, sans-serif; color: #fff; cursor: none; }

#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
       background: #000; z-index: 1; }
/* фоновий аудіо-YouTube (музика) — позаду непрозорого #app, чутно але не видно */
.bgaudio { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 0; pointer-events: none; }

.boot, .empty { font-size: 4vh; color: #444; }

/* картинка / відео / youtube — на весь екран */
.media { width: 100%; height: 100%; object-fit: contain; border: 0; }
video.media { background: #000; }
iframe.media { width: 100%; height: 100%; }

/* текстовий слайд */
.textslide {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 6vh; font-size: 5vh; line-height: 1.3;
}

/* меню-борд */
.menu { width: 100%; height: 100%; display: flex; flex-direction: column;
        background: radial-gradient(circle at 50% 0%, #1d1f24, #000); padding: 4vh 5vw; }
.menu-title { font-size: 7vh; text-align: center; margin-bottom: 3vh;
              letter-spacing: 0.04em; text-transform: uppercase; }
.menu-grid { flex: 1; display: grid; gap: 2.5vh 3vw;
             grid-template-columns: repeat(auto-fill, minmax(22vw, 1fr));
             align-content: start; overflow: hidden; }
.menu-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
             gap: 1.5vw; padding: 1.2vh 1.5vw; background: rgba(255,255,255,0.05);
             border-radius: 1.2vh; }
.mi-img { width: 7vh; height: 7vh; object-fit: cover; border-radius: 1vh; }
.mi-name { font-size: 3.2vh; }
.mi-price { font-size: 3.6vh; font-weight: 700; color: #ffcf3f; white-space: nowrap; }
.menu-item.out { opacity: 0.4; }
.menu-item.out .mi-price { color: #ff6b6b; font-weight: 600; }

/* вертикальна орієнтація */
body.portrait .menu-grid { grid-template-columns: 1fr; }

/* ---- інтерактивне меню з пульта ---- */
.ovl { position: fixed; inset: 0; z-index: 50;
       display: flex; align-items: center; justify-content: center;
       background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.ovl-box { min-width: 40vw; max-width: 70vw;
           background: linear-gradient(160deg, #14161b, #05060a);
           border: 0.2vh solid rgba(255,207,63,0.25);
           border-radius: 2vh; padding: 3vh 3vw;
           box-shadow: 0 2vh 6vh rgba(0,0,0,0.6); }
.ovl-title { font-size: 4vh; font-weight: 700; text-align: center;
             margin-bottom: 2.5vh; letter-spacing: 0.03em; color: #ffcf3f; }
.ovl-item { font-size: 4vh; padding: 1.6vh 2vw; border-radius: 1.2vh;
            color: #d6d8dd; margin: 0.6vh 0; transition: none; }
.ovl-item.sel { background: #ffcf3f; color: #111;
                box-shadow: 0 0 0 0.3vh rgba(255,207,63,0.5); font-weight: 700; }
.ovl-foot { margin-top: 2vh; text-align: center; font-size: 2.4vh; color: #6a6d76; }

/* екран «підключити смартфон» */
.phone { width: 100%; height: 100%; display: flex; flex-direction: column;
         align-items: center; justify-content: center; text-align: center;
         padding: 6vh 8vw; background: radial-gradient(circle at 50% 20%, #1b1d24, #000); }
.phone .ph-ic { font-size: 12vh; line-height: 1; margin-bottom: 2vh; }
.phone h1 { font-size: 6vh; margin-bottom: 3vh; color: #ffcf3f; }
.phone ol { text-align: left; font-size: 4vh; line-height: 1.6; max-width: 70vw; }
.phone li { margin: 1vh 0; }
.phone .ph-hint { margin-top: 4vh; font-size: 3vh; color: #9a9da6; }

/* підказка виходу з меню-сайту */
.web-hint { position: absolute; left: 50%; bottom: 2vh; transform: translateX(-50%); z-index: 5;
            background: rgba(0,0,0,0.7); color: #fff; font-size: 2.2vh; text-align: center;
            padding: 0.9vh 1.8vw; border-radius: 1vh; pointer-events: none; line-height: 1.5; }
.web-hint .wh-order { color: #ffcf3f; font-size: 2vh; }

/* прозорий шар-ловець над відео (клік/фокус → наше меню, не YouTube) */
.tapcatch { position: absolute; inset: 0; z-index: 3; background: transparent; outline: none; cursor: pointer; }

/* підказка «OK — меню» (зверху-зліва, щоб не збігатись з логотипом YouTube) */
.ok-hint { position: fixed; left: 2.2vw; top: 2.2vh; z-index: 40;
           font-size: 2.4vh; color: rgba(255,255,255,0.6);
           background: rgba(0,0,0,0.45); padding: 0.8vh 1.4vw; border-radius: 1vh;
           pointer-events: none; }