/* v0.2.21 VS artwork placement */

#versus{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:start!important;
  margin-top:45px!important;
  height:228px!important;
  overflow:visible!important;
  transform:none!important;
}
#versus::before,
#versus::after{
  content:none!important;
  display:none!important;
}
#vs-art{
  display:block!important;
  max-width:100%!important;
  height:auto!important;
  transform:scale(1.275)!important;
  transform-origin:center center!important;
  pointer-events:none!important;
}

@media (min-width:901px){
  #vs-art{transform:scale(1.4025)!important;}
}

@media (max-width:900px){
  #versus{
    height:min(36vw,198px)!important;
    margin-top:40px!important;
    transform:none!important;
  }
}

@media (max-width:430px){
  #versus{
    height:37vw!important;
    margin-top:40px!important;
    transform:none!important;
  }
}

html.desktop-canvas-mode #versus{
  height:228px!important;
  margin-top:45px!important;
  transform:none!important;
}
html.desktop-canvas-mode #vs-art{transform:scale(1.4025)!important;}

/* v0.2.21 desktop layout refinement: move the gameplay stack another 5px up
   and narrow the difficulty/start column by 60px without affecting mobile. */
@media (min-width:901px){
  #top-stats{top:calc(29.1% - 15px)!important;}
  #round-control{
    top:calc(39.5% - 15px)!important;
    grid-template-columns:350px 196px!important;
  }
  #difficulty-control,
  #difficulty-select,
  #start-game-button,
  #round-timer{width:350px!important;}
  #status-panel{top:calc(56.3% - 23px)!important;}
  #game-board{top:calc(61.8% - 44px)!important;}
}

html.desktop-canvas-mode #top-stats{top:calc(29.1% - 15px)!important;}
html.desktop-canvas-mode #round-control{
  top:calc(39.5% - 15px)!important;
  grid-template-columns:350px 196px!important;
}
html.desktop-canvas-mode #difficulty-control,
html.desktop-canvas-mode #difficulty-select,
html.desktop-canvas-mode #start-game-button,
html.desktop-canvas-mode #round-timer{width:350px!important;}
html.desktop-canvas-mode #status-panel{top:calc(56.3% - 23px)!important;}
html.desktop-canvas-mode #game-board{top:calc(61.8% - 44px)!important;}

/* Use dark scoreboard-blue text over the difficulty-colored matchup boxes,
   with the same stronger shadow treatment used elsewhere in the interface. */
#status-message.compare-simple,
#status-message.compare-easy,
#status-message.compare-challenging,
#status-message.compare-difficult,
#status-message.compare-hard{
  display:inline-block!important;
  padding:5px 12px!important;
  border-radius:8px!important;
  color:var(--map-ink)!important;
  box-shadow:0 4px 8px rgba(64,48,28,.34)!important;
}
#status-message.compare-simple{background:var(--color-primary-hover)!important;}
#status-message.compare-easy{background:var(--color-success)!important;}
#status-message.compare-challenging{background:var(--color-warning)!important;}
#status-message.compare-difficult{background:#f97316!important;}
#status-message.compare-hard{background:var(--color-danger)!important;}

/* Pull only live matchup-difficulty feedback closer to the desktop timer. */
@media (min-width:901px){
  #status-message.compare-simple,
  #status-message.compare-easy,
  #status-message.compare-challenging,
  #status-message.compare-difficult,
  #status-message.compare-hard{transform:translateY(-10px)!important;}
}
html.desktop-canvas-mode #status-message.compare-simple,
html.desktop-canvas-mode #status-message.compare-easy,
html.desktop-canvas-mode #status-message.compare-challenging,
html.desktop-canvas-mode #status-message.compare-difficult,
html.desktop-canvas-mode #status-message.compare-hard{transform:translateY(-10px)!important;}

/* Give the timer box the same visible depth as the neighboring controls. */
#round-timer{box-shadow:0 5px 10px rgba(21,59,82,.56)!important;}

/* Place-card label treatment: combine place + region/country in one taller box
   and let the box overlap roughly the top 10% of the circular image. */
