/* ProRetro responsive layer
   Mobile-first safeguards live here so component files stay focused. */

/* Tablets / compact laptops */
@media (max-width: 920px){
  :root{--header-h:auto}

  .shell{width:min(var(--shell),calc(100% - 32px))}
  .section{padding:72px 0}

  /* Header keeps navigation accessible instead of hiding it. */
  .site-header{
    height:auto;
    min-height:68px;
    flex-wrap:wrap;
    gap:10px 14px;
    padding:12px 14px;
  }
  .brand{min-height:44px}
  .topbar-actions{margin-left:auto}
  .controller-status{min-width:auto;min-height:44px}
  .controller-detail{display:none}
  .nav{
    display:flex;
    order:3;
    width:100%;
    margin:0;
    gap:6px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding-top:9px;
    border-top:1px solid var(--line);
  }
  .nav::-webkit-scrollbar{display:none}
  .nav-link{flex:0 0 auto;min-height:42px;display:inline-flex;align-items:center;justify-content:center}
  .back-link{min-height:44px;display:inline-flex;align-items:center}

  .hero-layout,.section-heading,.catalog-heading,.about-panel{grid-template-columns:1fr}
  .hero-layout{gap:30px}
  .hero-copy{max-width:760px}
  .hero-showcase{min-height:auto}
  .hero-showcase::before{width:min(470px,80vw);height:min(470px,80vw)}
  .console-carousel{width:min(620px,100%)}

  .stats-strip{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}

  .feature-grid{grid-template-columns:1fr 1fr}
  .feature-card:first-child{grid-column:1/-1}

  .console-grid{grid-template-columns:1fr}
  .console-card{min-height:420px}

  .loader-card{grid-template-columns:1fr}
  .emulator-heading{grid-template-columns:1fr}
  .status-dot{justify-self:start}

  #game{min-height:min(620px,72svh)}
}

