/* Asteria — la page des jeux. */
body.decks-page { --deck-tone: #1a2140; }
.dp-head { position: relative; padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + var(--s7)) 0 var(--s6); isolation: isolate; }
.dp-head-art { position: absolute; inset: 0 0 -120px; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(80% 70% at 70% 20%, color-mix(in srgb, var(--deck-tone) 85%, transparent), transparent 70%);
  transition: background 1.2s var(--ease); }
/* la photo du ciel de l'app, à sa résolution : sur un grand écran, une fenêtre à droite, jamais étirée sur toute la largeur */
.dp-head-art::before { content: ""; position: absolute; inset: 0 0 auto 0; height: min(100%, 900px); opacity: .62;
  background: url("/assets/img/hero/sky.avif") center 30% / cover no-repeat;
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent); mask: linear-gradient(180deg, #000 30%, transparent); }
@media (min-width: 900px) { .dp-head-art::before { left: auto; width: min(53vw, 760px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 40%), linear-gradient(180deg, #000 40%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 40%) intersect, linear-gradient(180deg, #000 40%, transparent); } }
.dp-head h1 { font-size: clamp(42px, 9.5vw, 84px); }
.dp-head .lead { max-width: 36em; }

/* Le choix du jeu, épinglé sous la barre */
.dp-picker { position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); z-index: 30;
  background: rgba(6, 8, 17, .8); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dp-picker-in { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 12px var(--gutter);
  scroll-padding: 0 var(--gutter); -webkit-overflow-scrolling: touch;
  /* la rangée des jeux se fond aux bords : un nom ne paraît jamais coupé net */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 48px), transparent 100%); }
.dp-picker-in::-webkit-scrollbar { display: none; }
.chip { flex: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px 6px 6px; border-radius: 12px;
  border: 1px solid transparent; color: var(--ink-3); font: 600 13px/1.2 var(--sans); text-align: left; max-width: 190px;
  transition: background .25s, color .25s, border-color .25s; -webkit-tap-highlight-color: transparent; }
.chip:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.chip[aria-pressed="true"] { color: var(--ink); background: rgba(255, 255, 255, .07); border-color: var(--line-2); }
.chip-back { width: 26px; flex: none; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.chip-back img { width: 100%; height: 100%; object-fit: cover; }

/* La fiche du jeu */
.dp-deck { padding-top: var(--s7); padding-bottom: var(--s8); }
.dp-intro { display: grid; gap: var(--s6); align-items: center; }
.dp-cover { position: relative; height: clamp(250px, 70vw, 380px); perspective: 1200px; }
.dp-cover .card { --w: clamp(130px, 36vw, 190px); position: absolute; left: 50%; top: 50%; margin: calc(var(--w) / var(--r) / -2) 0 0 calc(var(--w) / -2);
  transition: transform 1s var(--ease); }
.dp-cover .cov-0 { transform: translateX(-46%) rotate(-11deg) translateY(10px); }
.dp-cover .cov-1 { transform: translateX(46%) rotate(11deg) translateY(10px); }
.dp-cover .cov-2 { transform: translateY(-8px); z-index: 2; }
.dp-words h2 { font-size: clamp(36px, 7vw, 58px); }
.dp-legend { margin: var(--s4) 0 0; font: 400 clamp(19px, 2.3vw, 22px)/1.45 var(--serif); color: var(--ink); }
.dp-desc { margin: var(--s4) 0 0; color: var(--ink-2); max-width: 36em; }
.dp-story { margin-top: var(--s5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 36em; }
.dp-story summary { cursor: pointer; list-style: none; padding: var(--s4) 32px var(--s4) 0; position: relative; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.dp-story summary::-webkit-details-marker { display: none; }
.dp-story summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 1.4px solid var(--ink-3); border-bottom: 1.4px solid var(--ink-3); transform: rotate(45deg); transition: transform .3s var(--ease); }
.dp-story[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.dp-story p { margin: 0 0 var(--s4); color: var(--ink-2); }
.dp-source { font: 400 13px/1.5 var(--sans); color: var(--ink-3) !important; }
@media (min-width: 900px) {
  .dp-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); }
  .dp-cover { height: 440px; }
  .dp-cover .card { --w: 220px; }
}

.dp-grid-title { margin: var(--s8) 0 var(--s5); font-size: 15px; font-family: var(--sans); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); font-variation-settings: normal; }
.dp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
@media (min-width: 640px) { .dp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s6) var(--s5); } }
.dp-card { display: grid; gap: 10px; width: 100%; text-align: left; -webkit-tap-highlight-color: transparent; perspective: 900px; }
.dp-card .card { --w: 100%; width: 100%; border-radius: 7px; transition: transform .5s var(--ease); }
.dp-card:active .card { transform: scale(.97); }
.dp-cap { display: grid; gap: 2px; }
.dp-cap .num { font: 600 10px/1 var(--sans); letter-spacing: .2em; color: var(--ink-4); }
.dp-cap .nm { font: 400 15px/1.25 var(--display); font-variation-settings: "opsz" 24; color: var(--ink-2); }
@media (min-width: 640px) { .dp-cap .nm { font-size: 17px; } }

