/* Three 3x2 atlases; each square viewport shows exactly one generated case. */
.case-art { aspect-ratio:1; background-image:var(--case-art-url); background-size:300% 200%; background-position:var(--case-art-x) var(--case-art-y); background-repeat:no-repeat; flex-shrink:0; mix-blend-mode:lighten; }
.case-browser .case-grid { gap:18px; }
.case-browser .case-tile { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:210px 40px 14px 38px; gap:6px; height:350px; padding:14px; background:#111315; border:1px solid #96a6aa1a; box-shadow:none; align-items:center; justify-items:center; }
.case-browser .case-tile:hover,.case-browser .case-tile.is-selected { background:#111315; border-color:color-mix(in srgb,var(--case-color) 55%,#2b3334); box-shadow:0 5px 16px #0003; }
.case-browser .case-tile::after { left:18px; width:36px; height:2px; opacity:.8; }
.case-browser .case-tile .case-art { grid-row:1; width:min(100%,210px); transition:transform 200ms; }
.case-browser .case-tile:hover .case-art { transform:translateY(-3px); }
.case-browser .case-tile > strong { grid-row:2; order:initial; font-size:16px; line-height:20px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.case-browser .case-tile > small { grid-row:3; order:initial; font-size:10px; line-height:14px; }
.case-browser .case-tile > span { grid-row:4; order:initial; margin:0; padding:8px 16px; font-size:14px; line-height:20px; }
.case-hero { gap:32px; padding:14px 0 20px; }
#caseHeroImage { width:300px; max-width:45%; }
.case-hero > div:not(.case-art) { min-width:0; }
@media(max-width:1000px) {
  .case-browser .case-tile { grid-template-rows:180px 40px 14px 38px; height:320px; }
  .case-browser .case-tile .case-art { width:min(100%,180px); }
}
@media(max-width:600px) {
  .case-browser .case-grid { gap:10px; }
  .case-browser .case-tile { grid-template-rows:132px 36px 12px 32px; height:250px; gap:6px; padding:9px; }
  .case-browser .case-tile .case-art { width:min(100%,132px); }
  .case-browser .case-tile > strong { font-size:12px; line-height:18px; }
  .case-browser .case-tile > small { font-size:9px; line-height:12px; }
  .case-browser .case-tile > span { padding:5px 10px; min-width:65px; font-size:12px; }
  .case-hero { gap:12px; padding-top:6px; }
  #caseHeroImage { width:180px; max-width:46%; }
  .case-hero h2 { font-size:20px; overflow-wrap:anywhere; }
}
@media(prefers-reduced-motion:reduce) { .case-browser .case-tile .case-art { transition:none; } }