/* v0.2.19 — final layout tuning */

#mobile-tagline{display:none;}

/* Restore interaction feedback around the circular image treatment. */
.city-image-frame{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.city-card.correct-card .city-image-frame{
  border-color:#22c55e!important;
  box-shadow:0 0 0 7px rgba(34,197,94,.42),0 4px 10px rgba(44,40,30,.2)!important;
}
.city-card.incorrect-card .city-image-frame{
  border-color:#ef4444!important;
  box-shadow:0 0 0 7px rgba(239,68,68,.42),0 4px 10px rgba(44,40,30,.2)!important;
}

@media (hover:hover) and (pointer:fine){
  .city-card:hover{
    transform:translateY(-3px) scale(1.025)!important;
  }
  .city-card.correct-card:hover,
  .city-card.incorrect-card:hover{
    transform:translateY(-3px) scale(1.025)!important;
  }
}

@media (min-width:901px){
  html,body{
    width:100%;
    height:100%;
    overflow:hidden!important;
  }

  body{
    position:relative!important;
    display:block!important;
  }

  /* Desktop is authored on a fixed 1536×1024 design canvas. The entire canvas
     is scaled as one unit so every element keeps the same proportions and
     relative placement at smaller/larger desktop viewport sizes. */
  #app{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:1536px!important;
    height:1024px!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    margin:0!important;
    transform:translate(-50%,-50%) scale(var(--desktop-scale,1))!important;
    transform-origin:center center!important;
  }

  /* Keep desktop typography in design-space pixels so it scales with the frame
     instead of independently reacting to viewport units. */
  #app-header h1{font-size:106px!important;}
  #subtitle::before{font-size:21px!important;}
  .stat-label{font-size:12px!important;}
  .stat-value{font-size:23px!important;}
  #difficulty-select{font-size:16px!important;}
  #start-game-button{font-size:24px!important;}
  #menu-button{font-size:17px!important;}
  .timer-label{font-size:13px!important;}
  #timer-value{font-size:52px!important;}
  #status-message{font-size:17px!important;}
  .city-name{font-size:18px!important;}
  .state-name{font-size:11px!important;}
  .population{font-size:20px!important;}
  #versus{font-size:50px!important;}

  /* Start/Timer column is the visual center. Menu remains adjacent to its right. */
  #round-control{
    left:50%!important;
    top:39.5%!important;
    width:606px!important;
    transform:translateX(-205px)!important;
    grid-template-columns:410px 160px!important;
    grid-template-areas:"difficulty ." "start menu"!important;
    column-gap:36px!important;
    row-gap:14px!important;
  }
  #difficulty-control{
    grid-area:difficulty!important;
    width:410px!important;
    justify-self:start!important;
  }
  #difficulty-select{width:410px!important;height:54px!important;}
  #start-game-button,#round-timer{
    grid-area:start!important;
    width:410px!important;
    height:72px!important;
    justify-self:start!important;
  }
  #menu-control{
    grid-area:menu!important;
    width:160px!important;
    justify-self:start!important;
  }
  #menu-button{width:160px!important;height:58px!important;}

  /* Status/feedback text shares the same centerline as Start and Timer. */
  #status-panel{
    left:50%!important;
    right:auto!important;
    width:410px!important;
    transform:translateX(-50%)!important;
    text-align:center!important;
  }

  #app-header{
    left:23%!important;
    right:23%!important;
  }

  #game-board{
    left:30%!important;
    right:auto!important;
    top:61.8%!important;
    width:40%!important;
    grid-template-columns:235px 88px 235px!important;
    gap:22px!important;
    justify-content:center!important;
  }
  .city-card{width:235px!important;max-width:none!important;}
  .city-image-frame{width:228px!important;max-width:none!important;}
  #versus{margin-top:96px!important;}

  /* Score breakdown sits below feedback and clears the place-name labels. */
  #score-popup{
    top:108px!important;
    width:280px!important;
    padding:14px 16px 12px!important;
  }
  .score-popup-row{font-size:14px!important;}
  .score-popup-total{font-size:16px!important;}
  #score-popup-next{font-size:14px!important;}
}

@media (max-width:900px){
  #app{
    padding-top:88px!important;
    padding-bottom:18px!important;
  }
  #app-header{margin-bottom:6px!important;}

  /* On mobile, let the round-control children join the app's flex flow so the
     Menu can sit above the scoring panel without changing desktop structure. */
  #round-control{display:contents!important;}
  #menu-control{
    order:2!important;
    position:relative!important;
    width:max-content!important;
    align-self:center!important;
    z-index:30!important;
    margin-bottom:10px!important;
  }
  #menu-button{
    width:auto!important;
    min-width:0!important;
    padding-left:14px!important;
    padding-right:14px!important;
    white-space:nowrap!important;
  }
  #top-stats{
    order:3!important;
    align-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    margin-bottom:14px!important;
  }
  #difficulty-control{
    order:4!important;
    align-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    margin-bottom:10px!important;
  }
  #start-game-button,#round-timer{
    order:5!important;
    align-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  #status-panel{order:6!important;}
  #game-board{order:7!important;}

  /* Keep the dropdown panel anchored to the visible mobile Menu button. */
  #menu-panel{
    top:calc(100% + 6px)!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    z-index:40!important;
  }

  #game-board{
    margin-top:30px!important;
    padding-bottom:0!important;
    min-height:178px!important;
  }
  #game-board::after{content:none!important;display:none!important;}
  #mobile-tagline{
    order:8!important;
    display:block!important;
    flex:none!important;
    position:static!important;
    width:max-content!important;
    max-width:80%!important;
    margin:34px auto 0!important;
    transform:rotate(-5deg)!important;
    font-family:"Segoe Print","Comic Sans MS",cursive!important;
    font-size:clamp(1.25rem,5.5vw,1.8rem)!important;
    line-height:1.03!important;
    color:var(--map-ink)!important;
    text-align:center!important;
    text-decoration:underline!important;
    text-decoration-color:#d83e2e!important;
    text-decoration-thickness:3px!important;
    text-underline-offset:9px!important;
    z-index:2!important;
  }
}

@media (max-width:430px){
  #app{padding-top:82px!important;}
  #app-header{margin-bottom:4px!important;}
  #top-stats{margin-bottom:12px!important;}
  #game-board{
    margin-top:28px!important;
    min-height:168px!important;
  }
  #mobile-tagline{
    margin-top:32px!important;
    font-size:clamp(1.18rem,5.2vw,1.55rem)!important;
  }
}

/* v0.2.21 — use the purpose-built VS artwork everywhere. */
#versus::before,#versus::after{content:none!important;display:none!important;}
#vs-art{display:block!important;width:100%!important;height:auto!important;}

@media (min-width:901px){
  #versus{
    width:88px!important;
    font-size:0!important;
    line-height:0!important;
  }
}

@media (max-width:900px){
  #versus{
    width:54px!important;
    font-size:0!important;
    line-height:0!important;
    justify-self:center!important;
  }
}

@media (max-width:430px){
  #versus{width:48px!important;}
}

html.desktop-canvas-mode body #app #game-board #versus{
  width:88px!important;
  font-size:0!important;
  line-height:0!important;
}