/* L'appel vers l'app */
.dp-app { padding-bottom: var(--s8); }
.dp-app-in { padding: var(--s6) var(--s5); }
.dp-app-in h2 { font-size: clamp(34px, 6vw, 56px); }
.dp-app-in .get { margin-top: var(--s5); }
@media (min-width: 900px) { .dp-app-in { padding: var(--s7); } }

/* Une carte en grand */
.sheet { position: fixed; inset: 0; z-index: 90; background: rgba(3, 4, 10, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .35s var(--ease); }
.sheet.open { opacity: 1; }
.sheet-in { position: relative; min-height: 100%; max-width: 1080px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 64px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + var(--s7));
  display: grid; gap: var(--s6); align-content: start; grid-template-columns: minmax(0, 1fr); }
.sheet-in > * { min-width: 0; }
.sheet-close { position: fixed; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .09); }
.sheet-close svg { width: 16px; height: 16px; }
.sheet-card { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; justify-items: center; perspective: 1400px; }
.sheet-slot { touch-action: pan-y; }
.sheet-slot .card { --w: min(64vw, 300px); }
.sheet-nav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); background: rgba(255, 255, 255, .05); }
.sheet-nav:hover { color: var(--ink); background: rgba(255, 255, 255, .1); }
.sheet-nav svg { width: 16px; height: 16px; }
.sheet-words { text-align: center; max-width: 560px; justify-self: center; width: 100%; }
.sheet-words .reading-label { justify-content: center; margin-top: var(--s6); }
.sheet .reading-num { margin: 0; font: 600 12px/1 var(--sans); letter-spacing: .3em; color: var(--ink-3); }
.sheet .reading-name { margin: 10px 0 0; font-size: clamp(36px, 8vw, 54px); }
.sheet .reading-deck { margin: 10px 0 0; font: 500 13px/1.3 var(--sans); color: var(--ink-3); }
.sheet .reading-text { margin: 0 auto; font: 400 clamp(20px, 2.4vw, 24px)/1.42 var(--serif); color: var(--ink); max-width: 26em; }
.sheet .reading-actions { margin-top: var(--s6); display: flex; justify-content: center; gap: var(--s4); }
@media (min-width: 900px) {
  .sheet-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; align-content: center; gap: var(--s7); }
  .sheet-slot .card { --w: min(34vw, 340px); }
  .sheet-words { text-align: left; }
  .sheet-words .reading-label, .sheet .worlds .eyebrow, .sheet .reading-actions { justify-content: flex-start; }
  .sheet .reading-text { margin-left: 0; }
  .sheet .worlds-strip { margin: 0; padding-left: 2px; padding-right: 2px; }
}