/* Phones */
@media (max-width: 620px){
  html{scroll-padding-top:150px}
  body{min-width:0}
  body::after{background-size:36px 36px}

  .shell{width:calc(100% - 24px)}
  .section{padding:56px 0}

  .site-header{
    width:calc(100% - 16px);
    top:max(8px,env(safe-area-inset-top));
    margin-top:max(8px,env(safe-area-inset-top));
    padding:10px 10px 9px 12px;
    border-radius:20px;
    gap:8px 10px;
  }
  .brand-mark{width:40px;height:40px;border-radius:13px}
  .brand-name{display:none}
  .controller-status{padding:8px 10px}
  .controller-label{font-size:11px}
  .nav{padding-top:8px;gap:4px}
  .nav-link{padding:9px 12px;font-size:13px;border-radius:11px}
  .back-link{padding:9px 10px;font-size:13px;white-space:nowrap}

  /* Home */
  .home-hero{padding:54px 0 34px}
  .hero-layout{gap:26px}
  .hero-copy h1{font-size:clamp(46px,15vw,64px);line-height:.91;margin:14px 0 18px}
  .hero-copy p{font-size:15px;line-height:1.65}
  .hero-actions{flex-direction:column;margin:24px 0 22px}
  .btn{width:100%;min-height:50px;padding-inline:16px;touch-action:manipulation}
  .hero-meta{gap:7px}
  .hero-meta span{font-size:11px;padding:7px 9px}

  .hero-showcase{min-height:auto}
  .console-carousel{padding:10px;border-radius:24px}
  .carousel-header{gap:10px;margin-bottom:10px;padding:2px}
  .carousel-header strong{font-size:13px}
  .carousel-count{font-size:18px;white-space:nowrap}
  .carousel-viewport{border-radius:18px}
  .console-slide{min-height:270px;padding:18px;border-radius:18px}
  .slide-number,.slide-available{font-size:9px;padding:6px 8px}
  .slide-logo{min-height:94px;margin:12px 0}
  .slide-logo img{max-width:90%;max-height:90px}
  .slide-logo-fallback{font-size:clamp(34px,11vw,48px)}
  .slide-bottom{gap:12px;align-items:end}
  .slide-copy strong{font-size:16px;line-height:1.15}
  .slide-copy span{font-size:11px;line-height:1.35}
  .slide-arrow{width:38px;height:38px;min-width:38px;border-radius:12px}
  .carousel-controls{gap:10px;margin-top:10px}
  .carousel-btn{width:42px;height:42px;border-radius:12px;touch-action:manipulation}
  .carousel-dots{gap:5px;max-width:150px;overflow:hidden}
  .carousel-dot{width:6px;height:6px;min-width:6px}
  .carousel-dot.active{width:20px}

  .home-stats{padding:12px 0 40px}
  .stats-strip{grid-template-columns:1fr;border-radius:20px}
  .stat{padding:16px 18px}
  .stat+.stat{border-left:0;border-top:1px solid var(--line)}

  .feature-grid,.tips-grid{grid-template-columns:1fr}
  .feature-card:first-child{grid-column:auto}
  .section-heading{gap:14px;margin-bottom:18px}
  .section-heading h2,.about-panel h2{font-size:clamp(31px,10vw,40px)}
  .section-heading p,.about-panel p{font-size:14px;line-height:1.65}
  .about-panel{gap:22px;padding:22px;border-radius:24px}
  .home-about{padding:52px 0 72px}

  /* Catalog */
  .catalog-page{padding:52px 0 72px}
  .catalog-heading{gap:16px;margin-bottom:24px}
  .catalog-heading h1,.emulator-heading h1{font-size:clamp(42px,13vw,58px);line-height:.94;overflow-wrap:anywhere}
  .catalog-heading p{font-size:15px;line-height:1.6}
  .console-grid{gap:14px}
  .console-card{min-height:350px;padding:18px;border-radius:24px}
  .console-card-head{align-items:flex-start;gap:8px}
  .console-tag,.compat-badge{font-size:9px;padding:6px 8px}
  .console-title-art{min-height:112px;margin:auto 0 14px}
  .console-title-art img{max-width:88%;max-height:100px}
  .console-title-fallback{font-size:clamp(36px,12vw,48px);line-height:.95}
  .mame-logo-fallback{font-size:clamp(46px,15vw,62px)}
  .mame-title-art::after{width:118px;height:88px}
  .console-card-copy p{font-size:14px;line-height:1.55;margin-bottom:14px}
  .card-action{width:100%;min-height:46px;text-align:center}
  .catalog-note{margin-top:18px;font-size:12px;line-height:1.55}

  /* Emulator pages */
  .emulator-page{padding:46px 0 68px}
  .emulator-heading{gap:14px;margin-bottom:20px}
  .emulator-heading p{font-size:14px;line-height:1.6}
  .status-dot{font-size:10px;padding:8px 10px}

  .loader-card{gap:12px}
  .drop-zone,.selection-panel{border-radius:22px}
  .drop-zone{min-height:230px;padding:22px 16px}
  .drop-zone:hover{transform:none}
  .drop-icon{width:56px;height:56px;margin-bottom:15px;border-radius:16px;font-size:26px}
  .drop-zone strong{font-size:20px}
  .drop-zone span:not(.drop-icon),.drop-zone small{font-size:12px;line-height:1.45}
  .selection-panel{padding:16px;gap:12px}
  .selected-game-artwork{min-height:150px;padding:16px;border-radius:17px}
  .selected-game-logo{min-height:64px;margin-bottom:8px}
  .selected-game-logo img{max-width:100%;max-height:68px}
  .selected-game-title{font-size:21px}
  .selected-game-meta{font-size:10px}
  .helper{margin:0 2px;font-size:11px}

  .emulator-stage{margin-top:16px;padding:7px;border-radius:18px;overflow:hidden}
  #game{width:100%;min-height:0;aspect-ratio:4/3;max-height:72svh;overflow:hidden}
  #game canvas,#game iframe,#game video{max-width:100%!important;height:auto!important}

  .tips-grid{gap:10px;margin:16px 0}
  .tips-grid article{padding:15px;border-radius:15px}

  .footer{padding:22px 0 calc(32px + env(safe-area-inset-bottom))}
  .footer-inner{display:block;padding-top:20px;font-size:12px}
  .footer-inner span{display:block;margin-top:7px}
}

/* Very narrow phones (older iPhones / small Android devices). */
@media (max-width: 380px){
  .shell{width:calc(100% - 18px)}
  .site-header{width:calc(100% - 12px);padding-inline:9px}
  .brand-mark{width:38px;height:38px}
  .controller-status{padding:7px 8px}
  .controller-label{font-size:10px}
  .nav-link{padding-inline:10px;font-size:12px}
  .hero-copy h1{font-size:44px}
  .console-slide{min-height:250px;padding:15px}
  .slide-copy span{display:none}
  .console-card{padding:16px;min-height:330px}
  .console-tag{max-width:65%;white-space:normal;line-height:1.25}
  .compat-badge{white-space:nowrap}
  .drop-zone{min-height:210px}
}

