/* 📺 התאמת הלקוח של Neko למסך שבאתר — 👤 אבי 3.11.2026 14:07 (צילום מהטאבלט): "לפנות מקום לשידור".
   (1) העיגול של המשתמש והבקרים — בשורה אחת. (2) שורת הלוגו יורדת; ☰ 🔓 🖱 עוברים לעמודה בצד ימין, מתחת ל-⛶ 🖥.
   ⭐ מוזרק ע"י neko_run.sh (index.html מהתמונה + <link> לקובץ הזה). ⛔ לא נוגעים בקוד של Neko עצמו. */

/* (2) שורת הלוגו ⇒ עמודת כפתורים צפה בצד ימין */
#neko main { position: relative; }
#neko main > div.h-menu {
  position: absolute; z-index: 30; top: 105px; right: 20px;
  height: auto; background: transparent; pointer-events: none;
}
#neko main > div.h-menu > div > a { display: none; }          /* הלוגו n.eko */
#neko main > div.h-menu ul { margin: 0; pointer-events: auto; }
#neko main > div.h-menu ul > li { display: block; margin: 0 0 10px 0; }
#neko main > div.h-menu ul > li > button {
  width: 30px; height: 30px; border-radius: 4px;
  background: rgba(40, 40, 40, .85); color: #fff;
}

/* (1) הבקרים — 👤 אבי 14:07: העיגול בשורת הבקרים (שורה אחת) · 15:07 (טאבלט שוכב): "להעביר את כל הפס התחתון לצד ימין"
       ⭐ ובעמידה (15:07, "בפריסה עומדת צריך לתקן") — ⛔ עמודה גוזלת רוחב, שהוא מה שחסר בעמידה ⇒ שורה אחת בתחתית. */
#neko .h-controls > div:first-child { flex: 0 0 auto; min-height: 0; padding-bottom: 0; overflow: visible; }
#neko .h-controls > div:first-child li > div { margin: 4px 5px; width: 40px; height: 40px; }
#neko .h-controls > div:first-child li > div > div { width: 40px; height: 40px; line-height: 40px; }

@media (orientation: portrait) {
  #neko .h-controls { flex-direction: row; height: auto; align-items: center; }
  #neko .h-controls > div:first-child { order: 2; }
  #neko .h-controls > div:first-child > div { padding: 0 16px 0 6px; }
  #neko .h-controls > div.grid { flex: 1 1 auto; min-height: 48px; display: flex; align-items: center; }
  #neko .h-controls > div.grid > ul:first-child { order: 1; }
  #neko .h-controls > div.grid > ul:nth-child(2) { order: 3; flex: 1 1 auto; }
  #neko .h-controls > div.grid > div:last-child { order: 4; }
}

@media (orientation: landscape) {
  #neko main { flex-direction: row; }
  #neko main > .video-container { flex: 1 1 auto; min-width: 0; }
  #neko .h-controls {
    order: 3; flex: 0 0 56px; width: 56px; height: auto; max-height: none;
    flex-direction: column; align-items: center; justify-content: flex-start; padding: 8px 0; overflow-y: auto;
  }
  #neko .h-controls > div:first-child { order: 1; padding: 0; }
  #neko .h-controls > div:first-child > div { padding: 0; }
  #neko .h-controls > div:first-child li { display: block; }
  #neko .h-controls > div:first-child ul, #neko .h-controls > div:first-child > div { margin: 0; padding: 0; text-align: center; }
  #neko .h-controls > div:first-child li > div { margin: 4px 0 10px; }
  #neko .h-controls > div.grid { order: 2; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
  #neko .h-controls > div.grid > ul,
  #neko .h-controls > div.grid > div,
  #neko .h-controls > div.grid > div > ul { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 0; justify-self: auto; }
  #neko .h-controls > div.grid > ul:nth-child(2) { order: 1; }                     /* ⌨ מתג ⏸ 🔊 */
  #neko .h-controls > div.grid > div:last-child { order: 2; }                       /* 🙂 */
  #neko .h-controls > div.grid > ul:first-child { order: 3; margin-top: auto; }     /* ? 🛡 en — בתחתית */
  #neko .h-controls > div.grid li { display: block; margin: 0 !important; }
  #neko .h-controls label { margin: 0 !important; }
  #neko .h-controls div.whitespace-nowrap { flex-direction: column; gap: 8px; }
  #neko .h-controls input.slider { writing-mode: vertical-lr; direction: rtl; width: 20px; height: 110px; }
  #neko main > div.h-menu { right: 76px; }   /* ☰ 🔓 🖱 — מחוץ לעמודה */
}

/* (3) 👤 אבי 15:16 (צילום): "יש פה כפתורים בצד ימין למעלה שמכסים על חלק מהמסך" ⇒ פס שחור צר מימין לשידור, והכפתורים בתוכו.
   ⭐ ⛶ 🖥 (למעלה) ו-▣ (למטה) — של השידור עצמו; ☰ 🔓 🖱 — מהשורה שירדה. ⛔ שום כפתור מעל התמונה. */
#neko .video-container { padding-right: 46px; background: #000; }
#neko .video-container ul.absolute { right: -38px !important; }
#neko main > div.h-menu { right: 8px; }
@media (orientation: landscape) { #neko main > div.h-menu { right: 64px; } }