/* v0.2.19 — mockup fidelity pass */

/* Desktop: fit the approved 3:2 composition entirely inside the viewport. */
@media (min-width:901px){
  html,body{height:100%;overflow:hidden!important;}
  body{display:grid;place-items:center;}
  #app{
    width:min(1536px,96vw,calc((100svh - 24px) * 1.5))!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:3 / 2;
    margin:0!important;
    padding:0!important;
    display:block!important;
  }

  #app-header{position:absolute!important;left:28%;right:17%;top:6.5%;margin:0!important;width:auto!important;text-align:center;}
  #app-header h1{font-size:clamp(3.9rem,6.7vw,7.2rem)!important;line-height:.78!important;max-width:none!important;}
  #app-header h1::before{left:67%!important;top:-7%!important;font-size:.62em!important;}
  #subtitle{margin-top:13px!important;padding:8px 28px!important;}
  #subtitle::before{font-size:clamp(.92rem,1.35vw,1.48rem)!important;}

  #top-stats{left:19.5%!important;top:29.1%!important;width:164px!important;padding:14px 16px!important;}
  .stat-card{padding:5px 0!important;}
  .stat-label{font-size:.77rem!important;}
  .stat-value{font-size:1.45rem!important;}

  #round-control{position:absolute!important;left:37.4%;top:39.5%;width:40%;margin:0!important;display:grid!important;grid-template-columns:minmax(290px,1fr) 175px!important;grid-template-areas:"difficulty difficulty" "start menu"!important;gap:15px 38px!important;transform:none!important;}
  #difficulty-control{position:static!important;transform:none!important;width:100%!important;display:block!important;grid-area:difficulty!important;}
  #difficulty-select{width:100%!important;height:54px!important;}
  #start-game-button,#round-timer{height:72px!important;}
  #menu-control{position:static!important;transform:none!important;width:100%!important;display:block!important;grid-area:menu!important;}
  #menu-button{width:100%!important;height:58px!important;}
  #menu-panel{right:0!important;}

  #status-panel{position:absolute!important;left:34%;right:22%;top:56.3%;margin:0!important;text-align:center;}
  #status-message{font-size:clamp(.82rem,1vw,1.08rem)!important;}

  #game-board{position:absolute!important;left:28.1%;right:21%;top:61.4%;bottom:auto;width:auto!important;height:auto!important;display:grid!important;grid-template-columns:minmax(170px,235px) 82px minmax(170px,235px)!important;gap:28px!important;justify-content:center!important;align-items:start!important;padding:0!important;margin:0!important;}
  .city-card{width:min(15.4vw,235px)!important;}
  .city-image-frame{width:min(15vw,228px)!important;border-width:7px!important;}
  .city-name{font-size:clamp(.82rem,1vw,1.02rem)!important;padding:9px 8px 7px!important;}
  #versus{margin-top:82px!important;font-size:clamp(2.4rem,3vw,3.25rem)!important;}

  #sound-toggle-button{display:none!important;}
  #app-footer{display:none!important;}
}

