/* ==========================================================================
   Candy Arcade - responsive layer
   Breakpoints: 1180 / 1000 / 860 / 660 / 460 / 380
   Rule: nothing may ever scroll the page horizontally.
   ========================================================================== */

@media (max-width:1180px){
  .footer-grid{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));row-gap:var(--s6)}
  .hero-grid{gap:var(--s6)}
  .game-layout{grid-template-columns:minmax(0,1fr)}
  .game-sidebar{position:static;max-width:none}
  .ad-slot[data-format="sidebar"]{min-height:120px;max-width:100%}
}

@media (max-width:1000px){
  .nav-list{gap:0}
  .nav-list a{padding:8px 9px;font-size:.86rem}
  .hero{padding:var(--s7) 0 var(--s6)}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .hero-art{max-width:520px;order:-1}
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;max-height:none;margin-bottom:var(--s5)}
}

/* ---- mobile navigation ---- */
@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:fixed;inset:66px 0 auto 0;margin:0;
    background:var(--bg-alt);border-bottom:1px solid var(--border);
    box-shadow:var(--sh-3);max-height:calc(100dvh - 66px);overflow-y:auto;
    transform:translateY(-120%);visibility:hidden;
    transition:transform 240ms var(--ease),visibility 240ms
  }
  .nav.is-open{transform:translateY(0);visibility:visible}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px;padding:var(--s3) var(--s4) var(--s5)}
  .nav-list a{padding:13px var(--s4);border-radius:var(--r-md);font-size:1rem}
  .nav-list li+li{border-top:1px solid var(--border)}
  html[data-nav-open="true"]{overflow:hidden}

  .section{padding:var(--s7) 0}
  h2{margin-top:var(--s5)}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
  .sitemap-cols{columns:1}
  .game-hud{gap:var(--s2)}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}

@media (max-width:660px){
  body{font-size:15.5px}
  .wrap{padding-inline:var(--s4)}
  .hero{padding:var(--s6) 0 var(--s5)}
  .hero-stats{gap:var(--s4);width:100%}
  .hero-stats li{flex:1 1 40%}
  .section-head{flex-direction:column;align-items:flex-start}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s3)}
  .game-card-body{padding:var(--s3)}
  .game-card-desc{-webkit-line-clamp:2;line-clamp:2;font-size:.84rem}
  .cat-grid{grid-template-columns:minmax(0,1fr)}
  .filter-bar{grid-template-columns:minmax(0,1fr)}
  .panel{padding:var(--s4)}
  .btn-lg{padding:13px 24px;font-size:1rem}
  .btn-row .btn{flex:1 1 auto;justify-content:center}
  .footer-bottom{flex-direction:column;align-items:flex-start;text-align:left}
  .article-body{font-size:1rem}
  .game-actions{gap:var(--s2)}
  .game-actions .btn{padding:10px 13px;font-size:.85rem}
  .ad-slot{margin:var(--s5) auto}
  .tip-list li{padding:var(--s3)}
}

@media (max-width:460px){
  .brand-text small{display:none}
  .brand{font-size:1.06rem}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-card-flags{max-width:calc(100% - 52px)}
  .badge{font-size:.66rem;padding:3px 8px}
  .hero-stats b{font-size:1.35rem}
  .game-hud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .game-actions .btn{width:100%}
  .search-bar{flex-direction:column}
  .search-bar .btn{width:100%}
}

@media (max-width:380px){
  .card-grid{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .hero-stats li{flex:1 1 100%}
}

/* ---- landscape phones: give the canvas the screen ---- */
@media (max-height:520px) and (orientation:landscape){
  .site-header{position:static}
  .game-stage{max-height:78dvh}
  .breadcrumbs{padding-top:var(--s2)}
  .game-intro{display:none}
}

/* ---- large screens ---- */
@media (min-width:1500px){
  :root{--wrap:1320px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
}

/* ---- pointer-coarse: bigger touch targets everywhere ---- */
@media (pointer:coarse){
  .nav-list a{padding-block:12px}
  .btn{min-height:46px}
  .btn-sm{min-height:40px}
  .chip{padding:9px 15px}
  .fav-btn{width:44px;height:44px}
  .faq summary{padding-block:var(--s4)}
}

/* ---- touch controls only exist where touch does ---- */
@media (hover:hover) and (pointer:fine){
  .touch-controls{display:none!important}
}