/* ==========================================================================
   CELM Royale — games.css (loaded only where game grids / game pages render)
   ========================================================================== */

@layer components {

  /* ---- Grid ---- */
  .games__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100% / 2 - 8px, 180px), 1fr));
    gap: clamp(14px, 2vw, 22px);
  }

  /* ---- Card ---- */
  .game-card {
    position: relative;
    display: grid;
    gap: 4px;
    align-content: start;
    container-type: inline-size;
    animation: card-in .45s var(--ease) both;
    animation-delay: calc(min(sibling-index(), 12) * 25ms);
  }
  @supports not (animation-delay: calc(sibling-index() * 1ms)) {
    .game-card { animation-delay: 0ms; }
  }
  @keyframes card-in { from { opacity: 0; translate: 0 10px; } }

  .game-card__link {
    display: grid;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius);
    &:focus-visible { outline-offset: 4px; }
  }
  .game-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--tile);
    box-shadow: var(--shadow);
    transition: box-shadow .3s var(--ease), translate .3s var(--ease);
  }
  .game-card__img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .5s var(--ease), filter .3s; }
  .game-card__placeholder {
    display: grid;
    place-items: center;
    block-size: 100%;
    color: rgb(255 255 255 / .35);
    background:
      repeating-conic-gradient(from 11.25deg at 50% 50%, rgb(255 255 255 / .04) 0 22.5deg, transparent 0 45deg),
      radial-gradient(circle, var(--felt), var(--felt-deep));
    & .icon { inline-size: 36%; block-size: 36%; }
  }
  .game-card__play {
    position: absolute;
    inset: auto 50% 50% auto;
    translate: 50% 50%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    scale: .9;
    transition: opacity .2s var(--ease), scale .25s var(--ease-spring);
    box-shadow: 0 8px 20px rgb(0 0 0 / .35);
    & .icon { inline-size: 14px; block-size: 14px; }
    @container (width < 150px) { padding: 10px; font-size: 0; gap: 0; & .icon { inline-size: 18px; block-size: 18px; } }
  }
  .game-card__link:is(:hover, :focus-visible) {
    & .game-card__media { box-shadow: var(--shadow-hover); translate: 0 -4px; }
    & .game-card__img { scale: 1.06; filter: brightness(.72); }
    & .game-card__play { opacity: 1; scale: 1; }
  }
  .game-card__title {
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .game-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .8125rem;
    color: var(--muted);
    min-inline-size: 0;
    & > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  }
  .game-card__rating { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; color: var(--text); & .icon { inline-size: 13px; block-size: 13px; color: var(--gold); } }

  /* ---- Upcoming ("Bientôt", as on toutslots) ---- */
  .badge-soon {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .6875rem;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 35%, transparent);
  }
  .game-card__badge { position: absolute; inset: 10px auto auto 10px; }
  .game-card.is-upcoming .game-card__img { filter: saturate(.85); }
  .game-card__release { color: var(--accent); font-weight: 650; white-space: nowrap; }
  .games__grid--inline { margin-block: 1.4em; grid-template-columns: repeat(auto-fill, minmax(180px, 240px)); }

  .feature-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    & li {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px 5px 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      font-size: .8125rem;
      font-weight: 600;
    }
    & li:nth-child(4n + 1) .chip { --chip: var(--chip-red); }
    & li:nth-child(4n + 2) .chip { --chip: var(--chip-black); }
    & li:nth-child(4n + 3) .chip { --chip: var(--chip-green); }
    & li:nth-child(4n + 4) .chip { --chip: var(--chip-gold); }
  }

  /* ---- Release calendar (/prochaines-sorties/) ---- */

  /* Date ticket on upcoming cards: a torn-off calendar leaf in the corner */
  .ticket {
    position: absolute;
    inset: 8px 8px auto auto;
    display: grid;
    justify-items: center;
    min-inline-size: 46px;
    padding: 5px 6px 6px;
    border-radius: 10px;
    background: #fff;
    color: #14151a;
    border-block-start: 4px solid var(--chip-red);
    box-shadow: 0 6px 16px rgb(0 0 0 / .3);
    line-height: 1;
    rotate: 3deg;
    transition: rotate .3s var(--ease-spring);
    & b { font: 850 1.25rem/1 var(--font-display); letter-spacing: -.03em; }
    & span { margin-block-start: 2px; font-size: .625rem; font-weight: 800; letter-spacing: .08em; color: var(--chip-red); }
  }

  .game-card__link:hover .ticket { rotate: -2deg; }

  /* Spotlight: next release on the felt, with a chip countdown */
  .spotlight {
    display: grid;
    gap: clamp(20px, 4vw, 44px);
    align-items: center;
    padding: clamp(18px, 3vw, 32px);
    border-radius: 24px;
    box-shadow:
      inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent),
      inset 0 0 0 7px rgb(0 0 0 / .16),
      var(--shadow-hover);
    @media (width >= 860px) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  }
  .spotlight__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: 18px;
    overflow: hidden;
    background: #06140e;
    box-shadow: 0 20px 50px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .12);
    rotate: -1.5deg;
    transition: rotate .4s var(--ease-spring), scale .4s var(--ease-spring);
    & img { inline-size: 100%; block-size: 100%; object-fit: cover; }
    & .badge-soon { position: absolute; inset: 12px auto auto 12px; }
    &:hover { rotate: 0deg; scale: 1.02; }
  }
  .spotlight__body {
    display: grid;
    gap: 12px;
    justify-items: start;
    color: #fff;
    & .eyebrow { color: var(--gold); & .icon { inline-size: 14px; block-size: 14px; } }
  }
  .spotlight__title {
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    font-weight: 850;
    letter-spacing: -.03em;
    & a { color: #fff; text-decoration: none; &:hover { text-decoration: underline; text-decoration-color: var(--gold); } }
  }
  .spotlight__meta { color: rgb(255 255 255 / .75); font-weight: 600; }
  .spotlight__today { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.125rem; color: var(--gold); }

  .countdown__label { margin-block-start: 4px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .65); }
  .countdown {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-block-end: 8px;
  }
  .countdown__unit {
    display: grid;
    justify-items: center;
    gap: 6px;
    & small { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
  }
  .countdown__chip {
    --size: clamp(58px, 7vw, 72px);
    & .chip__label { font-size: calc(var(--size) * .3); font-variant-numeric: tabular-nums; }
  }
  /* The seconds chip spins a quarter turn every tick; its number counter-rotates to stay upright */
  .countdown.is-live .countdown__unit:last-child .countdown__chip {
    rotate: var(--turn, 0deg);
    transition: rotate .35s var(--ease-spring);
    & .chip__label { rotate: calc(var(--turn, 0deg) * -1); transition: rotate .35s var(--ease-spring); }
  }

  /* Sticky month strip */
  .release-nav {
    position: sticky;
    inset-block-start: var(--header-h);
    z-index: 20;
    display: flex;
    gap: 6px;
    padding-block: 12px;
    margin-block-end: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    border-block-end: 1px solid var(--line);
    & a {
      flex: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: 999px;
      background: var(--bg-alt);
      font-size: .8125rem;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
      transition: background-color .15s, color .15s;
      &:hover, &.is-active { background: var(--accent-soft); color: var(--accent); }
      &.is-current { box-shadow: inset 0 0 0 1.5px var(--accent); }
    }
  }
  .has-admin-bar .release-nav { inset-block-start: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px)); }

  /* Timeline: a vertical rail with a calendar tile per month */
  .timeline {
    position: relative;
    display: grid;
    gap: 8px;
    @media (width >= 900px) {
      padding-inline-start: 96px;
      &::before {
        content: "";
        position: absolute;
        inset: 24px auto 24px 35px;
        inline-size: 2px;
        background: repeating-linear-gradient(to bottom, var(--line-strong) 0 8px, transparent 8px 14px);
      }
    }
  }
  .timeline__month {
    position: relative;
    padding-block: 24px 16px;
    scroll-margin-top: calc(var(--header-h) + 70px);
  }
  .timeline__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-block-end: 18px;
    @media (width >= 900px) {
      & .cal { position: absolute; inset: 20px auto auto -96px; }
    }
  }
  .cal {
    display: grid;
    place-items: center;
    align-content: center;
    inline-size: 72px;
    aspect-ratio: 1;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    overflow: hidden;
    flex: none;
    & .cal__month {
      align-self: stretch;
      justify-self: stretch;
      padding-block: 4px;
      background: var(--chip-red);
      color: #fff;
      text-align: center;
      font-size: .75rem;
      font-weight: 850;
      letter-spacing: .1em;
    }
    & .cal__year { padding-block: 6px 8px; font: 850 1.125rem/1 var(--font-display); letter-spacing: -.02em; }
    & > .icon { inline-size: 28px; block-size: 28px; color: var(--accent); }
  }
  .timeline__month--imminent .cal { background: var(--felt); border-color: transparent; & > .icon { color: var(--gold); } }
  .timeline__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fs-h2); }
  .timeline__note { margin-block-start: 4px; color: var(--muted); font-size: .9375rem; }

  /* ---- Catalogue (filters + more) ---- */
  .games { display: grid; gap: 20px; }
  .games__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    position: sticky;
    inset-block-start: calc(var(--header-h) + 10px);
    z-index: 5;
    @media (width < 760px) { position: static; }
  }
  /* A–Z bar: one scrollable pill row, current letter raised */
  .letters {
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: var(--bg-alt);
    overflow-x: auto;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
    & :is(a, span) {
      flex: 1 0 auto;
      min-inline-size: 32px;
      padding: 6px 8px;
      border-radius: 999px;
      font-size: .8125rem;
      font-weight: 650;
      line-height: 1.4;
      text-align: center;
      white-space: nowrap;
      color: var(--muted);
      text-decoration: none;
    }
    & a { transition: background-color .2s, color .2s; }
    & a:hover { color: var(--text); }
    & a[aria-current] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
    & span { opacity: .4; }
  }
  .field--search {
    position: relative;
    flex: 1 1 260px;
    & .icon { position: absolute; inset: 50% auto auto 14px; translate: 0 -50%; inline-size: 18px; block-size: 18px; color: var(--faint); pointer-events: none; }
    & input { padding-inline-start: 42px !important; border-radius: 999px !important; background: var(--bg-alt) !important; border-color: transparent !important; }
    & input:focus { background: var(--surface) !important; border-color: var(--accent) !important; }
  }
  .games__selects {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    & .field { flex: 1 1 170px; }
    & select { border-radius: 999px !important; min-block-size: 44px !important; font-size: var(--fs-sm) !important; }
  }
  .games__count {
    font-size: var(--fs-sm);
    color: var(--muted);
    min-block-size: 1.5em;
    & strong { color: var(--text); font-size: 1rem; }
  }
  .games.is-loading .games__grid { opacity: .45; pointer-events: none; transition: opacity .2s; }
  .games { scroll-margin-top: calc(var(--header-h) + 12px); }
  .games__page { color: var(--faint); font-weight: 500; }
  .games__pagination .pagination { margin-block-start: 28px; }
  .games.is-loading .games__pagination { opacity: .6; pointer-events: none; }
  .games__empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 56px 16px;
    color: var(--muted);
    text-align: center;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius);
    & .icon { inline-size: 40px; block-size: 40px; color: var(--faint); }
  }
  .games__more { display: grid; justify-items: center; gap: 16px; margin-block-start: 16px; }
  .games__progress {
    display: grid;
    justify-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--muted);
    & progress {
      appearance: none;
      inline-size: 220px;
      block-size: 5px;
      border: 0;
      border-radius: 999px;
      background: var(--line);
      overflow: hidden;
      &::-webkit-progress-bar { background: var(--line); }
      &::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 999px; }
      &::-moz-progress-bar { background: linear-gradient(90deg, var(--accent), var(--gold)); }
    }
  }
  [data-games-next] .chip { --chip: #fff; --c: var(--accent); }

  /* ---- Game page ---- */
  .game-hero {
    padding-block: clamp(28px, 5vw, 52px) clamp(24px, 4vw, 36px);
    text-align: center;
    background: radial-gradient(60% 90% at 50% 0%, var(--accent-soft), transparent 70%);
    & .container { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
    & .eyebrow { justify-content: center; }
  }
  .game-hero__title { font-size: var(--fs-h1); font-weight: 850; letter-spacing: -.035em; }
  .game-hero__lead { color: var(--muted); font-size: var(--fs-lg); max-inline-size: 560px; }

  /* The stage: a casino table */
  .stage {
    position: relative;
    display: grid;
    border-radius: 24px;
    overflow: hidden;
    color: #fff;
    background:
      radial-gradient(120% 90% at 50% 0%, #11855c, var(--felt-deep) 72%);
    box-shadow:
      inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent),
      inset 0 0 0 7px rgb(0 0 0 / .18),
      inset 0 0 0 8px color-mix(in oklab, var(--gold) 30%, transparent),
      var(--shadow-hover);
    scroll-margin-top: calc(var(--header-h) + 12px);
  }
  .stage__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    position: relative;
    z-index: 2;
  }
  .stage__tools { display: flex; gap: 6px; }
  .stage__screen {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 22px;
    aspect-ratio: 16 / 9;
    margin-inline: 12px;
    border-radius: 16px;
    overflow: hidden;
    background: #06140e;
    isolation: isolate;
    @media (width < 640px) { aspect-ratio: 4 / 5; }

    & iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; z-index: 3; background: #000; }
  }
  .stage__bg { position: absolute; inset: -10%; inline-size: 120%; block-size: 120%; max-inline-size: none; object-fit: cover; filter: blur(28px) saturate(1.3) brightness(.45); z-index: -1; }
  .stage__thumb {
    inline-size: min(46%, 420px);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .12);
    view-transition-name: game-thumb; /* target of the card → stage morph (see app.js pageswap) */
    @media (width < 640px) { inline-size: 72%; }
  }
  .stage__play { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
    50% { box-shadow: 0 0 0 14px transparent; }
  }
  .stage.is-loading .stage__play { pointer-events: none; opacity: .7; }
  .stage.is-playing :is(.stage__thumb, .stage__play, .stage__bg) { display: none; }
  .stage__soon {
    display: grid;
    justify-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.0625rem;
    text-shadow: 0 1px 2px rgb(0 0 0 / .5);
  }
  .stage.is-soon .stage__thumb { filter: grayscale(.2) brightness(.85); }

  /* Demo consent gate (games.js): covers the stage until the visitor accepts the embed's cookies */
  .stage__consent {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    color: #fff;
    background: rgb(8 10 14 / .82);
    backdrop-filter: blur(6px);
    & p { max-inline-size: 46ch; font-size: var(--fs-sm); line-height: 1.55; }
    & a { color: #fff; font-size: .8125rem; }
  }
  .stage__exit { position: absolute; inset: 12px 12px auto auto; z-index: 4; color: #fff; background: rgb(0 0 0 / .55); }
  .stage__note { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px 16px; font-size: var(--fs-xs); color: rgb(255 255 255 / .7); & .badge-18 { background: #fff; } }

  /* Pseudo-fullscreen fallback (iOS Safari has no element fullscreen) */
  .stage__screen.is-fullscreen, .stage__screen:fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    margin: 0;
    border-radius: 0;
    aspect-ratio: auto;
    inline-size: 100vw;
    block-size: 100dvh;
  }
  html:has(.stage__screen.is-fullscreen) { overflow: hidden; }

  /* Rating */
  .rating { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; }
  .rating__label { font-weight: 650; }
  .rating__stars {
    display: inline-flex;
    flex-direction: row-reverse;
    & input { position: absolute; opacity: 0; pointer-events: none; }
    & label { cursor: pointer; padding: 2px; color: rgb(255 255 255 / .35); transition: color .15s, scale .15s; }
    & label .icon { inline-size: 18px; block-size: 18px; }
    & label:hover, & label:hover ~ label, & input:checked ~ label { color: var(--gold); }
    & label:hover { scale: 1.15; }
    & input:focus-visible + label { outline: 2px solid var(--gold); border-radius: 4px; }
  }
  .rating.is-done .rating__stars { pointer-events: none; }
  .rating__votes { color: rgb(255 255 255 / .7); }

  /* Info grid */
  .game-info, .game-about { margin-block-start: 24px; }
  .facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
    gap: 10px;
  }
  .facts__item {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    & dt { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
    & dd { font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; }
    & a { color: var(--accent); text-decoration: none; &:hover { text-decoration: underline; } }
    & .icon { inline-size: 16px; block-size: 16px; }
  }

  .game-about {
    display: grid;
    gap: 24px;
    align-items: start;
    @media (width >= 760px) { grid-template-columns: 240px 1fr; }
    & h2 { font-size: 1.5rem; margin-block-end: 10px; }
    & > div > p { color: var(--muted); }
  }
  .game-about__thumb { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); box-shadow: var(--shadow); }

  .adjacent {
    display: grid;
    gap: 14px;
    margin-block: 32px 8px;
    @media (width >= 700px) { grid-template-columns: 1fr 1fr; }
  }
  .adjacent__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    font-weight: 700;
    box-shadow: var(--shadow);
    transition: box-shadow .2s, translate .2s var(--ease);
    &:hover { box-shadow: var(--shadow-hover); translate: 0 -2px; }
    & img { inline-size: 84px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; flex: none; }
    & small { display: block; font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
  }
  .adjacent__link--next { @media (width >= 700px) { grid-column: 2; flex-direction: row-reverse; text-align: end; } }
}