/* "Noch mehr Spielautomaten" teaser on slot reviews (slots.php). Felt-green cards on the white page (no panel); cards swipe sideways on phones (scroll snap), 2 columns from 600px, 4 from 900px. Hover = gold glow, nothing moves. */
.slot-more { margin: 36px 0 40px; }
.slot-more .slot-more-eyebrow { margin: 0 0 6px; color: #0B7F76; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.slot-more .slot-more-title { margin: 0 0 8px; color: #0E2A22; font-family: "Libre Caslon Display", Georgia, serif; font-size: 26px; font-weight: 400; line-height: 32px; }
.slot-more .slot-more-lead { margin: 0 0 18px; color: #3D554D; font-size: 16px; line-height: 24px; }
.slot-more .slot-more-list { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px; margin: 0 -20px; padding: 2px 20px 10px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding: 0 20px; overscroll-behavior-x: contain; }
.slot-more .slot-more-card { display: flex; flex-direction: column; margin: 0; padding: 0 0 16px; overflow: hidden; border: 1px solid #1E5C48; border-radius: 14px; background: linear-gradient(180deg, #0B3B2E 0%, #041A13 100%); box-shadow: 0 10px 24px -14px rgba(4, 26, 19, 0.55); color: #E7F1EC; list-style: none; scroll-snap-align: start; transition: border-color 0.2s, box-shadow 0.2s; }
.slot-more .slot-more-card:hover, .slot-more .slot-more-card:focus-within { border-color: #EFB93F; box-shadow: 0 0 0 1px rgba(239, 185, 63, 0.55), 0 6px 24px -6px rgba(239, 185, 63, 0.45); }
.slot-more .slot-more-logo { display: block; border-bottom: 1px solid rgba(239, 185, 63, 0.2); background: #062319; }
.slot-more .slot-more-image { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; }
.slot-more .slot-more-studio { align-self: flex-start; margin: 14px 16px 0; padding: 2px 10px; border: 1px solid rgba(22, 207, 193, 0.45); border-radius: 999px; color: #9FE9E2; font-size: 12px; font-weight: 600; line-height: 18px; }
.slot-more .slot-more-name { margin: 10px 16px 4px; color: #FFFFFF; font-family: "Libre Caslon Text", Georgia, serif; font-size: 19px; font-weight: 700; line-height: 24px; }
.slot-more .slot-more-text { flex: 1 1 auto; margin: 0 16px 12px; color: #CFE3DA; font-size: 14px; line-height: 21px; }
.slot-more .slot-more-where { margin: 0 16px 12px; padding-top: 10px; border-top: 1px dashed rgba(239, 185, 63, 0.3); color: #A9C4B9; font-size: 13px; line-height: 18px; }
.slot-more .slot-more-where strong { color: #FFFFFF; font-weight: 600; }
.slot-more .slot-more-button { align-self: stretch; margin: 0 16px; min-height: 44px; color: #041A13; font-weight: 600; text-decoration: none; }
.slot-more .slot-more-note { margin: 14px 0 0; color: #3D554D; font-size: 12px; line-height: 18px; }

@media (min-width: 600px) {
  .slot-more .slot-more-list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; margin: 0; padding: 2px 0 0; overflow: visible; }
}

@media (min-width: 900px) {
  .slot-more .slot-more-title { font-size: 30px; line-height: 36px; }
  .slot-more .slot-more-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Hub slider (.is-slider, js/functions.js setupSlotSlider): one row at every width, 1 card + peek / 2 / 4 visible, native scroll snap; JS adds autoplay, arrows, dots and pause. Controls stay hidden without JS. */
.slot-more.is-slider .slot-more-list { scrollbar-width: none; }
.slot-more.is-slider .slot-more-list::-webkit-scrollbar { display: none; }
.slot-more .slot-more-controls:not([hidden]) { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; }
.slot-more .slot-more-arrow { position: relative; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 1px solid #1E5C48; border-radius: 50%; background: #0B3B2E; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.slot-more .slot-more-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-top: 2px solid #EFB93F; border-right: 2px solid #EFB93F; }
.slot-more .slot-more-arrow.is-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.slot-more .slot-more-arrow.is-next::before { transform: translate(-70%, -50%) rotate(45deg); }
.slot-more .slot-more-arrow:hover, .slot-more .slot-more-arrow:focus-visible { border-color: #EFB93F; box-shadow: 0 0 0 1px rgba(239, 185, 63, 0.55), 0 6px 24px -6px rgba(239, 185, 63, 0.45); outline: none; }
.slot-more .slot-more-dots { display: flex; flex: 1 1 auto; justify-content: center; gap: 6px; }
.slot-more .slot-more-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: #C9D8D1; cursor: pointer; transition: width 0.3s, background-color 0.3s; }
.slot-more .slot-more-dot.is-active { width: 26px; background: #EFB93F; }
.slot-more .slot-more-dot:focus-visible { outline: 2px solid #0B7F76; outline-offset: 2px; }
.slot-more .slot-more-pause { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 1px solid #DCE6E1; border-radius: 999px; background: #FFFFFF; color: #0E2A22; font-size: 13px; font-weight: 600; cursor: pointer; }
.slot-more .slot-more-pause:hover, .slot-more .slot-more-pause:focus-visible { border-color: #EFB93F; outline: none; }

@media (min-width: 600px) {
  .slot-more.is-slider .slot-more-list { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 14px) / 2); margin: 0 -2px; padding: 2px 2px 14px; overflow-x: auto; scroll-padding: 0 2px; }
}

@media (min-width: 900px) {
  .slot-more.is-slider .slot-more-list { grid-auto-columns: calc((100% - 42px) / 4); }
}

@media (prefers-reduced-motion: reduce) {
  .slot-more .slot-more-card, .slot-more .slot-more-arrow, .slot-more .slot-more-dot { transition: none; }
}

/* Studio portraits ([ocr_studio_games], studios.php): a reviewed game links to its Slot Check with a gold outline button on the felt card (the page's dark-ink outline button would vanish here); three-card rows get three columns. */
.slot-more.is-studio .slot-more-button.is-outline { background: transparent; box-shadow: inset 0 0 0 2px #EFB93F; color: #F6D27A; }
.slot-more.is-studio .slot-more-button.is-outline:hover, .slot-more.is-studio .slot-more-button.is-outline:focus-visible { background: rgba(239, 185, 63, 0.12); color: #FFFFFF; }

@media (min-width: 900px) {
  .slot-more.is-studio.has-3 .slot-more-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}