/* Landscape phones: preserve room for the emulator itself. */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 520px){
  .site-header{position:relative;top:0;margin-top:8px}
  .nav{order:initial;width:auto;border-top:0;padding-top:0;overflow:visible;margin:auto}
  .home-hero,.catalog-page,.emulator-page{padding-top:34px}
  #game{min-height:0;max-height:78svh;aspect-ratio:4/3;margin-inline:auto}
}

/* Touch devices do not need desktop hover motion. */
@media (hover: none){
  .console-card:hover,.btn:hover,.drop-zone:hover{transform:none}
}


/* ==========================================================
   v19 responsive hardening — phone, tablet, desktop, TV-like
   ========================================================== */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%}

@media (max-width:1100px){
  .shell{width:min(100% - 32px,960px)}
  .loader-card{grid-template-columns:minmax(0,1fr) minmax(260px,.72fr)}
  .system-heading-logo{max-width:min(620px,72vw)}
}

@media (max-width:820px){
  .shell{width:calc(100% - 28px)}
  .site-header{width:calc(100% - 24px);gap:10px 12px}
  .emulator-page{padding-top:42px}
  .loader-card{grid-template-columns:1fr}
  .drop-zone{min-height:250px}
  .selection-panel{min-width:0}
  .system-heading-logo{max-width:min(580px,90vw);min-height:88px}
  .system-heading-logo img{max-height:88px}
  .game-frame-top{height:44px}
  #game{aspect-ratio:4/3;max-height:74svh}
}

@media (max-width:560px){
  .site-header{position:sticky;top:max(6px,env(safe-area-inset-top));width:calc(100% - 14px);margin-top:6px;border-radius:18px;padding:8px;display:grid;grid-template-columns:auto 1fr auto;gap:6px 8px}
  .brand{grid-column:1}.back-link{grid-column:2;justify-self:start;min-width:0;padding-inline:8px}.topbar-actions{grid-column:3;margin-left:0;min-width:0}
  .controller-status{min-width:0;padding:8px}.controller-copy{display:none}.controller-dot{width:9px;height:9px}
  .nav{grid-column:1/-1;order:initial;width:100%;margin:0;padding-top:7px}
  .brand-name{display:none}
  .shell{width:calc(100% - 18px)}
  .section{padding:48px 0}
  .emulator-page{padding:34px 0 58px}
  .emulator-heading{gap:10px;margin-bottom:16px;align-items:start}
  .system-heading-logo{min-height:68px;max-width:94vw;margin:9px 0}
  .system-heading-logo img{max-height:68px;max-width:92%}
  .system-heading-fallback{font-size:clamp(38px,12vw,56px);overflow-wrap:anywhere}
  .emulator-heading p{font-size:13px}
  .status-dot{justify-self:start;white-space:normal}
  .loader-card{gap:10px}
  .drop-zone{min-height:205px;padding:18px 12px;border-radius:19px}
  .drop-icon{width:50px;height:50px;margin-bottom:12px;border-radius:14px}
  .drop-zone strong{font-size:18px}.drop-zone span:not(.drop-icon),.drop-zone small{font-size:11px}
  .selection-panel{padding:13px;border-radius:19px;gap:10px}
  .selected-game-artwork{min-height:138px;padding:13px}
  .btn{min-height:48px}
  .game-frame-top{height:40px;padding:0 10px;gap:8px;font-size:8px;letter-spacing:.1em}
  .game-frame-system{display:none}
  .emulator-stage{border-radius:17px!important;margin-top:14px!important}
  #game{width:100%;aspect-ratio:4/3;max-height:68svh}
  .tips-grid{margin-top:12px}
}

@media (max-width:360px){
  .site-header{grid-template-columns:auto minmax(0,1fr) auto}
  .brand-mark{width:36px;height:36px;border-radius:11px}.brand-mark::after{font-size:21px}
  .back-link{font-size:12px;padding-inline:6px}
  .shell{width:calc(100% - 12px)}
  .system-heading-logo{min-height:58px}.system-heading-logo img{max-height:58px}
  .system-heading-fallback{font-size:36px}
  .drop-zone{min-height:185px}
  .selected-game-artwork{min-height:126px}
}