/* Mobile: explicit vertical flow matching the approved phone mockup. */
@media (max-width:900px){
  html,body{height:100%;overflow:hidden!important;}
  body{min-height:100svh!important;}
  #app{
    width:min(520px,100vw)!important;
    height:100svh!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:10px 14px 18px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .map-rail-left,.map-rail-right{display:none!important;}
  #app::before{background:rgba(248,240,211,.43)!important;}

  #app-header{order:1!important;flex:none!important;margin:0 0 9px!important;}
  #app-header h1{font-size:clamp(2.65rem,13.4vw,4.25rem)!important;line-height:.79!important;max-width:94%!important;}
  #app-header h1::before{left:67%!important;top:-7%!important;font-size:.69em!important;}
  #subtitle{margin-top:6px!important;padding:5px 12px!important;}
  #subtitle::before{font-size:clamp(.68rem,3.05vw,.92rem)!important;}

  #top-stats{order:2!important;position:static!important;width:100%!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;flex:none!important;margin:0 0 8px!important;padding:8px 3px!important;border-radius:8px!important;}
  .stat-card{text-align:center!important;padding:2px 3px!important;border-right:1px solid rgba(20,70,100,.22)!important;}
  .stat-card:last-child{border-right:0!important;}
  .stat-label{font-size:clamp(.44rem,1.9vw,.58rem)!important;line-height:1!important;}
  .stat-value{font-size:clamp(.95rem,4vw,1.2rem)!important;margin-top:3px!important;}

  #round-control{order:3!important;position:static!important;width:100%!important;height:auto!important;margin:0!important;display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"difficulty" "start" "menu"!important;gap:7px!important;flex:none!important;transform:none!important;}
  #difficulty-control{position:static!important;top:auto!important;left:auto!important;width:92%!important;justify-self:center!important;display:block!important;transform:none!important;grid-area:difficulty!important;}
  #difficulty-select{width:100%!important;height:42px!important;padding:0 28px 0 12px!important;}
  #start-game-button,#round-timer{grid-area:start!important;width:92%!important;height:54px!important;justify-self:center!important;}
  #start-game-button{font-size:clamp(1.18rem,5vw,1.5rem)!important;}
  #menu-control{position:static!important;top:auto!important;right:auto!important;width:54%!important;justify-self:center!important;display:block!important;transform:none!important;grid-area:menu!important;z-index:5!important;}
  #menu-button{width:100%!important;height:46px!important;padding:0!important;}
  #menu-panel{top:calc(100% + 6px)!important;right:0!important;width:min(260px,88vw)!important;}

  #status-panel{order:4!important;display:none!important;}

  #game-board{order:5!important;position:relative!important;width:100%!important;height:auto!important;min-height:0!important;margin:14px 0 0!important;padding:0 0 78px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr)!important;gap:5px!important;align-items:start!important;flex:none!important;}
  .city-card{width:38vw!important;max-width:190px!important;justify-self:center!important;}
  .city-image-frame{width:37vw!important;max-width:184px!important;border-width:6px!important;}
  .city-name{font-size:clamp(.7rem,3.15vw,.95rem)!important;padding:7px 4px!important;}
  .state-name{font-size:clamp(.44rem,2vw,.62rem)!important;}
  .population{font-size:clamp(.76rem,3vw,1rem)!important;}
  #versus{margin-top:12.5vw!important;font-size:clamp(1.65rem,6.8vw,2.35rem)!important;}
  #versus::before,#versus::after{font-size:.28em!important;margin:0 .06em!important;}
  #sound-toggle-button{display:none!important;}

  #game-board::after{content:"Big World.\A Same Question."!important;white-space:pre!important;position:absolute!important;left:50%!important;top:calc(100% - 58px)!important;transform:translateX(-50%) rotate(-5deg)!important;width:max-content!important;text-align:center!important;font-family:"Segoe Print","Comic Sans MS",cursive!important;font-size:clamp(1.15rem,5.3vw,1.6rem)!important;line-height:1.02!important;color:var(--map-ink)!important;text-decoration:underline!important;text-decoration-color:#d83e2e!important;text-decoration-thickness:3px!important;text-underline-offset:8px!important;}
  #app-footer{display:none!important;}
}

@media (max-width:430px){
  #app{padding-left:11px!important;padding-right:11px!important;}
  #app-header h1{font-size:clamp(2.55rem,13vw,3.55rem)!important;}
  #subtitle::before{font-size:clamp(.64rem,2.9vw,.82rem)!important;}
  #top-stats{margin-bottom:7px!important;padding:7px 2px!important;}
  #round-control{gap:6px!important;}
  #difficulty-select{height:40px!important;}
  #start-game-button,#round-timer{height:52px!important;}
  #menu-button{height:44px!important;}
  #game-board{margin-top:12px!important;padding-bottom:72px!important;grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr)!important;}
  .city-card{width:38vw!important;}
  .city-image-frame{width:37vw!important;}
  #versus{margin-top:12vw!important;font-size:clamp(1.55rem,6.5vw,2.05rem)!important;}
  #game-board::after{top:calc(100% - 52px)!important;font-size:clamp(1.08rem,5vw,1.45rem)!important;}
}