.city-card{
  overflow:visible!important;
}
.place-label{
  order:1!important;
  position:relative!important;
  z-index:4!important;
  width:100%!important;
  height:68px!important;
  margin:0 0 -10%!important;
  padding:4px 8px 3.5px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  background:#f6eed6!important;
  border-radius:6px!important;
  box-shadow:0 3px 7px rgba(61,48,30,.36)!important;
  color:var(--map-ink)!important;
}
.place-label .city-name{
  order:initial!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:var(--map-ink)!important;
  font-size:27px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
.place-label .state-name{
  order:initial!important;
  width:100%!important;
  margin:5px 0 0!important;
  color:#4c6270!important;
  font-size:12.375px!important;
  text-align:center!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
.city-card .city-image-frame{
  order:2!important;
  margin-top:0!important;
}
.city-card .population{
  order:3!important;
}

/* Population reveal: reserve the full styled box even while hidden so the reveal
   adds visual emphasis without changing the card or surrounding HUD geometry. */
.city-card .population{
  min-width:112px!important;
  min-height:40px!important;
  padding:5px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:var(--map-ink)!important;
  color:#f6eed6!important;
  border-radius:8px!important;
  box-shadow:0 4px 8px rgba(21,59,82,.5)!important;
  font-weight:900!important;
  line-height:1!important;
}
@media (min-width:901px){
  .city-card .population{font-size:30px!important;}
}
html.desktop-canvas-mode .city-card .population{font-size:30px!important;}

@media (max-width:900px){
  #game-board{margin-top:14px!important;}
  .place-label{
    height:58px!important;
    padding:3px 5px 2.5px!important;
    border-radius:5px!important;
  }
  .place-label .city-name{
    font-size:clamp(1.05rem,4.8vw,1.5rem)!important;
  }
  .place-label .state-name{
    margin-top:3px!important;
    font-size:clamp(.69rem,3.225vw,.975rem)!important;
  }
  html:not(.desktop-canvas-mode) .city-card .population{
    font-size:clamp(1.08rem,10.5cqi,3rem)!important;
  }
  /* Keep the mobile status row at the matchup-box height so switching between
     plain status text and difficulty feedback cannot move the place cards. */
  html:not(.desktop-canvas-mode) #status-panel{
    height:30px!important;
    min-height:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  /* Do not let selection feedback shift a card upward when the score popup appears. */
  .city-card.selected-card{
    transform:none!important;
  }
}

@media (max-width:900px) and (max-height:620px){
  html:not(.desktop-canvas-mode) .city-card .population{
    font-size:clamp(1.02rem,9.75cqi,2.55rem)!important;
  }
}
@media (max-width:420px){
  html:not(.desktop-canvas-mode) .city-card .population{
    font-size:clamp(.99rem,9.3cqi,2.025rem)!important;
  }
}

html.desktop-canvas-mode .place-label{
  height:68px!important;
  padding:4px 8px 3.5px!important;
  border-radius:6px!important;
}
html.desktop-canvas-mode .place-label .city-name{
  font-size:27px!important;
}
html.desktop-canvas-mode .place-label .state-name{
  margin-top:5px!important;
  font-size:12.375px!important;
}

/* Custom difficulty dropdown: keeps the chevron visible on every platform and
   constrains the opened choices to the same width as the closed control. */
#difficulty-control{
  position:relative!important;
  display:block!important;
}
#difficulty-select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
#difficulty-control::after{content:none!important;display:none!important;}
#difficulty-button{
  position:relative!important;
  width:100%!important;
  height:54px!important;
  padding:0 46px!important;
  border:1px solid rgba(69,72,57,.22)!important;
  border-radius:11px!important;
  background:rgba(248,242,222,.95)!important;
  color:var(--map-ink)!important;
  box-shadow:0 4px 8px rgba(64,48,28,.34)!important;
  font:inherit!important;
  font-size:19.04px!important;
  font-weight:900!important;
  text-align:center!important;
  cursor:pointer!important;
}
#difficulty-button:disabled{
  opacity:.55!important;
  cursor:not-allowed!important;
}
#difficulty-button:focus-visible{
  outline:2px solid var(--color-primary-hover)!important;
  outline-offset:2px!important;
}
#difficulty-button-label{
  display:block!important;
  width:100%!important;
  text-align:center!important;
  pointer-events:none!important;
}
.difficulty-chevron{
  position:absolute!important;
  right:16px!important;
  top:50%!important;
  width:11px!important;
  height:11px!important;
  border-right:3px solid var(--map-ink)!important;
  border-bottom:3px solid var(--map-ink)!important;
  transform:translateY(-68%) rotate(45deg)!important;
  transform-origin:center!important;
  pointer-events:none!important;
}
#difficulty-menu{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  top:calc(100% + 3px)!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(69,72,57,.28)!important;
  border-radius:8px!important;
  background:#f8f2de!important;
  box-shadow:0 8px 18px rgba(64,48,28,.34)!important;
  z-index:80!important;
}
#difficulty-menu[hidden]{display:none!important;}
.difficulty-option{
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:7px 12px!important;
  border:0!important;
  border-radius:0!important;
  background:#f8f2de!important;
  color:var(--map-ink)!important;
  font:inherit!important;
  font-size:19.04px!important;
  font-weight:500!important;
  line-height:1.15!important;
  text-align:center!important;
  cursor:pointer!important;
  transform:none!important;
}
.difficulty-option[aria-selected="true"]{
  background:#176fd1!important;
  color:#fff!important;
  font-weight:700!important;
}
.difficulty-option:hover,
.difficulty-option:focus-visible{
  background:#dbe8ef!important;
  color:var(--map-ink)!important;
  outline:none!important;
}
.difficulty-option[aria-selected="true"]:hover,
.difficulty-option[aria-selected="true"]:focus-visible{
  background:#176fd1!important;
  color:#fff!important;
}

