@import url("../js/hd-cards/hd-about.css");
/* higher-lower - HD tuning, only under html.hdc (off with ?hd=0 or after the perf guard). */
html.hdc #hl-card[data-hdc] { border-width: 0 !important; box-shadow: 0 8px 20px rgb(0 0 0 / .45) !important; }
html.hdc #hl-card.glow[data-hdc] { box-shadow: 0 0 0 4px #22c55e, 0 0 22px 4px rgb(34 197 94 / .55), 0 8px 20px rgb(0 0 0 / .45) !important; }
html.hdc #hl-card.shake[data-hdc] { box-shadow: 0 0 0 4px #ef4444, 0 0 22px 4px rgb(239 68 68 / .55), 0 8px 20px rgb(0 0 0 / .45) !important; }
html.hdc #hl-card.push[data-hdc] { box-shadow: 0 0 0 4px #7C3AED, 0 0 22px 4px rgb(124 58 237 / .55), 0 8px 20px rgb(0 0 0 / .45) !important; }
html.hdc #hl-card.flip-out, html.hdc #hl-card.flip-in { transform: none !important; animation: none !important; transition: none !important; }
html.hdc #card-stage[data-hdc-felt] { border-radius: 16px; padding: 1rem 0; box-shadow: inset 0 0 40px rgb(0 0 0 / .4); }
/* Full screen: on a wide screen the card sits left, the numbers and buttons stack on the right. */
@media (min-aspect-ratio: 12/10) {
  html.pip-immersive #hl-play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr); column-gap: 16px; align-items: center; }
  html.pip-immersive #hl-play > #card-grid { grid-column: 1; grid-row: 1 / span 4; }
  html.pip-immersive #hl-play > .hl-stats { grid-column: 2; grid-row: 1; }
  html.pip-immersive #hl-play > #status { grid-column: 2; grid-row: 2; }
  html.pip-immersive #hl-play > #color-btns { grid-column: 2; grid-row: 3; }
  html.pip-immersive #hl-play > .hl-count { grid-column: 2; grid-row: 4; }
}