/* Shared artwork is derived from canonical Game Environment values in environment-artwork.js. */
.environment-artwork{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  aspect-ratio:1;
  overflow:hidden;
  border-style:solid;
  background:#090f16;
}
.environment-artwork::before{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(3,7,11,.34));
  content:"";
}
.environment-artwork img{
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:pixelated;
}
.environment-artwork.is-fallback{border-style:dashed;background:var(--surface)}
.environment-artwork.is-fallback::before{display:none}
.environment-artwork.is-fallback>span{color:var(--game-environment-color,var(--muted));font:700 22px 'DM Mono',monospace}

/* Full cards get a useful square scene without making the card taller. */
.game-card{grid-template-columns:96px minmax(0,1fr);column-gap:16px}
.game-card .environment-artwork--card{width:96px;border-radius:10px}

/* List rows retain their existing density. */
.game-list-row .environment-artwork--list{width:48px;border-radius:8px}

/* Dense Lesson workflows use a small recognition thumbnail only. */
.picker-game.has-environment-art{display:grid;grid-template-columns:44px minmax(0,1fr) auto}
.picker-game.has-environment-art>.environment-artwork{grid-column:1;width:44px;border-radius:7px}
.picker-game.has-environment-art>div:not(.lesson-game-picker-actions){grid-column:2}
.picker-game.has-environment-art>button{grid-column:3}
.class-plan-view .class-plan-item.has-environment-art{display:grid;grid-template-columns:29px 44px minmax(0,1fr) auto}
.class-plan-view .class-plan-item.has-environment-art>.plan-position{grid-column:1}
.class-plan-view .class-plan-item.has-environment-art>.environment-artwork{grid-column:2;width:44px;border-radius:7px}
.class-plan-view .class-plan-item.has-environment-art>.plan-copy{grid-column:3}
.class-plan-view .class-plan-item.has-environment-art>.card-link{grid-column:4;margin-left:0}

@media(max-width:620px){
  .game-card{grid-template-columns:76px minmax(0,1fr)}
  .game-card .environment-artwork--card{width:76px}
  .game-list-row .environment-artwork--list{width:42px}
  .picker-game.has-environment-art{grid-template-columns:40px minmax(0,1fr) auto;gap:10px}
  .picker-game.has-environment-art>.environment-artwork{width:40px}
  .picker-game.has-environment-art>.lesson-game-picker-actions{grid-column:1/-1}
  .class-plan-view .class-plan-item.has-environment-art{grid-template-columns:29px 40px minmax(0,1fr)}
  .class-plan-view .class-plan-item.has-environment-art>.environment-artwork{width:40px}
  .class-plan-view .class-plan-item.has-environment-art>.card-link{grid-column:2/-1;width:auto;margin-left:0;justify-self:start}
}