/* round 27: category hero headers + snappier taps */
.cathero{position:relative;margin:10px 0 12px;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#2a1606;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.cathero img{width:100%;height:100%;object-fit:cover;display:block}
.cathero>div{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(transparent,rgba(20,10,2,.82));color:#fff}
.cathero b{display:block;font-family:'Noto Serif',serif;font-size:1.45rem;font-weight:600}
.cathero span{font-size:.85rem;opacity:.85}
html{-webkit-tap-highlight-color:transparent}
a,button,.item,.chip,.tile,.banner,label,[role=button]{touch-action:manipulation}
button,.chip,.fbtn,.iconbtn,.banner,.tile,.hcard,.item,.opt,.tabs a{transition:transform .12s ease,opacity .12s ease,background-color .15s ease!important}
button:active,.chip:active,.fbtn:active,.iconbtn:active,.tile:active,.opt:active,.tabs a:active{transform:scale(.96);opacity:.85}
.banner:active,.hcard:active,.item:active{transform:scale(.985)}
#view{contain:layout style}
.r27live{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;letter-spacing:.06em;color:#fff;background:#d33;border-radius:999px;padding:2px 8px;vertical-align:middle;margin-left:6px}
.r27live:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:r27p 1.4s infinite}
@keyframes r27p{50%{opacity:.3}}
.dpanel{transition-duration:.17s!important}.fp{transition-duration:.22s!important}.drawer{transition-duration:.15s!important}.splash{transition-duration:.2s!important}
main.enter{animation-duration:.16s!important}#view.r20in>*{animation-duration:.16s!important}.sheetbox{animation-duration:.16s!important}
.vpyears{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.vpyr{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.vpyr>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;touch-action:manipulation}
.vpyr>summary::-webkit-details-marker{display:none}
.vpyl{font-family:'Noto Serif',serif;font-size:1.2rem;font-weight:600;flex:1}
.vpyn{font-size:.8rem;color:var(--mute);background:color-mix(in srgb,var(--saf) 12%,transparent);border-radius:999px;padding:2px 9px}
.vpyr>summary .ic{transition:transform .15s}.vpyr[open]>summary .ic{transform:rotate(90deg)}
.vpyb2{padding:0 12px 12px}
.vpyb{margin:4px 0 8px;font-size:.75rem}
.qlist li{position:relative;overflow:hidden;touch-action:pan-y}
.qlist li>:not(.qdel){transform:translateX(var(--qx,0px));transition:transform .16s ease}
.qlist li.qdrag>:not(.qdel){transition:none}
.qdel{position:absolute;right:0;top:0;bottom:0;width:84px;border:0;background:#e0342b;color:#fff;font-weight:600;font-size:.9rem;transform:translateX(calc(84px + var(--qx,0px)));transition:transform .16s ease}
.qlist li.qdrag .qdel{transition:none}