/* Home. Hero, fan, band and bento moved from mockups/rnycasino.ch/b-fasnacht.html;
   shelves and info sections are new, in the same language. */

/* ═══ hero ═══ */
.hero { position: relative; padding: 28px 0 110px; overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; }
.hero__text { position: relative; z-index: 40; }   /* above the fan: its cards reach under the text column */
.hero__h1 { margin: 26px 0 22px; font: 800 var(--fs-display)/1.04 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.hero__h1 .w { display: inline-block; animation: pop .8s var(--spring) both; }
.hero__h1 .w:nth-child(2) { animation-delay: .08s; }
.hero__h1 .w:nth-child(3) { animation-delay: .16s; }
.hero__h1 .hl { color: #fff; background: var(--color-cobalt); padding: 0 .14em; border-radius: .12em; transform: rotate(-2.5deg); }
@keyframes pop { from { transform: translateY(40%) rotate(4deg); } }
.hero__lead { font-size: var(--fs-lead); max-width: 30rem; color: var(--color-muted); }
.hero .search { margin-top: 28px; }
.hero .chips { margin-top: 14px; max-width: 476px; }   /* the row scrolls; it never runs under the fan */
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* fan of covers — a carousel; cards follow the 1:1 cover (no crop) */
.fan { position: relative; height: 540px; margin-right: -12vw; }
.fan__tri { width: 300px; height: 260px; top: 20px; left: 12%; animation: float 9s ease-in-out infinite; }
.fan__circ { width: 180px; height: 180px; right: 14%; bottom: 30px; animation: float 7s ease-in-out infinite reverse; }
.fan__bar { width: 420px; height: 46px; transform: rotate(-24deg); top: 48%; left: -4%; }
@keyframes float { 50% { transform: translateY(-16px) rotate(4deg); } }
.fcard { position: absolute; top: 50%; left: 46%; width: 250px; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-card); cursor: pointer; transform-origin: 50% 120%; transform: translate(-50%, -50%); transition: transform .8s var(--spring), filter .5s; }
.fcard .cover img { width: 100%; height: auto; aspect-ratio: 1; }
.fcard__b { padding: 12px 14px; }
.fcard b { display: block; font: 700 .92rem/1.2 var(--font-display); letter-spacing: -.02em; }
.fcard small { color: var(--color-muted); font-size: .78rem; }
.fcard.is-front { box-shadow: 0 30px 60px -24px rgb(22 22 29 / .55); }
/* captions of the cards behind are hidden (they overlap by design and are aria-hidden) */
.fcard:not(.is-front) .fcard__b > * { visibility: hidden; }
.fcard.is-front:hover { filter: brightness(1.04); }
.fan__ui { position: absolute; right: 13vw; bottom: 0; display: flex; align-items: center; gap: 10px; z-index: 30; }
.fan__cnt { font: 800 .9rem var(--font-display); min-width: 56px; text-align: center; }
.fan__denied { position: absolute; top: 50%; left: 46%; translate: -50% -50%; width: 280px; text-align: center; display: grid; justify-items: center; gap: 12px; z-index: 5; }

/* ═══ search results ═══ */
.results { padding-top: 64px; }

/* ═══ bento (from the mockup, 7 categories + the RG tile) ═══ */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 150px; gap: 16px; grid-auto-flow: dense; }
.tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-card); text-decoration: none; color: var(--color-text); transition: transform var(--dur-slow) var(--spring); }
.tile:hover { transform: translateY(-6px) rotate(-.6deg); }
.tile--photo { color: #fff; background: var(--color-text); }
.tile--photo picture, .tile--photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tile--photo:hover img { transform: scale(1.06); }
.tile--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(22 22 29 / .05) 30%, rgb(22 22 29 / .88)); }
.tile__h { font: 800 1.35rem/1.05 var(--font-display); letter-spacing: -.04em; }
.tile__p { font-size: .88rem; opacity: .88; margin-top: 6px; max-width: 34ch; }
.tile__n { position: absolute; top: 16px; left: 18px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-sun); color: var(--color-text); font: 800 .8rem var(--font-display); }
.tile__arr { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--color-text); transition: transform var(--dur-slow) var(--spring); }
.tile:hover .tile__arr { transform: rotate(-45deg); }
.t1 { grid-column: span 5; grid-row: span 3; }
.t2 { grid-column: span 4; grid-row: span 2; }
.t3 { grid-column: span 3; grid-row: span 2; }
.t-rg { grid-column: span 3; grid-row: span 2; }
.t4 { grid-column: span 4; grid-row: span 2; }
.t5 { grid-column: span 4; grid-row: span 2; }
.t6 { grid-column: span 4; grid-row: span 2; }
.t7 { grid-column: span 4; grid-row: span 2; }
.tile--rg { justify-content: space-between; background: var(--color-cobalt); color: #fff; }
.tile--rg .tile__h { font-size: 1.1rem; }
.tile--rg:hover { transform: none; }
.rgdemo { display: grid; gap: 6px; }
.rgdemo__val { font: 800 2rem/1 var(--font-display); letter-spacing: -.04em; }
.rgdemo .meter-bar { background: rgb(255 255 255 / .2); }
.rgdemo .meter-bar i { background: var(--color-sun); }
.rgdemo__hint { font-size: .76rem; opacity: .85; }
.rgdemo .btn { justify-self: start; margin-top: 4px; }

/* ═══ shelves ═══ */
.shelf-sec--bg { background: var(--color-text); padding-bottom: 72px; margin-top: var(--section-pad); padding-top: 72px; color: #fff; isolation: isolate; }
.shelf-sec--bg .sec-bg::after { background: linear-gradient(180deg, rgb(22 22 29 / .82), rgb(22 22 29 / .94)); }
.shelf-sec--bg .sec__lead, .shelf-sec--bg .game__meta { color: rgb(244 239 230 / .72); }
.shelf-sec--bg .h2 sup { color: var(--color-sun); }
.shelf-sec--bg .round--line { color: #fff; border-color: rgb(255 255 255 / .6); }
.shelf-sec--bg .round--line:hover { background: #fff; color: var(--color-text); }
.shelf-sec--bg .seg { background: rgb(255 255 255 / .1); }
.shelf-sec--bg .seg button { color: rgb(244 239 230 / .75); }
.shelf-sec--bg .seg button[aria-pressed="true"] { background: var(--color-sun); color: var(--color-text); }
.shelf-sec--bg .shelf-prog { background: rgb(255 255 255 / .14); }
.shelf-sec--bg .shelf-prog i { background: var(--color-sun); }
.shelf-sec--bg + .shelf-sec { padding-top: 96px; }

/* ═══ promotions ═══ */
.promo__card { background: var(--color-text); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: clamp(28px, 4vw, 56px); border-radius: var(--radius-lg); overflow: hidden; color: #fff; box-shadow: var(--shadow-card); }
.promo__card .sec-bg::after { background: linear-gradient(100deg, rgb(22 22 29 / .94) 30%, rgb(22 22 29 / .6)); }
.promo__in { max-width: 40rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: start; }
.promo__in .btn { white-space: normal; line-height: 1.25; padding-block: 12px; text-align: center; }
.promo__in p { color: rgb(244 239 230 / .85); }
.promo__stamp { display: grid; place-items: center; width: 140px; height: 140px; border-radius: 50%; border: 2px dashed var(--color-sun); color: var(--color-sun); animation: spin 30s linear infinite; }
.promo__stamp .icon { width: 52px; height: 52px; }
@keyframes spin { to { rotate: 1turn; } }

/* ═══ providers ═══ */
.prov { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.prov__item { position: relative; display: grid; grid-template-rows: 56px auto; align-items: center; justify-items: start; gap: 10px; padding: 20px; background: var(--surface-2); border-radius: var(--radius-md); box-shadow: var(--shadow-card); transition: transform var(--dur-slow) var(--spring); }
.prov__item:hover { transform: translateY(-4px) rotate(-.6deg); }
.prov__item img { height: 36px; width: auto; max-width: 150px; object-fit: contain; }
.prov__word { font: 800 1.05rem/1.1 var(--font-display); letter-spacing: -.04em; }
.prov__name { font-size: var(--fs-small); color: var(--color-muted); }
.prov__count { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 0; border-radius: var(--radius-pill); background: var(--surface-3); font: 800 .78rem/1 var(--font-body); cursor: pointer; transition: background var(--dur-base), color var(--dur-base); }
.prov__count .icon { width: 14px; height: 14px; }
.prov__count:hover { background: var(--color-text); color: var(--color-bg); }

/* ═══ about + licence ═══ */
.about { background: var(--color-text); margin-top: var(--section-pad); padding-block: 96px; color: #fff; isolation: isolate; }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.about__text { display: grid; gap: 18px; justify-items: start; max-width: 36rem; }
.about__text p { color: rgb(244 239 230 / .86); font-size: 1.05rem; }
.licence { color: var(--color-text); display: grid; gap: 10px; justify-items: start; padding-bottom: 56px; }
.licence p { color: var(--color-muted); font-size: var(--fs-small); }
.licence .facts { width: 100%; }

/* ═══ payments ═══ */
.pays { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.pays__item { display: grid; gap: 4px; padding: 14px; background: var(--surface-2); border-radius: var(--radius-md); box-shadow: var(--shadow-card); transition: transform var(--dur-slow) var(--spring); }
.pays__item:hover { transform: translateY(-4px); }
.pays__item .paychip { box-shadow: none; background: var(--surface-1); margin-bottom: 6px; }
.pays__item small { color: var(--color-muted); font-size: .78rem; }

/* ═══ security ═══ */
.security__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.security__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-card); }
.security__media picture { display: block; height: 100%; }
.security__media img { width: 100%; height: 100%; object-fit: cover; }
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; }
.feat li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.feat__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--color-sun); }
.feat p { color: var(--color-muted); font-size: var(--fs-small); margin-top: 4px; }

/* ═══ responsible gambling ═══ */
.rg { background: var(--color-cobalt); margin-top: var(--section-pad); padding-block: 96px; color: #fff; isolation: isolate; }
.rg__in { display: grid; gap: 16px; justify-items: start; max-width: 46rem; }
.rg__in > p { color: rgb(255 255 255 / .88); font-size: 1.05rem; }
.rg .badge18 { background: #fff; color: var(--color-cobalt); }
.rg .eyebrow--sun { color: #fff; }   /* sun on cobalt is 4.26:1 at 12px */
.rg__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.rg__tools li { padding: 8px 14px; border-radius: var(--radius-pill); border: 1.5px solid rgb(255 255 255 / .5); font-weight: 700; font-size: .86rem; }
.rg__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ═══ faq ═══ */
.faq-home { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.faq-home > div:first-child { position: sticky; top: 24px; display: grid; gap: 18px; justify-items: start; }

/* ═══ seo ═══ */
.seo { background: var(--color-text); margin-top: var(--section-pad); padding-block: 96px; color: #fff; isolation: isolate; }
.seo__in { display: grid; gap: 20px; justify-items: start; max-width: 60rem; }
/* collapsed: two paragraphs, the rest is really hidden (not clipped — clipped text still sits under the footer) */
.seo__text { color: rgb(244 239 230 / .86); columns: 2; column-gap: 40px; }
.seo__text p { margin-bottom: 14px; break-inside: avoid; }
.seo__text:not(.is-open) p:nth-child(n+3) { display: none; }
.seo__text.is-open p { animation: qIn var(--dur-slow) var(--ease) both; }
@keyframes qIn { from { opacity: 0; transform: translateY(10px); } }
.seo .btn .icon { transition: transform var(--dur-base); }
.seo .btn[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* ═══ tablet ═══ */
@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .fan { height: 460px; margin-right: 0; }
  .fan__ui { right: 16px; }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .t1, .t2, .t3, .t4, .t5, .t6, .t7, .t-rg { grid-column: span 3; grid-row: span 2; }
  .t1 { grid-column: span 6; }
  .prov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__grid, .security__grid, .faq-home { grid-template-columns: 1fr; }
  .faq-home > div:first-child { position: static; }
  .security__media { aspect-ratio: 16 / 9; }
}

/* ═══ phone ═══ */
@media (max-width: 760px) {
  .hero { padding: 10px 0 80px; }
  .hero__h1 { margin: 20px 0 16px; }
  .hero .search .btn { padding: 0 16px; }
  .fan { height: 400px; }
  .fcard { width: 180px; left: 50%; }
  .fan__tri { width: 200px; height: 170px; }
  .fan__bar { width: 260px; }
  .fan__circ { width: 120px; height: 120px; }
  .fan__ui { right: 50%; translate: 50% 0; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; gap: 12px; }
  .t1 { grid-column: span 2; grid-row: span 2; }
  .t2, .t3, .t4, .t5, .t6, .t7 { grid-column: span 1; grid-row: span 2; }
  .t-rg { grid-column: span 2; grid-row: span 2; }
  .tile { padding: 16px; }
  .tile__h { font-size: 1.02rem; }
  .tile__p { display: none; }
  .t1 .tile__p, .t-rg .tile__p { display: block; }
  .tile__arr { width: 34px; height: 34px; }
  .shelf-ctrl { width: 100%; justify-content: space-between; }
  .arrows { display: none; }
  .promo__card { grid-template-columns: minmax(0, 1fr); }
  .promo__stamp { display: none; }
  .feat { grid-template-columns: 1fr; }
  .seo__text { columns: 1; }
  .about, .rg, .seo { padding-block: 64px; }
}
@media (max-width: 389px) {
  .bento { grid-template-columns: 1fr; }
  .t2, .t3, .t4, .t5, .t6, .t7 { grid-column: span 1; }
  .t1, .t-rg { grid-column: span 1; }
  .prov { grid-template-columns: 1fr; }
  .hero__h1 { font-size: min(var(--fs-display), 11vw); }   /* "Switzerland" on its plate fits at 320 */
}