/* ==========================================================
   START MENU — rozwijane menu z przycisku MENU
   ========================================================== */

.start-menu {
  position: fixed;
  left: 2px;
  bottom: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px) - 2px);
  z-index: 10001;
  display: flex;
  background: var(--face);
  box-shadow: var(--bevel-out);
  padding: 3px;
  max-height: calc(100dvh - var(--taskbar-h) - 8px);
  /* bez "both": po animacji clip-path znika, inaczej obcinałby wysuwane podmenu */
  animation: menu-in 120ms steps(4);
}
@keyframes menu-in {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Pionowy pasek z nazwą studia (jak "Windows 98" w oryginale) */
.start-menu__banner {
  width: 28px;
  background: linear-gradient(0deg, #000 0%, #2a0024 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
}
.start-menu__banner span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-pixel);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  white-space: nowrap;
}
.start-menu__banner b { color: var(--brand-pink); }

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 190px;
}
.menu-list > li { position: relative; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 4px 10px 4px 8px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}
.menu-item img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.menu-item span { flex: 1; }
.menu-item .menu-item__arrow { font-size: 9px; flex: 0 0 auto; }
.menu-item--main span { font-weight: 700; letter-spacing: 0.5px; }

.menu-item:hover,
.menu-item:focus-visible,
.menu-item[aria-expanded="true"] {
  background: var(--highlight);
  color: var(--highlight-text);
  outline: none;
}

/* ---------- Podmenu ---------- */
.submenu {
  position: absolute;
  left: calc(100% - 3px);
  bottom: -3px;
  min-width: 180px;
  background: var(--face);
  box-shadow: var(--bevel-out);
  padding: 3px;
  list-style: none;
  margin: 0;
}
.submenu .menu-item { min-height: 32px; font-size: 13px; }
.submenu .menu-item img { width: 20px; height: 20px; }

/* Na wąskim ekranie podmenu rozwija się w środku menu */
@media (max-width: 480px) {
  .start-menu { right: 2px; }
  .menu-list { min-width: 0; flex: 1; overflow-y: auto; }
  .submenu {
    position: static;
    box-shadow: none;
    padding: 0 0 0 26px;
    background: transparent;
  }
}