/* The game images are the gallery. Shared chrome stays quiet around them. */
@font-face {
  font-family: "Gallery DM";
  src: url("/assets/dm-sans.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
.game-gallery { font-family: "Gallery DM", sans-serif; }
.game-gallery::selection { background: var(--g-accent-2); color: var(--g-halo); }
.game-gallery .wrap { max-width: 1480px; padding-inline: 40px; }
.game-gallery .topbar { min-height: 76px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.game-gallery .brand { font: 600 18px/1.3 "Gallery DM", sans-serif; letter-spacing: -.02em; }
.game-gallery .brand .mark { width: 16px; height: 16px; border-radius: 4px; }
.gallery-heading { display: flex; align-items: baseline; padding: 24px 0 22px; }
.gallery-heading h1 { display: flex; align-items: baseline; gap: 10px; font: 500 24px/1.2 "Gallery DM", sans-serif; letter-spacing: -.025em; }
.gallery-count { color: var(--g-ink-2); font: 400 13px/1.4 "Gallery DM", sans-serif; letter-spacing: 0; font-variant-numeric: tabular-nums; }
#lobby.gallery-view .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; padding: 0 0 48px; align-items: start; }
.gallery-view .gcard { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; transition: none; }
.gallery-view .gcard .thumb { aspect-ratio: 3 / 2; border: 1px solid var(--hair); border-radius: 6px; }
.thumb.runtime-preview > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.preview-unavailable { position: absolute; inset: 0; display: grid; place-items: center; color: var(--g-ink-2); font: var(--chrome); }
.gallery-view .gcard .name { gap: 8px; border: 0; padding: 11px 0 0; font: 500 16px/1.3 "Gallery DM", sans-serif; letter-spacing: -.015em; }
.gallery-view .gcard .tag { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding: 4px 0 0; min-height: 2.8em; font: 400 12.5px/1.4 "Gallery DM", sans-serif; color: var(--g-ink-2); }
.gallery-view .gcard.is-done { opacity: 1; filter: none; }
.gallery-view .gcard.is-done .name::after { content: none; }
.gallery-view .played-mark { flex: none; width: 14px; height: 14px; margin-left: auto; fill: none; stroke: var(--g-ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gallery-view .gcard:active, .gallery-view .gcard:hover { transform: none; box-shadow: none; }
.gallery-view .gcard:focus-visible { outline: 2px solid var(--g-accent-2); outline-offset: 5px; border-radius: 4px; }
.gallery-view .game-favorite { top: 5px; right: 5px; width: 44px; height: 44px; border: 0; border-radius: 4px; background: transparent; }
.gallery-view .game-favorite::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--g-panel); opacity: .94; box-shadow: 0 2px 7px #182a2424; }
.gallery-view .game-favorite svg { position: relative; width: 17px; height: 17px; }
.game-modes { display: flex; gap: 18px; margin-top: 2px; }
.game-modes a { display: inline-flex; align-items: center; min-height: 36px; padding: 2px 0; color: var(--g-ink-2); font: 400 12.5px/1.3 "Gallery DM", sans-serif; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
.game-modes a:first-child { color: var(--g-ink); }
.game-modes a.is-previewing, .game-modes a:hover, .game-modes a:focus-visible { color: var(--g-ink); text-decoration-color: currentColor; }
.preview-style-note { grid-column: 1 / -1; max-width: 23ch; padding: 2px 0 4px; color: var(--g-ink-2); font: 11px/1.4 "Gallery DM", sans-serif; }
@media (hover: hover) and (pointer: fine) {
  .gallery-view .gcard:hover .nm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .gallery-view .gcard:hover .thumb { border-color: color-mix(in srgb, var(--g-ink) 30%, transparent); }
}
@media (max-width: 1100px) { #lobby.gallery-view .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .game-gallery .wrap { padding-inline: 16px; }
  .game-gallery .topbar { min-height: 64px; padding: 8px 0; }
  .gallery-heading { padding: 22px 0 18px; }
  .gallery-heading h1 { font-size: 22px; }
  #lobby.gallery-view .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .gallery-view .gcard .name { padding-top: 9px; font-size: 14px; }
  .gallery-view .gcard .tag { padding-top: 3px; font-size: 11.5px; line-height: 1.4; }
  .gallery-view .game-favorite { top: 1px; right: 1px; }
  .game-modes { gap: 16px; }
  .game-modes a { min-height: 44px; min-width: 44px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-view .gcard, .gallery-view .game-favorite { transition: none; animation: none; }
}