/* Game picker as a hand of cards */
.game-btn { gap: 10px; font-weight: 500; }
.game-btn .stack { position: relative; width: 16px; height: 20px; }
.game-btn .stack i { position: absolute; inset: 0; border: 1.5px solid currentColor; border-radius: 3px; background: var(--surface); }
.game-btn .stack i:nth-child(1) { transform: rotate(-14deg); }
.game-btn .stack i:nth-child(3) { transform: rotate(14deg); }
#handOverlay { position: fixed; inset: 0; z-index: 140; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 24px; background: var(--overlay); backdrop-filter: blur(3px); }
#handOverlay[hidden] { display: none; }
#handOverlay h2 { margin: 0; color: #fff; font-size: 26px; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.hand-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface); font-size: 22px; cursor: pointer; }
.hand { display: flex; justify-content: center; padding: 30px 20px 10px; }
.gcard { position: relative; flex: none; width: 150px; aspect-ratio: 5 / 7; margin: 0 -10px; padding: 0; border: 4px solid #111; border-radius: 14px; overflow: hidden; cursor: pointer; color: #fff; text-align: center;
  background: linear-gradient(160deg, var(--a), var(--b)); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); transform: translateY(var(--y)) rotate(var(--r)); transform-origin: 50% 120%; transition: transform .18s ease, box-shadow .18s ease; }
.gcard::before { content: ''; position: absolute; inset: 6px; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 8px; pointer-events: none; }
.gcard:hover:not(:disabled), .gcard:focus-visible { transform: translateY(-26px) rotate(0) scale(1.1); z-index: 5; box-shadow: 0 22px 40px rgba(0, 0, 0, .55); }
.gcard.current { outline: 3px solid var(--accent); outline-offset: 2px; }
.gcard .g-corner { position: absolute; left: 12px; top: 10px; font: 700 12px/1 'Inter Tight', Inter, sans-serif; letter-spacing: .08em; opacity: .9; }
.gcard .g-art { position: absolute; inset: 0; display: grid; place-items: center; font: 800 34px/1 'Inter Tight', Inter, sans-serif; letter-spacing: -.02em; text-shadow: 0 3px 10px rgba(0, 0, 0, .45); }
.gcard .g-name { position: absolute; left: 10px; right: 10px; bottom: 12px; padding: 6px 4px; background: rgba(0, 0, 0, .55); border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.2; }
.gcard.soon { filter: grayscale(.85) brightness(.8); cursor: default; }
.gcard .g-soon { position: absolute; right: 8px; top: 8px; padding: 2px 8px; background: #fff; color: #111; border-radius: 99px; font-size: 10px; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  #handOverlay:not([hidden]) .gcard { animation: deal .35s ease backwards; animation-delay: var(--d); }
  @keyframes deal { from { opacity: 0; transform: translate(-120px, 40px) rotate(-30deg); } }
}
@media (max-width: 760px) {
  .gcard { width: 74px; margin: 0 -13px; border-width: 3px; }
  .gcard .g-art { font-size: 22px; }
  .gcard .g-name { font-size: 9px; left: 5px; right: 5px; bottom: 6px; }
  #handOverlay h2 { font-size: 20px; }
}

/* No jumping when the button text changes to "loading" or when results make a scrollbar appear */
html { scrollbar-gutter: stable; }
#go { min-width: 9.5rem; }
.row button { white-space: nowrap; }
#handOverlay { overflow: hidden; }

/* Card art inside the game cards */
.gcard .g-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.gcard .g-corner { z-index: 2; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.gcard .g-name { z-index: 2; }
.gcard .g-soon { z-index: 2; }
.gcard::before { z-index: 1; }

/* With the real card picture there is no frame of ours around it (the picture has its own border and rounded corners) */
.gcard.has-art { border-width: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .4)); }
.gcard.has-art::before, .gcard.has-art .g-art { display: none; }
.gcard.has-art .g-img { inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 4.8% / 3.4%; object-fit: contain; } /* cards are not all 5:7 (Yu-Gi-Oh! is narrower): show the whole picture, never crop it */
.gcard.has-art:hover:not(:disabled), .gcard.has-art:focus-visible { box-shadow: none; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .5)); }

/* Phones: two rows of three cards, side by side and a bit bigger, instead of six overlapping in one row (easier to tap) */
@media (max-width: 600px) {
  .hand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; justify-items: center; width: 100%; padding: 20px 14px 14px; }
  #handOverlay { justify-content: flex-start; padding-top: 56px; gap: 8px; overflow-y: auto; }
  .hand .gcard { width: 100%; max-width: 118px; margin: 0; transform: none; }
  .hand .gcard .g-name { font-size: 11px; left: 6px; right: 6px; bottom: 8px; }
}