/* Category menu screen: game-style rows, subcategory accordion, search, results. */
.menu-screen{color:#fff; background:var(--red-700); isolation:isolate; overscroll-behavior:contain;}
/* Background sits on a sticky GPU layer so scrolling never repaints it. */
.menu-screen::before{
  content:""; position:sticky; top:0; z-index:-1; display:block; height:100dvh; margin-bottom:-100dvh;
  background:linear-gradient(rgba(12,5,5,.45), rgba(12,5,5,.82)), url("../img/hero-bg.webp") center top/cover no-repeat;
  transform:translateZ(0); pointer-events:none;
}
.menu-top{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px;
  padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  background:rgba(26,6,6,.9);
}
.menu-top .home-btn{position:relative; background:none;}
.menu-top .home-btn svg{width:24px; height:24px;}
.badge{
  position:absolute; top:0; left:0; min-width:16px; height:16px; padding:0 4px; border-radius:99px;
  background:var(--red-500); color:#fff; font-size:10px; font-weight:800; line-height:16px; text-align:center;
}
.badge[hidden]{display:none;}
.search-box{
  flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:40px; padding:0 14px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:999px;
}
.search-box svg{width:17px; height:17px; stroke:#fff; flex:none;}
.search-box input{flex:1; min-width:0; background:none; border:none; outline:none; color:#fff; font:inherit; font-size:14px;}
.search-box input::placeholder{color:rgba(255,255,255,.6);}
.menu-wrap{padding:22px 18px calc(40px + var(--safe-b));}
.menu-title{margin:0 0 18px; font-size:22px; font-weight:800; text-align:center;}
.menu-title[hidden], .menu-rows[hidden]{display:none;}
.menu-rows{display:flex; flex-direction:column; gap:12px;}

.menu-row{
  border-radius:var(--radius-lg); overflow:hidden;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  contain:content;
}
.frame[data-screen="menu"]:not([data-seen]) .menu-row{
  animation:rowIn .55s cubic-bezier(.22,.9,.3,1) both; animation-delay:calc(180ms + var(--i) * 60ms);
}
@keyframes rowIn{from{opacity:0; transform:translateY(18px);}}
.menu-btn{
  width:100%; min-height:76px; display:flex; align-items:center; gap:14px; padding:14px 18px;
  background:none; border:none; color:inherit; font:inherit; text-align:start; cursor:pointer;
}
.menu-btn:active{background:rgba(255,255,255,.08);}
.menu-btn:focus-visible, .sub-btn:focus-visible{outline:2px solid #fff; outline-offset:-4px;}
.mt{align-items:flex-start;}
.mi{width:58px; height:44px; flex:none; display:flex; align-items:center; justify-content:center;}
.mi img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));}  /* keeps the icon's own proportions */
.mi svg{width:38px; height:38px; stroke:#fff;}
.mt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.mt b{font-size:18px; font-weight:800;}
.mt small{font-size:12px; color:rgba(255,255,255,.78); font-weight:600; direction:ltr; text-align:start; letter-spacing:.02em;}
.mc svg{width:20px; height:20px; stroke:#fff; transition:transform .3s ease;}
.menu-row.open .mc svg{transform:rotate(180deg);}

.menu-subs{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s ease;}
.menu-row.open .menu-subs{grid-template-rows:1fr;}
.menu-subs-in{min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:8px; padding:0 14px;}
.menu-row.open .menu-subs-in{padding-bottom:14px;}
.sub-btn{
  display:flex; align-items:center; justify-content:space-between; padding:13px 16px; cursor:pointer;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-md);
  color:#fff; font:inherit; font-size:14.5px; font-weight:700; text-align:start;
}
.sub-btn span{font-size:12px; font-weight:600; opacity:.7;}

.res-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:16px; font-weight:800;}
.res-head button{
  background:rgba(255,255,255,.16); border:none; color:#fff; font:inherit; font-size:12.5px; font-weight:700;
  padding:7px 14px; border-radius:999px; cursor:pointer;
}
.res-empty{text-align:center; color:rgba(255,255,255,.78); padding:40px 10px; font-size:14px; line-height:1.9;}

/* Top-left button: home icon (opened from hero) or back arrow (opened from the catalog). */
.home-btn .i-back{display:none;}
.frame[data-back="catalog"] .home-btn .i-home{display:none;}
.frame[data-back="catalog"] .home-btn .i-back{display:flex;}