/* Small phones in landscape: give almost all vertical space to the game. */
@media (orientation:landscape) and (max-height:500px){
  .site-header{position:relative;top:0}
  .emulator-page{padding-top:24px}
  .emulator-heading,.loader-card.compact,.tips-grid{margin-bottom:12px}
  .game-frame-top{height:34px}
  #game{width:auto;max-width:100%;height:calc(100svh - 72px);max-height:none;aspect-ratio:4/3}
  .game-viewport{display:flex;justify-content:center;background:#000}
}

/* Large monitors / TVs: avoid comically stretched content. */
@media (min-width:1700px){
  :root{--shell:1440px}
  .site-header{width:min(1440px,calc(100% - 48px))}
  .emulator-stage{max-width:1440px;margin-inline:auto}
}

/* v22 Arcade runtime */
@media (max-width:920px){
  .arcade-viewport,.arcade-emulator-frame{min-height:clamp(360px,72vw,560px);height:clamp(360px,72vw,560px)}
}
@media (max-width:620px){
  .arcade-viewport,.arcade-emulator-frame{min-height:58vh;height:58vh;max-height:560px}
  .arcade-launch-overlay{padding:20px}
  .arcade-retry-button{width:min(100%,280px)}
}
@media (max-width:920px) and (orientation:landscape){
  .arcade-viewport,.arcade-emulator-frame{height:calc(100svh - 120px);min-height:320px;max-height:none}
}

/* ==========================================================
   v23 navigation + footer refinement
   ========================================================== */
@media (max-width:980px){
  .site-header{width:calc(100% - 24px)}
  .header-main{grid-template-columns:auto minmax(0,1fr) auto;gap:12px 14px;padding:10px 12px}
  .brand-tagline{display:none}
  .nav{justify-self:center}
  .controller-status{min-width:48px}
  .controller-detail{display:none}
  .footer-panel{grid-template-columns:1.25fr .7fr 1fr;gap:30px;padding-inline:28px}
}
@media (max-width:700px){
  html{scroll-padding-top:132px}
  .site-header{top:max(7px,env(safe-area-inset-top));width:calc(100% - 14px);margin-top:max(7px,env(safe-area-inset-top));border-radius:18px;overflow:visible}
  .header-main{grid-template-columns:auto 1fr auto;grid-template-areas:"brand context actions" "nav nav nav";gap:8px 10px;padding:8px}
  .brand{grid-area:brand}.brand-mark{width:40px;height:40px;flex-basis:40px;border-radius:12px}.brand-mark::after{font-size:22px}
  .brand-copy{display:none}
  .nav{grid-area:nav;width:100%;justify-content:stretch;gap:3px;padding:3px;border-radius:12px;overflow:visible}
  .nav-link{flex:1;min-width:0;min-height:38px;padding:0 9px;font-size:11px;white-space:nowrap}
  .topbar-actions{grid-area:actions;justify-self:end}
  .controller-status{min-width:42px;width:42px;height:42px;min-height:42px;padding:0;justify-content:center;border-radius:12px}
  .controller-copy{display:none}
  .controller-status.is-connected .controller-dot,.controller-status.connected .controller-dot{width:22px;height:22px}
  .emulator-header .header-main{grid-template-areas:"brand context actions";grid-template-columns:auto minmax(0,1fr) auto}
  .header-context{grid-area:context;justify-content:center;min-width:0}
  .back-link{min-width:0;max-width:100%;min-height:42px;padding:5px 8px;gap:7px;border-radius:12px}
  .back-arrow{width:30px;height:30px;border-radius:9px;font-size:15px}
  .back-copy small{display:none}.back-copy strong{font-size:10px;white-space:nowrap}
  .footer{padding-top:42px}
  .footer-panel{grid-template-columns:1fr 1fr;gap:28px 24px;padding:26px 22px 18px;border-radius:20px}
  .footer-primary{grid-column:1/-1}.footer-description{margin-top:14px;font-size:11px}
  .footer-bottom{padding-top:16px}
}
@media (max-width:440px){
  .site-header{width:calc(100% - 10px)}
  .header-main{padding:7px;gap:7px}
  .brand-mark{width:38px;height:38px;flex-basis:38px}
  .controller-status{width:38px;height:38px;min-height:38px}
  .nav-link{font-size:10px;padding-inline:6px}
  .emulator-header .header-main{grid-template-columns:auto minmax(0,1fr) auto}
  .back-link{justify-self:center}
  .back-copy strong{font-size:9px}
  .footer-panel{grid-template-columns:1fr;gap:24px;padding:24px 18px 16px}
  .footer-primary{grid-column:auto}.footer-navigation,.footer-notes{padding-top:2px}
  .footer-bottom{grid-column:auto;align-items:flex-start;flex-direction:column;gap:6px}
  .footer-motto{font-size:8px}
}
@media (orientation:landscape) and (max-height:500px){
  .site-header{position:relative;top:0}.header-main{min-height:56px}
}