/* ═══════════════════════════════════════════════════════════════════════════

 * Game media system — covers (wide) vs icons (square)

 * Covers: static/images/covers/{game}.jpg|png|webp (prefer 16:9 wide assets)

 * Icons:   static/images/icons/{game}.webp

 * ═══════════════════════════════════════════════════════════════════════════ */



:root {

  --game-cover-ratio: 16 / 9;

  --game-cover-radius: 0;

  --game-icon-radius: 9px;

  --game-cover-pos: center 36%;

  --game-cover-scale: 1;

  --game-cover-scale-hover: 1.03;

  --game-icon-pad: 8%;

  --game-media-transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1),

    filter 280ms ease;

}



/* ── Wide cover (lobby cards, hero blocks) ── */

.game-cover {

  position: relative;

  display: block;

  width: 100%;

  height: 100%;

  min-height: 0;

  overflow: hidden;

  border-radius: var(--game-cover-radius);

  background:

    radial-gradient(ellipse 80% 70% at 50% 35%, rgba(72, 98, 138, 0.1) 0%, transparent 65%),

    linear-gradient(155deg, #222c3c 0%, #151d28 100%);

  isolation: isolate;

}



.game-cover__img {

  position: absolute;

  inset: 0;

  display: block;

  width: 100%;

  height: 100%;

  max-width: none;

  max-height: none;

  margin: 0;

  padding: 0;

  border: 0;

  object-fit: cover;

  object-position: var(--game-cover-pos, center 36%);

  transform: scale(var(--game-cover-scale));

  transform-origin: center center;

  transition: var(--game-media-transition);

  image-rendering: auto;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  will-change: transform;

  filter: saturate(1.16) contrast(1.04) brightness(1.1);

}



/* Square source used as cover until wide asset is provided */

.game-cover--square-src .game-cover__img,

.game-cover--fallback .game-cover__img {

  object-position: center center;

  transform: scale(1);

}



.game-cover--square-src:hover .game-cover__img,

.lobby-card--feed:hover .game-cover--square-src .game-cover__img {

  transform: scale(1.03);

}



.lobby-card--feed:hover .game-cover:not(.game-cover--square-src) .game-cover__img {

  transform: scale(var(--game-cover-scale-hover));

  filter: saturate(1.2) contrast(1.05) brightness(1.12);

}



.game-cover--fallback .game-cover__img {

  filter: saturate(1.08) contrast(1.03) brightness(1.06);

}



/* Unified overlay stack for covers */

.game-cover__overlay {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 2;

}



.game-cover__overlay--shade {

  z-index: 1;

  background:

    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 24%),

    linear-gradient(180deg, transparent 80%, rgba(0, 0, 0, 0.08) 100%);

}



.game-cover__overlay--fade {

  z-index: 2;

  background: linear-gradient(

    90deg,

    transparent 0%,

    transparent 55%,

    rgba(16, 22, 30, 0.16) 78%,

    rgba(16, 22, 30, 0.38) 100%

  );

}



/* ── Compact square icon (sidebar, lists) ── */

.game-icon {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  overflow: hidden;

  border-radius: var(--game-icon-radius);

  background: linear-gradient(155deg, #2c384a 0%, #1f2a3a 52%, #182230 100%);

  border: 1px solid rgba(255, 255, 255, 0.1);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.08),

    0 2px 6px rgba(0, 0, 0, 0.18);

  flex-shrink: 0;

}



.game-icon__img {

  display: block;

  width: calc(100% - var(--game-icon-pad));

  height: calc(100% - var(--game-icon-pad));

  max-width: calc(100% - var(--game-icon-pad));

  max-height: calc(100% - var(--game-icon-pad));

  object-fit: contain;

  object-position: center;

  margin: 0;

  padding: 0;

  border: 0;

  image-rendering: auto;

  filter: saturate(1.14) brightness(1.16) contrast(1.05);

  transition: transform 200ms ease, filter 200ms ease;

}



.game-icon__fallback {

  display: none;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  font-size: 13px;

  color: rgba(200, 210, 224, 0.55);

}



.game-icon__fallback:only-child {

  display: flex;

}



a:hover .game-icon__img,

.lb-rail-game:hover .game-icon__img,

.lb-rail-rec:hover .game-icon__img {

  transform: scale(1.05);

  filter: saturate(1.18) brightness(1.2) contrast(1.06);

}



.lb-rail-game:hover .game-icon,

.lb-rail-rec:hover .game-icon {

  border-color: rgba(124, 92, 255, 0.22);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.1),

    0 0 0 1px rgba(124, 92, 255, 0.1),

    0 2px 8px rgba(0, 0, 0, 0.2);

}



/* Size presets */

.game-icon--sm {

  width: 32px;

  height: 32px;

  --game-icon-radius: 8px;

  --game-icon-pad: 10%;

}



.game-icon--md {

  width: 36px;

  height: 36px;

  --game-icon-radius: 9px;

  --game-icon-pad: 8%;

}