@media (max-width:900px){
  #difficulty-button{
    height:40px!important;
    padding-left:42px!important;
    padding-right:42px!important;
  }
  .difficulty-chevron{
    right:14px!important;
    width:10px!important;
    height:10px!important;
  }
  #difficulty-menu{
    max-height:min(220px,calc(100svh - 24px))!important;
    overflow-y:auto!important;
  }
}

@media (max-width:900px) and (max-height:760px) and (hover:none),
       (max-width:900px) and (max-height:760px) and (pointer:coarse){
  #difficulty-button{height:34px!important;}
  .difficulty-option{padding-top:5px!important;padding-bottom:5px!important;}
}

/* Keep normal desktop wrappers in their grid row while remaining menu anchors. */
@media (min-width:901px){
  #difficulty-control{
    position:relative!important;
    display:block!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
  }
}

/* desktop-canvas-mode can be active even when the viewport itself is <=900px.
   Force the custom difficulty control back to desktop design-space dimensions so
   it scales with the locked 1536x1024 canvas instead of picking up mobile rules. */
html.desktop-canvas-mode #difficulty-control{
  position:relative!important;
  display:block!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:350px!important;
  transform:none!important;
}
html.desktop-canvas-mode #difficulty-button{
  width:350px!important;
  height:54px!important;
  padding-left:46px!important;
  padding-right:46px!important;
  font-size:19.04px!important;
}
html.desktop-canvas-mode .difficulty-chevron{
  right:16px!important;
  width:11px!important;
  height:11px!important;
}
html.desktop-canvas-mode #difficulty-menu{
  left:0!important;
  right:auto!important;
  top:calc(100% + 3px)!important;
  width:350px!important;
  max-width:350px!important;
  max-height:none!important;
  overflow:hidden!important;
}
html.desktop-canvas-mode .difficulty-option{
  padding-top:7px!important;
  padding-bottom:7px!important;
  font-size:19.04px!important;
}

/* Population reveal refinements: use the same yellow as score totals and, on
   true mobile layouts, place the reveal box over the image circle without
   changing layout. The box is moved from its normal position below the image by
   half the image diameter plus the gap and half the reveal-box height, which
   aligns the two elements' vertical centers. */
.city-card .population{
  color:var(--color-warning)!important;
}
@media (max-width:900px){
  html:not(.desktop-canvas-mode) .city-card .population{
    position:relative!important;
    z-index:5!important;
    transform:translateY(calc(-50% - min(47cqi,33.35cqb,214px) - clamp(10px,5.2cqi,24px)))!important;
  }
}
@media (max-width:700px){
  html:not(.desktop-canvas-mode) .city-card .population{
    transform:translateY(calc(-50% - min(47cqi,31.65cqb,190px) - clamp(9px,5cqi,20px)))!important;
  }
}
@media (max-width:900px) and (max-height:620px){
  html:not(.desktop-canvas-mode) .city-card .population{
    transform:translateY(calc(-50% - min(47cqi,28.2cqb,161px) - clamp(7px,4cqi,14px)))!important;
  }
}
@media (max-width:420px){
  html:not(.desktop-canvas-mode) .city-card .population{
    transform:translateY(calc(-50% - min(46cqi,28.75cqb,138px) - clamp(7px,4.5cqi,14px)))!important;
  }
}