/* =========================================================================
   Solaris Game Cabinets - /skill-game-machines/ only
   The display-options block and the game reel strips.
   Everything else on the page, the hero included, is a shared component
   from site.css.
   ========================================================================= */

/* ---------- Display options -------------------------------------------- 
   One cabinet photo (the model is the flat panel) beside the three shapes,
   each drawn as a side profile so the difference reads without a photo of
   every variant. */
.displays {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 72px); align-items: center; margin-top: var(--sp-9);
}
.displays__art { margin: 0; justify-self: center; width: 100%; max-width: 400px; }
.displays__art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.displays__art figcaption { margin-top: var(--sp-2); text-align: center; font: var(--text-caption); color: var(--text-tertiary); }
.displays__list { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.display-opt {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-5); align-items: center;
  padding: var(--sp-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-raised); box-shadow: var(--shadow-sm);
}
.display-opt svg { width: 76px; height: 76px; }
.display-opt b { display: block; font: var(--text-h3); color: var(--text-primary); }
.display-opt p { margin-top: var(--sp-1); font: var(--text-body-sm); color: var(--text-secondary); }
.display-opt .profile-body { stroke: var(--border-strong); }
.display-opt .profile-screen { stroke: var(--red-500); }
.display-opt .profile-player { fill: var(--amber-400); stroke: none; }
.displays__key { font: var(--text-caption); color: var(--text-tertiary); display: flex; gap: var(--sp-2); align-items: center; }
.displays__key i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-400); display: inline-block; }

@media (max-width: 860px) {
  .displays { grid-template-columns: minmax(0, 1fr); }
  .displays__art { max-width: 300px; }
}

/* ---------- Game reel strips ------------------------------------------- 
   The cabinet's own reel art, one strip per title, in a row that scrolls
   sideways once it runs out of room. */
.strips-head { margin-top: var(--sp-12); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.strips-head h3 { margin-top: var(--sp-3); font: var(--text-h2); text-wrap: balance; }
.strips {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: var(--sp-3);
  margin: var(--sp-7) 0 0; padding: 0 0 var(--sp-2); list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.strips li { display: grid; gap: var(--sp-2); scroll-snap-align: start; }
.strips img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 4; border-radius: var(--radius-sm); }
.strips span { font: var(--text-caption); color: var(--text-secondary); text-align: center; text-wrap: balance; }