/* city-blocks hd: the HD canvas sits UNDER the lot buttons inside #card-grid. Once it has painted
   (html.pip-hd) the buttons turn transparent but stay fully clickable, focusable and labelled, and
   their numbers (+3 previews, population badges) float above the art. Off with ?hd=0. */
#card-grid .hd-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}
html.pip-hd #card-grid .cell {
  position: relative;
  z-index: 1;
  background: transparent;
  border-color: transparent;
}
html.pip-hd #card-grid .cell:active { background: rgba(255, 255, 255, .14); }
html.pip-hd #card-grid .cell.rock { background: transparent; border-color: transparent; }
html.pip-hd #card-grid .cell > span[aria-hidden="true"]:not(.ghost):not(.cp) { opacity: 0; }
html.pip-hd #card-grid .citizen { display: none; }
html.pip-hd #card-grid .cell .ghost {
  background: rgba(15, 23, 42, .62);
  color: #e2e8f0;
  border-radius: 6px;
  left: 14%;
  right: 14%;
  padding: 2px 0;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
html.pip-hd #card-grid .cell .ghost.up { background: rgba(21, 128, 61, .85); color: #fff; }
html.pip-hd #card-grid .cell .ghost.dn { background: rgba(185, 28, 28, .85); color: #fff; }
html.pip-hd #card-grid .cell .ghost.top { background: #16a34a; color: #fff; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0, 0, 0, .35); }
html.pip-hd #card-grid .cell.placed .cp {
  background: rgba(15, 23, 42, .72);
  color: #f1f5f9;
  border-radius: 99px;
  padding: 2px 4px;
  top: 3px;
  right: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
html.pip-hd #card-grid .cell.pop-in { animation: none; }
html.pip-hd #card-grid { box-shadow: 0 6px 18px rgba(15, 23, 42, .28); border-radius: 10px; }
/* the building picker wears the same sprites */
html.pip-hd .pick-btn .pick-icon {
  display: block;
  width: 30px;
  height: 30px;
  font-size: 0;
  background: url("./assets/hd/city-blocks-atlas-v1.webp") no-repeat;
  background-size: 800% auto;
}
html.pip-hd .pick-btn[data-i="0"] .pick-icon { background-position: 0 0; }
html.pip-hd .pick-btn[data-i="1"] .pick-icon { background-position: calc(100% / 7) 0; }
html.pip-hd .pick-btn[data-i="2"] .pick-icon { background-position: calc(200% / 7) 0; }
html.pip-hd .pick-btn[data-i="3"] .pick-icon { background-position: calc(300% / 7) 0; }
html.pip-hd .pick-btn[data-i="4"] .pick-icon { background-position: calc(400% / 7) 0; }
html.pip-hd .pick-btn { transition: transform .2s cubic-bezier(.3, 1.7, .5, 1); }
html.pip-hd .pick-btn.sel { transform: translateY(-3px) scale(1.06); }
@media (prefers-reduced-motion: reduce) { html.pip-hd .pick-btn { transition: none; } html.pip-hd .pick-btn.sel { transform: none; } }

.hd-about { margin: 1.25rem 0 .5rem; }
.hd-about h2 { margin: 0 0 .5rem; }
.hd-about p { margin: 0 0 .6rem; line-height: 1.55; }