/* Approved-page integration. All rules scoped away from Home and prototypes. */
.pages-content { padding:0 10px 24px; outline:none }
.validated-frame { display:block; position:relative; overflow:hidden; width:100%; border-radius:inherit; }
.validated-frame>img { position:absolute; display:block; max-width:none; width:var(--visual-width); height:auto; left:var(--visual-left); top:var(--visual-top); }
.games-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.game-poster { display:flex; align-items:center; position:relative; aspect-ratio:1; border-radius:7px; min-width:0; }
.game-preview-art { width:260px; max-width:100%; margin:20px auto 24px; border-radius:7px; }
.pages-content a:focus-visible,.pages-content button:focus-visible { outline:3px solid var(--paper); outline-offset:2px; }
.cards-page { container:cards / inline-size }
.cards-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px }
.cards-tabs a { font-family:var(--display); font-size:19px; min-height:44px; border:1px solid var(--line); border-radius:6px; display:grid; place-items:center }
.cards-tabs a[aria-current] { background:var(--grain),var(--yellow); border-color:var(--yellow); color:var(--ink-deep) }
.cards-utility { position:relative; display:flex; align-items:center; min-height:38px; gap:12px }
.utility-line { height:1px; background:var(--line); flex:1 }
.future-qr-space { position:absolute; right:56px; bottom:calc(100% + 56px); width:44px; height:44px; pointer-events:none }
.feather-balance { display:flex; align-items:center; gap:4px; font-family:var(--display); font-size:15px; white-space:nowrap }
.feather-balance .icon { color:var(--yellow); width:22px; height:26px; fill:currentColor; stroke-width:1.2 }
.feather-balance strong { color:var(--yellow); font-size:23px; font-weight:400 }
.pack-feature { position:relative; margin:-17px 0 8px; border-radius:8px; container:pack / inline-size; }
.pack-feature>.validated-frame {
  /* Follow only the protruding foil edge; retain the original image and box. */
  clip-path:polygon(
    0 5.8%,20.261% 5.8%,20.616% 5.504%,20.972% 5.504%,21.209% 5.239%,21.801% 5.239%,
    22.038% 5.504%,22.275% 5.371%,22.749% 4.841%,23.104% 4.973%,23.341% 5.239%,
    23.815% 4.841%,24.408% 4.841%,24.526% 4.708%,25% 4.708%,25.118% 4.576%,
    25.829% 4.576%,25.948% 4.443%,26.303% 4.443%,26.54% 4.576%,26.896% 4.178%,
    27.37% 4.178%,27.488% 4.045%,27.725% 4.045%,27.844% 4.178%,28.199% 4.178%,
    28.791% 3.647%,29.265% 3.647%,29.621% 3.912%,29.858% 3.912%,30.45% 3.249%,
    31.043% 3.382%,31.398% 3.647%,32.227% 2.851%,32.464% 2.984%,32.701% 2.984%,
    32.82% 3.117%,33.057% 3.117%,33.175% 3.249%,33.768% 2.586%,34.123% 2.586%,
    34.479% 2.851%,34.834% 2.851%,35.308% 2.321%,35.782% 2.321%,36.256% 2.586%,
    36.73% 2.056%,37.085% 2.056%,37.441% 2.321%,37.678% 2.321%,38.152% 1.79%,
    38.389% 1.79%,38.744% 2.056%,38.981% 2.056%,39.81% 1.393%,40.521% 1.79%,
    40.64% 1.79%,41.469% 1.127%,41.588% 1.127%,42.062% 1.525%,42.299% 1.525%,
    43.009% .862%,43.246% .862%,43.483% 1.127%,43.839% 1.26%,44.313% .729%,
    44.55% .597%,44.905% .597%,45.616% .995%,45.853% .862%,46.327% .199%,
    46.564% .332%,46.801% .332%,47.038% .597%,47.275% .597%,47.512% .199%,
    47.867% .332%,48.223% -.066%,48.46% -.066%,48.578% -.199%,48.934% -.199%,
    49.171% .332%,49.408% 2.056%,49.763% 3.515%,49.882% 4.708%,50.118% 5.637%,
    50.237% 5.8%,100% 5.8%,100% 100%,0 100%
  );
}
.pack-image-action { position:absolute; z-index:3; left:1.6%; right:1.6%; bottom:1.5%; height:14.1%; min-height:44px; padding:0; border-radius:6px; background:transparent; }
.pack-stock-override { position:absolute; top:14%; right:1%; width:34%; height:65%; display:flex; flex-direction:column; justify-content:center; padding:0; color:var(--ink-deep); background:var(--grain),var(--yellow); border-radius:5px; }
.pack-stock-override strong { font-weight:400; font-size:44cqw; line-height:.9; }
.pack-stock-override strong[data-digits="2"] { font-size:32cqw }
.pack-stock-override strong[data-digits="3"] { font-size:21cqw }
.pack-stock-override strong[data-digits="4"] { font-size:16cqw }
.pack-stock-override strong[data-digits="5"] { font-size:13cqw }
.pack-stock-override strong[data-digits="6"] { font-size:10.5cqw }
.pack-stock-override strong[data-digits="7"] { font-size:9cqw }
.pack-stock-override strong[data-digits="8"] { font-size:8cqw }
.pack-stock-override strong[data-digits="9"] { font-size:7cqw }
.pack-stock-override strong[data-digits="10"] { font-size:6.4cqw }
.pack-stock-override strong[data-digits="11"] { font-size:5.8cqw }
.pack-stock-override strong[data-digits="12"] { font-size:5.3cqw }
.pack-stock-override strong[data-digits="13"] { font-size:4.9cqw }
.pack-stock-override strong[data-digits="14"] { font-size:4.5cqw }
.pack-stock-override strong[data-digits="15"] { font-size:4.2cqw }
.pack-stock-override strong[data-digits="16"] { font-size:4cqw }
.pack-stock-override>span { font-size:7.6cqw; line-height:1.06; letter-spacing:-.02em; }
.pack-stock-override--missing>span { font-size:6.5cqw }
.pack-open-action { display:flex; align-items:center; justify-content:center; padding:0 12%; background:var(--ink-deep); color:var(--paper); font-size:clamp(17px,7.5cqw,42px); line-height:1.1; }
.pack-open-action--missing { font-size:clamp(14px,4.8cqw,25px) }
.pack-open-arrow { position:absolute; right:1.6%; top:14%; bottom:14%; width:12%; display:grid; place-items:center; background:var(--yellow); color:var(--ink-deep); border-radius:5px; }
.pack-open-arrow .icon { width:75%; height:75% }
.pack-open-action:disabled .pack-open-arrow { opacity:.45 }
.pack-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.pack-option { position:relative; container:option / inline-size; border-radius:9px; min-width:0; overflow:hidden; isolation:isolate; }
.pack-option--daily { padding:0; }
.pack-option--daily .pack-image-action { left:3.3%; right:3.3%; bottom:2.5%; height:16%; }
.pack-daily-action { display:flex; align-items:center; justify-content:center; padding:5px 32px 5px 7px; background:var(--grain),var(--yellow); color:var(--ink-deep); font-size:clamp(14px,10cqw,26px); line-height:1.1; white-space:nowrap; }
.pack-daily-arrow { position:absolute; right:5px; display:grid; place-items:center; width:24px; height:27px; }
.pack-daily-arrow .icon { width:24px; height:24px }
.pack-daily-action:disabled .pack-daily-arrow { opacity:.45 }
.pack-option--extra { display:flex; flex-direction:column; border:1.5px solid var(--yellow); background:var(--ink-deep); color:var(--paper); padding:8px 6px 5px; }
.pack-option--extra h2 { position:relative; z-index:2; font-size:11.9cqw; line-height:1.08; letter-spacing:-.015em; transform:scaleX(1.12); transform-origin:left center; }
.pack-option--extra h2 span { font-size:10.8cqw; }
.pack-price { position:relative; z-index:2; color:var(--yellow); font-size:13.7cqw; line-height:1.25; transform:scaleX(1.15); transform-origin:left center; }
.pack-shortfall { position:relative; z-index:2; font-size:7.6cqw; margin-top:3px; }
.pack-feather-original {
  position:absolute; right:0; bottom:19.5%; width:100%; height:67%; object-fit:contain; object-position:right bottom;
  /* Reuse the official alpha to soften stray translucent fringe, without recoloring. */
  mask-image:url('../../assets/validated/cartes/01-pack-supplementaire-plume.png');
  mask-mode:alpha; mask-size:contain; mask-position:right bottom; mask-repeat:no-repeat;
}
.pack-action { position:relative; z-index:3; display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; padding:5px 31px 5px 9px; margin-top:auto; border-radius:6px; font-size:clamp(14px,9cqw,26px); line-height:1.1; background:var(--yellow); color:var(--ink-deep); text-align:center; }
.pack-action>span { position:absolute; right:5px; display:grid; place-items:center; width:24px; height:27px; }
.pack-action .icon { width:25px; height:25px; stroke-width:2.2; }
.pack-action:disabled { background:#697985; color:var(--ink-deep); }
.pack-explanation { display:flex; align-items:center; justify-content:center; text-align:center; gap:10px; font-size:13px; padding:9px 0 0 }
.pack-explanation::before,.pack-explanation::after { content:''; height:1px; background:var(--line); flex:1 }
.collection-overview { background:var(--grain),var(--paper); color:var(--ink-deep); border-radius:6px; padding:12px 11px; display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center }
.collection-total { border-right:1px solid var(--ink-light); padding-right:10px }
.collection-total>p { display:flex; align-items:baseline; white-space:nowrap; letter-spacing:-.04em; line-height:1.12 }
.collection-total strong { font-size:15cqw; font-weight:400 }
.collection-total p>span { font-size:10cqw }
.collection-total h2 { font-size:3.9cqw; font-weight:400; margin-top:2px }
.collection-completion p { font-size:4.4cqw; font-weight:700; margin:0 0 5px }
.collection-progress { display:block; width:100%; height:13px; overflow:hidden; border:1px solid currentColor; border-radius:100px; background:var(--ink); appearance:none; -webkit-appearance:none; color:var(--ink); }
.collection-progress::-webkit-progress-bar { background:var(--ink); border-radius:100px }
.collection-progress::-webkit-progress-value { background:var(--yellow); border-radius:100px }
.collection-progress::-moz-progress-bar { background:var(--yellow); border-radius:100px }
.collection-progress[data-unavailable] { opacity:.4 }
.collection-progress[data-unavailable]::-webkit-progress-bar { background:repeating-linear-gradient(120deg,var(--ink) 0 5px,#24485b 5px 10px) }
.collection-heading { display:flex; align-items:center; gap:13px; padding:12px 0 9px }
.collection-heading h2 { font-size:7cqw; line-height:1.2; white-space:nowrap }
.collection-heading p { font-size:3.6cqw; font-weight:700; color:var(--muted); border-left:1px solid var(--line); padding:5px 0 5px 12px }
.series-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.series-tile { container:series / inline-size; position:relative; padding:7px 29px 8px 10px; min-width:0; min-height:62px; border-radius:5px; display:flex; flex-direction:column; justify-content:center; border:1px solid transparent; }
.series-tile--yellow { background:var(--grain),var(--yellow); color:var(--ink-deep) }
.series-tile--paper { background:var(--grain),var(--paper); color:var(--ink-deep) }
.series-tile--ink { background:var(--grain),var(--ink-deep); color:var(--paper); border:1.5px solid var(--yellow) }
.series-tile h3 { font-size:19cqw; line-height:1.2; white-space:nowrap; letter-spacing:-.02em; margin-bottom:3px }
.series-tile h3.series-name--long { font-size:11.9cqw; white-space:normal }
.series-tile h3.series-name--medium { font-size:16.5cqw }
.series-progress { display:flex; align-items:center; gap:8px }
.series-progress>span { font-size:12cqw; font-weight:700; white-space:nowrap }
.series-progress progress { flex:1; min-width:15px; height:11px; color:inherit }
.series-arrow { position:absolute; top:22%; right:4px; bottom:22%; width:22px; border-left:1px solid currentColor; display:grid; place-items:center; }
.series-arrow .icon { width:21px; height:21px; stroke-width:2.5; margin-left:4px }
.series-complete { font-size:10px; color:inherit; letter-spacing:.04em; margin-top:4px }
.collection-demo-note { font-size:12px; color:var(--muted); padding-top:12px }
.collection-empty { color:var(--muted); padding:16px 0 }
.club-page { container:club / inline-size; padding-left:6px; padding-right:6px; }
.club-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; align-items:center; }
.club-card { position:relative; display:block; min-width:0; border-radius:7px; }
.club-card--wide { grid-column:1/-1; }
@container app (min-width:720px) {
  .pages-content { max-width:920px; padding:0 28px 32px; margin:auto }
  .games-page { max-width:760px }
  .games-grid { gap:12px }
  .cards-page { max-width:760px }
  .cards-tabs a { min-height:50px; font-size:25px }
  .cards-utility { min-height:55px }
  .feather-balance { font-size:20px }
  .feather-balance strong { font-size:29px }
  .pack-feature { max-width:590px; margin:-24px auto 14px; }
  .pack-options { gap:14px; max-width:590px; margin:auto; }
  .pack-option--extra { padding:14px 11px 9px; }
  .pack-option .pack-action { min-height:48px; }
  .pack-explanation { font-size:18px; padding-top:15px; }
  .collection-overview { padding:22px 25px }
  .series-grid { gap:12px }
  .series-tile { padding:12px 42px 12px 18px; min-height:95px }
  .series-arrow { right:10px; width:26px }
  .series-arrow .icon { width:27px; height:27px }
  .collection-progress { height:20px }
  .series-progress progress { height:16px }
  .collection-heading { padding:22px 0 16px }
  .club-page { max-width:760px; padding-left:28px; padding-right:28px }
  .club-grid { gap:10px }
  .club-card { border-radius:10px }

}
/* Test controls remain outside the approved pack artwork and immersive scene. */
.cards-page .pack-demo{font-size:14px;line-height:1.4;margin-top:15px;color:var(--muted)}
.cards-page .pack-demo p{margin:8px 0}
.cards-page .pack-demo #pack-demo-status{color:var(--paper)}
.cards-page .pack-demo-warning{border:1px solid #d4a566;padding:12px}
.cards-page .pack-demo-tools{border-top:1px solid #456176;margin-top:18px;padding-top:7px}
.cards-page .pack-demo-tools summary{min-height:44px;display:list-item;align-content:center;cursor:pointer}
.cards-page .pack-demo-actions{display:flex;gap:8px;flex-wrap:wrap}
.cards-page .pack-demo button{min-height:44px;font-size:14px}
.cards-page .pack-demo form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.cards-page .pack-demo form label{flex-basis:100%}
.cards-page .pack-demo input{font:inherit;min-width:0;max-width:100%;min-height:44px;padding:8px}