/* Rebel PC Builder V26: mobile usability and cache-safe responsive release */
.mobile-menu-toggle{display:none}
body.overlay-open{overflow:hidden;touch-action:none}

@media(max-width:760px){
  header{min-height:70px;padding:7px 10px;gap:8px;align-items:center;flex-wrap:wrap}
  .brand{min-width:0;flex:1}
  .brand-logo{width:42px;height:42px}
  .brand strong{font-size:11px;letter-spacing:1.2px}
  .brand span{font-size:7px;letter-spacing:1.4px}
  .mobile-menu-toggle{display:block;border:1px solid #623138;border-radius:8px;background:#151c28;color:#fff;padding:10px;font-size:9px;font-weight:900;letter-spacing:.8px}
  .header-actions{width:100%;display:grid;grid-template-columns:1fr 1.25fr;gap:7px}
  .header-actions .guided-button,.header-actions .guide-button{display:block;width:100%;min-height:38px;padding:8px 5px;font-size:8px}
  .header-actions .player-hud,.header-actions .data-status{display:none}
  .header-actions .mobile-secondary-action:not(.guide-button){display:none}
  body.mobile-menu-open .header-actions .mobile-secondary-action{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:38px;margin:0}
  body.mobile-menu-open .header-actions{grid-template-columns:1fr 1fr}
  body.mobile-menu-open .header-actions .stock{border:1px solid #344052;border-radius:8px;color:#dce3ed;font-size:9px}

  .hero{padding-top:9px}
  .hero h1{font-size:29px;line-height:1.02}
  .hero>div>p:last-of-type{font-size:12px;line-height:1.55}

  /* The tutorial becomes one full-screen mobile task, with its actions always reachable. */
  .builder-guide{padding:0;place-items:stretch;background:#060a10}
  .builder-guide.open{display:block}
  .builder-guide .guide-shell{width:100%;height:100dvh;max-height:none;border:0;border-radius:0;padding:15px 15px 8px;overflow-y:auto;overscroll-behavior:contain}
  .guide-close{position:fixed;z-index:4;right:12px;top:12px}
  .guide-brand{padding-right:42px}
  .live-profile{grid-template-columns:1fr 1fr;gap:7px;margin:12px 0 8px}
  .live-profile>div:first-child{grid-column:1/-1}
  .start-live-tutorial{margin:9px 0;padding:11px 13px}
  .tutorial-divider{margin:7px 0}
  .tutorial-stage{min-height:auto;margin-bottom:9px}
  .guide-shell h2{font-size:22px}
  .guide-text{line-height:1.45}
  .guide-actions{position:sticky;z-index:3;bottom:26px;margin:12px -15px 0;padding:8px 15px 5px;background:linear-gradient(0deg,#0d141f 75%,transparent);grid-template-columns:82px 1fr}
  .guide-skip{position:sticky;z-index:3;bottom:0;width:100%;margin:0;padding:8px;background:#0d141f;color:#aab5c4}

  /* Product selection uses the whole screen without sideways filter scrolling. */
  .modal{padding:0}
  .modal-shell{height:100dvh;border:0;border-radius:0}
  .modal-head{padding:13px 14px 10px}
  .modal-head h2{font-size:23px}
  .toolbar{padding:10px 12px;display:grid;grid-template-columns:1fr}
  .filter-bar{padding:0 12px 11px;display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible}
  .filter-group{min-width:0;width:100%}
  .filter-group select{height:38px}
  .filter-clear{width:100%;height:38px;grid-column:1/-1}
  .product-grid{padding:10px 12px 88px}
  .pager{position:sticky;z-index:4;bottom:0;background:#0a1019;padding:10px}

  /* Keep the helpful recommendation concise before the catalogue. */
  .advisor-picks .advisor-pick:not(.rebel){display:none}
  .advisor-picks{grid-template-columns:1fr}
  .advisor-copy p{display:none}

  .ask-rebel-help,.resume-live-tutorial{right:8px;padding:6px;bottom:8px}
  .ask-rebel-help b,.resume-live-tutorial b{display:none}
  .ask-rebel-help span,.resume-live-tutorial span{width:36px;height:36px}
  .modal.open~.ask-rebel-help,.builder-guide.open~.ask-rebel-help{display:none}
  body.overlay-open .ask-rebel-help,body.overlay-open .resume-live-tutorial{display:none!important}
  main{padding-bottom:76px}
}

@media(max-width:380px){
  .header-actions{grid-template-columns:1fr}
  body.mobile-menu-open .header-actions{grid-template-columns:1fr}
  .filter-bar{grid-template-columns:1fr}
  .filter-clear{grid-column:auto}
  .live-profile{grid-template-columns:1fr}
  .live-profile>div:first-child{grid-column:auto}
}

@media(max-height:500px) and (orientation:landscape){
  header{position:relative;min-height:58px;padding:5px 12px}
  .brand-logo{width:34px;height:34px}
  .brand span{display:none}
  .hero{padding-top:8px;padding-bottom:8px}
  .hero h1{font-size:27px;margin-bottom:6px}
  .hero>div>p:last-of-type{display:none}
  .challenge-button{margin-top:5px}
  .ask-rebel-help,.resume-live-tutorial{display:none!important}
  .builder-guide .guide-shell{padding-top:10px}
}