@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("assets/fonts/archivo-latin-variable.woff2") format("woff2");
}

:root {
  --canvas: #09090b;
  --text: #f5f5f7;
  --label: #d1d1d6;
  --muted: #a5a5ad;
  --field: #161619;
  --input-border: #6c6c75;
  --accent: #315cf2;
  --accent-hover: #244cda;
  --focus: #a5bbff;
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--canvas);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.backdrop { position: fixed; inset: 0; overflow: hidden; }
.poster-wall {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160vmax;
  height: 192vmax;
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: clamp(8px, .7vmax, 12px);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.poster-tile { display: grid; place-items: center; min-width: 0; min-height: 0; }
.wall-card-holder { width: 100%; container-type: inline-size; opacity: 0; transition: opacity 240ms ease; pointer-events: none; user-select: none; }
.poster-tile.is-revealed .wall-card-holder { opacity: .6; }
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .wall-card-holder { opacity: .6; transition: none; }
}
.backdrop-filter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 290px 420px at 50% 44%, var(--canvas) 0%, rgb(9 9 11 / 96%) 55%, transparent 100%),
    linear-gradient(to top, var(--canvas) 0, rgb(9 9 11 / 95%) 100px, transparent 180px);
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding: 48px 24px 24px;
  pointer-events: none;
}
.login { width: 100%; max-width: 340px; margin-block: auto; padding-block: 24px; pointer-events: auto; }
.auth-heading { text-align: center; }
h1 { margin: 0; font-family: "Archivo", Arial, sans-serif; font-size: 82px; font-weight: 800; font-stretch: 75%; line-height: .84; letter-spacing: -.055em; text-transform: uppercase; }
h1 > span { display: block; }
.subtitle { margin: 20px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; letter-spacing: -.015em; }
.auth-panel { margin-top: 34px; }
.fields { display: grid; gap: 20px; }
.field { display: grid; gap: 9px; }
.field > label { font-size: 13px; color: var(--label); }
.field > input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--input-border); border-radius: 12px; background: var(--field); color: var(--text); font-size: 15px; }
.field > input:hover { border-color: #a5a5ad; }
.field-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.primary-button { display: flex; align-items: center; justify-content: center; text-decoration: none; width: 100%; min-height: 48px; margin-top: 24px; border: 0; border-radius: 12px; background: var(--accent); color: #ffffff; font-size: 14px; font-weight: 500; }
.primary-button:hover { background: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.field > input:focus-visible { outline-offset: 2px; }
.mode-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.mode-label { color: var(--muted); font-size: 12px; line-height: 1.5; }
.mode-label.is-active { color: var(--text); }
.mode-switch { position: relative; display: inline-flex; width: 52px; height: 32px; flex-shrink: 0; cursor: pointer; }
.mode-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch-track { position: absolute; inset: 0; border: 1px solid #75757e; border-radius: 999px; background: #303035; transition: background-color 180ms ease; }
.switch-track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--text); transition: transform 180ms ease; }
.mode-switch input:checked + .switch-track { background: var(--accent); border-color: var(--focus); }
.mode-switch input:checked + .switch-track::after { transform: translateX(20px); }
.mode-switch input:focus-visible { outline: none; }
.mode-switch input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 4px; }
.recovery-note { display: flex; gap: 10px; margin-top: 20px; color: var(--muted); font-size: 11px; line-height: 1.6; cursor: pointer; }
.recovery-note input { margin: 3px 0 0; accent-color: var(--accent); flex-shrink: 0; }

.page-footer { width: 100%; max-width: 580px; padding-top: 32px; text-align: center; pointer-events: auto; }
.noscript-note { pointer-events: auto; color: var(--label); font-size: 12px; }

@media (max-width: 600px) {
  .poster-wall { height: 200vmax; grid-template-columns: repeat(18, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); gap: 7px; }
}
@media (max-width: 480px) {
  .page { padding: 32px 24px 20px; }
  .login { max-width: 320px; }
  h1 { font-size: 76px; }
}
@media (max-width: 350px) {
  h1 { font-size: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-card-holder, .switch-track, .switch-track::after { transition: none; }
}

.footer-links { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 20px); font-size: 11px; line-height: 1.6; white-space: nowrap; }
.footer-links > a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:hover { color: var(--text); }
.content-page { width: 100%; max-width: 600px; margin-block: auto; padding-block: 24px; pointer-events: auto; }
.small-wordmark { display: inline-block; margin-bottom: 48px; color: var(--text); font-family: "Archivo", Arial, sans-serif; font-size: 24px; font-weight: 800; font-stretch: 75%; letter-spacing: -.04em; text-transform: uppercase; text-decoration: none; }
.content-title { margin: 0; font: inherit; font-size: clamp(28px, 6vw, 40px); font-weight: 500; letter-spacing: -.035em; line-height: 1.2; text-transform: none; overflow-wrap: anywhere; }
.edition-summary { margin-top: 32px; padding: 28px; border-radius: 20px; background: var(--field); }
.edition-label { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.edition-title { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.025em; }
.edition-description { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.content-copy { margin: 24px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.content-copy a { color: var(--text); text-underline-offset: 3px; }

.home-layout { display: flex; flex-direction: column; min-height: 100svh; width: 100%; }
.site-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 28px; background: #141417; }
.header-content { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 24px; width: 100%; max-width: 1200px; margin-inline: auto; }
.header-wordmark { justify-self: center; color: var(--text); font-family: "Archivo", Arial, sans-serif; font-size: 30px; font-weight: 800; font-stretch: 75%; letter-spacing: -.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.main-nav { display: contents; }
.main-nav a { justify-self: center; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 12px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.main-nav a:first-child { grid-column: 2; grid-row: 1; }
.main-nav a:last-child { grid-column: 3; grid-row: 1; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: #6e90ff; }
.header-login { background: var(--accent); color: #fff; }
.header-login:hover { background: var(--accent-hover); }
.header-login { display: flex; align-items: center; justify-content: center; justify-self: center; min-height: 44px; padding: 0 20px; border-radius: 12px; font-size: 14px; font-weight: 500; text-decoration: none; }
.home-layout > .page { flex: 1; min-height: 0; }
.auth-layout { pointer-events: none; }
.auth-layout > .site-header { pointer-events: auto; }
.account-menu { position: relative; justify-self: center; flex-shrink: 0; }
.account-menu > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-inline: 4px; color: var(--label); font-size: 14px; cursor: pointer; list-style: none; border-radius: 8px; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-name { color: var(--text); font-weight: 500; }
.account-chevron { width: 7px; height: 7px; flex-shrink: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.account-menu[open] .account-chevron { transform: translateY(2px) rotate(225deg); }
.account-dropdown { position: absolute; right: 0; top: calc(100% + 12px); display: grid; min-width: 184px; padding: 8px; border-radius: 16px; background: #242428; }
.account-dropdown a { display: block; padding: 12px 14px; border-radius: 10px; color: var(--label); font-size: 13px; line-height: 1.4; text-decoration: none; }
.account-dropdown a:hover { background: #34343a; color: var(--text); }
.account-dropdown a[aria-current="page"] { color: #6e90ff; }
.account-menu:has(.account-dropdown a:not(.mobile-nav-link)[aria-current="page"]) > summary,
.account-menu:has(.account-dropdown a:not(.mobile-nav-link)[aria-current="page"]) .account-name { color: #6e90ff; }
.account-dropdown .mobile-nav-link, .mobile-public-menu { display: none; }
.home-content { flex: 1; width: 100%; max-width: 960px; margin-inline: auto; padding: 56px 24px; }
.home-layout > .page-footer { margin-inline: auto; padding-bottom: 24px; }
@media (max-width: 700px) {
  .site-header { padding: 12px 16px; }
  .header-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .header-wordmark { grid-column: 1; grid-row: 1; }
  .account-menu, .header-login { grid-column: 2; grid-row: 1; }
  .main-nav, .header-login { display: none; }
  .account-dropdown .mobile-nav-link, .mobile-public-menu { display: block; }
  .account-menu:has(.mobile-nav-link[aria-current="page"]) > summary,
  .account-menu:has(.mobile-nav-link[aria-current="page"]) .account-name { color: #6e90ff; }
}
@media (max-width: 480px) {
  .site-header { gap: 12px; padding: 12px 16px; }
  .header-content { gap: 8px 12px; }
  .header-wordmark { font-size: 22px; }
  .account-menu > summary { gap: 9px; font-size: 12px; }
  .home-content { padding-block: 36px; }
  .edition-summary { padding: 24px; }
}

.pack-page { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 40px 24px 48px; }
.pack-page > .content-title { text-align: center; }
.pack-stage { --pack-width: 240px; position: relative; flex: 1; display: grid; place-items: center; width: 100%; min-height: 440px; perspective: 1100px; }
.pack-display { position: relative; display: flex; flex-direction: column; align-items: center; gap: 56px; width: 100%; padding-block: 24px; }
.pack-float { position: relative; width: var(--pack-width); aspect-ratio: 2 / 3; margin: 0; transform-style: preserve-3d; animation: pack-float 6s ease-in-out infinite; }
.pack-wrapper { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: #e7e7e5; box-shadow: 2px 0 0 #a8abb2, 12px 20px 34px rgb(0 0 0 / 45%); }
.pack-wrapper::before, .pack-wrapper::after { content: ""; position: absolute; left: 0; right: 0; height: 4%; z-index: 2; background: repeating-linear-gradient(90deg, #c4c7cd 0px, #f2f3f5 1px, #d9dce1 2px, #c4c7cd 4px); }
.pack-wrapper::before { top: 0; }
.pack-wrapper::after { bottom: 0; }
.pack-face { position: absolute; inset: 4% 1.5%; overflow: hidden; isolation: isolate; background: linear-gradient(to bottom, #f5f5f2 0 48%, var(--accent) 48% 100%); }
.pack-edition { position: absolute; z-index: 3; top: 6%; left: 9%; color: #171719; font-size: calc(var(--pack-width) * .041); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.pack-wordmark { position: absolute; z-index: 3; top: 16%; left: 9%; color: #171719; font-family: "Archivo", Arial, sans-serif; font-size: calc(var(--pack-width) * .17); font-weight: 800; font-stretch: 75%; line-height: .84; letter-spacing: -.055em; text-transform: uppercase; }
.pack-wordmark > span { display: block; }
.pack-title { position: absolute; z-index: 3; top: 40%; left: 9%; color: #171719; font-size: calc(var(--pack-width) * .065); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.pack-cards { position: absolute; z-index: 1; inset: 48% 0 0; overflow: hidden; }
.pack-fan-card { position: absolute; bottom: 12%; width: 31%; container-type: inline-size; transform-origin: center 90%; }
.pack-fan-card:nth-child(1) { left: 16%; transform: rotate(-16deg); }
.pack-fan-card:nth-child(2) { left: 34.5%; bottom: 7%; z-index: 1; }
.pack-fan-card:nth-child(3) { left: 53%; transform: rotate(16deg); }
.pack-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(110deg, rgb(255 255 255 / 10%) 0%, transparent 30%, rgb(0 0 0 / 6%) 64%, rgb(255 255 255 / 6%) 100%); }
.pack-shadow { position: absolute; left: 50%; top: calc(var(--pack-width) * 1.5 + 46px); width: 180px; height: 20px; border-radius: 50%; background: #000; filter: blur(10px); animation: pack-shadow 6s ease-in-out infinite; }
.pack-status { width: min(100%, 360px); padding: 18px 20px; border-radius: 24px; background: #141417; }
.pack-error { width: min(100%, 360px); margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
.pack-status-labels { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pack-stock, .pack-countdown { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.pack-stock strong { color: var(--text); font-size: 14px; font-weight: 500; }
.pack-countdown time { margin-left: 4px; color: var(--text); font-variant-numeric: tabular-nums; }
.pack-progress { display: block; width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 99px; background: #242428; color: var(--accent); appearance: none; direction: ltr; }
.pack-progress::-webkit-progress-bar { background: #242428; border-radius: 99px; }
.pack-progress::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
.pack-progress::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
@keyframes pack-float {
  0%, 100% { transform: translateY(6px) rotate(-6deg) rotateY(-12deg); }
  50% { transform: translateY(-10px) rotate(-4deg) rotateY(-8deg); }
}
@keyframes pack-shadow {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .65; }
  50% { transform: translateX(-50%) scaleX(.84); opacity: .4; }
}
@media (max-width: 600px) {
  .pack-page { padding: 28px 24px 32px; }
  .pack-stage { --pack-width: 200px; min-height: 370px; }
  .pack-shadow { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .pack-float { animation: none; transform: rotate(-5deg) rotateY(-10deg); }
  .pack-shadow { animation: none; transform: translateX(-50%); opacity: .5; }
}

.card-page { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 40px 24px; }
.card-stage { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px 28px; width: 100%; max-width: 1440px; padding-top: 48px; }
.card-sample { width: min(100%, 240px); }
.card-rarity-label { margin: 0 0 16px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-align: center; }
.film-card { position: relative; width: 100%; padding: 8px; border-radius: 18px; background: linear-gradient(135deg, #fff 0%, #e4e4e8 60%, #f8f8fa 100%); box-shadow: inset 1px 1px 1px rgb(255 255 255 / 65%), inset -1px -2px 2px rgb(0 0 0 / 35%), 0 3px 4px rgb(0 0 0 / 35%), 0 16px 40px rgb(0 0 0 / 28%); }
.film-card::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgb(255 255 255 / 25%); border-bottom-color: rgb(0 0 0 / 20%); border-right-color: rgb(0 0 0 / 16%); border-radius: 15px; pointer-events: none; }
.film-card-face { position: relative; z-index: 1; overflow: hidden; border-radius: 11px; background: var(--card-face, #17171b); box-shadow: 0 0 0 1px rgb(0 0 0 / 45%), 0 1px 1px rgb(255 255 255 / 25%); }
.film-card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 12px; color: var(--card-label, #c4c4cc); font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: .09em; text-transform: uppercase; }
.film-card-header > :last-child { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.film-card-art { position: relative; overflow: hidden; isolation: isolate; }
.film-card-poster { display: block; width: 100%; height: auto; }
.film-card-details { padding: 13px 12px 14px; }
.film-card-details h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; height: 2.6em; overflow: hidden; margin: 0; color: var(--card-ink, var(--text)); font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; overflow-wrap: anywhere; }
.film-card-details p { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 6px 0 0; color: var(--card-label, #b0b0ba); font-size: 10px; line-height: 1.4; }
.film-card-details p > :first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; height: 2.8em; flex: 1; min-width: 0; overflow: hidden; overflow-wrap: anywhere; }
.film-card-details p > :last-child { flex-shrink: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .card-page { padding: 28px 24px; }
  .card-stage { padding-top: 32px; }
}

.film-card--uncommon { background: linear-gradient(135deg, #62636e 0%, #44454f 40%, #35363f 70%, #51525c 100%); }
.film-card--rare { --card-face: #d9dde3; --card-ink: #20252d; --card-label: #444c58; background: linear-gradient(135deg, #e4e8ee, #a9b2bf); }
.film-card--ultrarare { --card-face: #e2c992; --card-ink: #302618; --card-label: #55452b; background: linear-gradient(135deg, #f0d59b, #b18a42); }
.film-card--hyperrare { --card-face: linear-gradient(135deg, #e1c8de 0%, #eddbbb 30%, #c6e3d7 65%, #cecee9 100%); --card-ink: #292633; --card-label: #4f485b; background: linear-gradient(135deg, #c99cd7 0%, #efbd9a 25%, #b6dbaa 50%, #93cfdf 75%, #b9a6e2 100%); }

:is(.pack-fan-card, .wall-card-holder, .summary-card, .flight-card, .draw-card, .collection-item, .detail-card, .profile-card) .film-card { padding: 3.333cqw; border-radius: 7.5cqw; box-shadow: inset .4cqw .4cqw .4cqw rgb(255 255 255 / 65%), inset -.4cqw -.8cqw .8cqw rgb(0 0 0 / 35%); }
:is(.pack-fan-card, .wall-card-holder, .summary-card, .flight-card, .draw-card, .collection-item, .detail-card, .profile-card) .film-card::after { inset: 1.25cqw; border-width: .4cqw; border-radius: 6.25cqw; }
:is(.pack-fan-card, .wall-card-holder, .summary-card, .flight-card, .draw-card, .collection-item, .detail-card, .profile-card) .film-card-face { border-radius: 4.583cqw; box-shadow: 0 0 0 .4cqw rgb(0 0 0 / 45%); }
:is(.pack-fan-card, .wall-card-holder, .summary-card, .flight-card, .draw-card, .collection-item, .detail-card, .profile-card) .film-card-header { gap: 5cqw; padding: 4.583cqw 5cqw; font-size: 4.167cqw; }
:is(.pack-fan-card, .wall-card-holder, .summary-card, .flight-card, .draw-card, .collection-item, .detail-card, .profile-card) .film-card-details { padding: 5.417cqw 5cqw 5.833cqw; }
:is(.pack-fan-card, .wall-card-holder, .summary-card, .flight-card, .draw-card, .collection-item, .detail-card, .profile-card) .film-card-details h3 { font-size: 5.833cqw; }
:is(.pack-fan-card, .wall-card-holder, .summary-card, .flight-card, .draw-card, .collection-item, .detail-card, .profile-card) .film-card-details p { gap: 5cqw; margin-top: 2.5cqw; font-size: 4.167cqw; }

.card-back-section { flex: none; width: min(100%, 240px); margin: 56px auto 0; }
.film-card--back { display: grid; aspect-ratio: 240 / 450; }
.film-card--back .film-card-face { display: grid; place-items: center; background: var(--accent); }
.card-back-pattern { position: absolute; inset: -32% -115%; display: flex; flex-direction: column; justify-content: center; gap: 1px; transform: rotate(-45deg); color: #f5f5f7; opacity: .16; font-family: "Archivo", Arial, sans-serif; font-size: 20px; font-weight: 800; font-stretch: 75%; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.card-back-pattern > span { flex-shrink: 0; }
.card-back-pattern > span:nth-child(even) { transform: translateX(-55px); }
.card-back-pattern > span:nth-child(8n + 1) { font-family: "Archivo", Arial, sans-serif; font-weight: 800; font-stretch: 75%; }
.card-back-pattern > span:nth-child(8n + 2) { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; letter-spacing: .02em; }
.card-back-pattern > span:nth-child(8n + 3) { font-family: "Courier New", Courier, monospace; font-weight: 700; letter-spacing: -.06em; }
.card-back-pattern > span:nth-child(8n + 4) { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: 400; letter-spacing: .04em; }
.card-back-pattern > span:nth-child(8n + 5) { font-family: "Archivo", Arial, sans-serif; font-weight: 500; font-stretch: 125%; letter-spacing: -.03em; }
.card-back-pattern > span:nth-child(8n + 6) { font-family: "Times New Roman", Times, serif; font-weight: 700; letter-spacing: -.02em; }
.card-back-pattern > span:nth-child(8n + 7) { font-family: Verdana, Geneva, sans-serif; font-weight: 700; font-style: italic; letter-spacing: -.06em; }
.card-back-pattern > span:nth-child(8n + 8) { font-family: Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: .08em; }
.card-back-wordmark { position: relative; display: block; color: #f5f5f7; font-family: "Archivo", Arial, sans-serif; font-size: 40px; font-weight: 800; font-stretch: 75%; line-height: .84; letter-spacing: -.055em; text-transform: uppercase; }
.card-back-wordmark > span { display: block; }

.pack-pattern-area { position: absolute; inset: 48% 0 0; overflow: hidden; }
.pack-back-pattern { z-index: 0; font-size: calc(var(--pack-width) * .083333); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pack-hit-area, .card-hit-area { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.pack-hit-area:focus-visible, .card-hit-area:focus-visible { outline: 3px solid var(--focus); outline-offset: 8px; }
body.pack-pointer-input .pack-hit-area:focus-visible,
body.pack-pointer-input .card-hit-area:focus-visible { outline: none; }
.opening-active { overflow: hidden; }
.opening-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--canvas); color: var(--text); overscroll-behavior: contain; }
.opening-dialog::backdrop { background: rgb(9 9 11 / 96%); }
.opening-layout { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: 100%; padding: 20px 24px 40px; }
.opening-toolbar { display: flex; justify-content: flex-end; width: 100%; }
.opening-close { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 13px; }
.opening-close:hover { color: var(--text); background: var(--field); }
.opening-title { margin: 16px 0 32px; text-align: center; outline: none; }
.opening-pack-slot { position: relative; --pack-width: 240px; flex: 1; display: grid; place-items: center; width: 100%; min-height: 450px; padding-block: 40px; }
.opening-pack-slot .pack-float { animation: none; transform: none; }
.opening-pack-slot .pack-wrapper { overflow: hidden; }
.reveal-view { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.draw-counter { margin: 0 0 28px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.draw-card { position: relative; width: min(100%, 240px); aspect-ratio: 240 / 450; perspective: 1200px; container-type: inline-size; }
.draw-card-turn { position: absolute; inset: 0; z-index: 1; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.draw-card-turn.is-revealed { transform: rotateY(180deg); }
.draw-card-turn.is-resetting { transition: none; }
/* JS switches faces at the actual 90-degree crossing, avoiding mobile backface culling bugs. */
.draw-side { position: absolute; inset: 0; backface-visibility: visible; -webkit-backface-visibility: visible; }
.draw-side .film-card { width: 100%; height: 100%; }
.draw-front { transform: rotateY(180deg); }
.draw-front .film-card-face { display: flex; flex-direction: column; height: 100%; }
.draw-front .film-card-art { flex: 1; min-height: 0; }
.draw-front .film-card-poster { height: 100%; object-fit: contain; }
.card-hit-area { z-index: 2; border-radius: 18px; }
@media (max-width: 700px) {
  .opening-layout { padding-inline: 20px; }
  .opening-title { margin-top: 8px; font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .draw-card-turn { transition: none; } }
.pack-display > .pack-float:hover, .pack-display > .pack-float:focus-within { animation-play-state: paused; }

.draw-hint { margin: 28px 0 0; color: var(--muted); font-size: 12px; }
.draw-stack, .draw-stack-layer { position: absolute; inset: 0; }
.draw-stack-layer > .film-card { height: 100%; }
.draw-stack-layer:nth-child(1) { transform: translate(12px, -6px) rotate(6deg); }
.draw-stack-layer:nth-child(2) { transform: translate(9px, -4px) rotate(4.5deg); }
.draw-stack-layer:nth-child(3) { transform: translate(6px, -3px) rotate(3deg); }
.draw-stack-layer:nth-child(4) { transform: translate(3px, -1px) rotate(1.5deg); }
.cards-lifted .pack-cards { visibility: hidden; }
/* Match the draw card’s 240px canvas so its pattern does not reflow at handoff. */
.flight-card { position: absolute; top: 50%; left: 50%; z-index: 2; width: 240px; height: 450px; margin: -225px 0 0 -120px; container-type: inline-size; perspective: 1200px; }
.flight-center { z-index: 3; }
.flight-extra { z-index: 1; }
.flight-turn { position: absolute; inset: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.flight-side { position: absolute; inset: 0; backface-visibility: visible; -webkit-backface-visibility: visible; }
.flight-back { transform: rotateY(180deg); }
.flight-extra .flight-back { transform: none; }
.flight-side > .film-card { height: 100%; }
.flight-front .film-card-face { display: flex; flex-direction: column; height: 100%; }
.flight-front .film-card-art { flex: 1; min-height: 0; }
.flight-front .film-card-poster { height: 100%; object-fit: contain; }
:is(.flight-card, .draw-card) .card-back-wordmark { font-size: 16.667cqw; }
:is(.flight-card, .draw-card) .card-back-pattern { font-size: 8.333cqw; }
.reveal-view.is-staging { visibility: hidden; }
.draw-stack { z-index: 0; }
/* Keep filters off this 3D ancestor: filter/drop-shadow flattens the flip on mobile. */
.draw-card-lift { position: absolute; inset: 0; z-index: 1; border-radius: 18px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.rarity-effects-viewport { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rarity-light { position: absolute; inset: 0; opacity: 0; pointer-events: none; background-size: 240% 100%; mask-image: radial-gradient(ellipse farthest-corner at center, #000 calc(var(--wave-radius) - 16%), transparent var(--wave-radius)); }
.rarity-light--rare { background-image: linear-gradient(110deg, rgb(91 107 131 / 35%) 0%, rgb(229 236 248 / 65%) 28%, rgb(145 159 180 / 45%) 55%, rgb(245 248 255 / 65%) 78%, rgb(91 107 131 / 35%) 100%); }
.rarity-light--ultrarare { background-image: linear-gradient(110deg, rgb(145 95 24 / 45%) 0%, rgb(255 208 115 / 70%) 28%, rgb(189 130 43 / 55%) 55%, rgb(255 225 163 / 70%) 78%, rgb(145 95 24 / 45%) 100%); }
.rarity-light--hyperrare { background-image: linear-gradient(110deg, rgb(219 158 236 / 65%) 0%, rgb(255 195 131 / 65%) 20%, rgb(196 237 153 / 60%) 40%, rgb(125 219 240 / 65%) 60%, rgb(182 161 255 / 65%) 80%, rgb(219 158 236 / 65%) 100%); }
.rarity-reflection { position: absolute; inset: 0; padding: 8px; border-radius: 18px; opacity: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / 95%) 50%, transparent 60%); background-size: 300% 100%; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }

:is(.flight-card, .draw-card) .card-back-pattern { gap: .416667cqw; }
:is(.flight-card, .draw-card) .card-back-pattern > span:nth-child(even) { transform: translateX(-22.916667cqw); }

@property --wave-radius { syntax: "<percentage>"; inherits: false; initial-value: 130%; }
.rarity-reflection--ultrarare { background-image: linear-gradient(115deg, transparent 35%, #d9a74f 43%, #fff5d2 50%, #eac77f 57%, transparent 65%); }
.rarity-reflection--hyperrare { background-image: linear-gradient(115deg, transparent 30%, #db9eec 38%, #ffc383 44%, #edfacb 50%, #7ddbf0 56%, #b6a1ff 62%, transparent 70%); }

.collection-page { flex: 1; width: 100%; max-width: 1328px; margin-inline: auto; padding: 40px 24px; }
.collection-page > .content-title, .collection-count { text-align: center; }
.collection-count { margin: 12px 0 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.collection-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin: 48px 0 28px; }
.collection-edition { display: flex; align-items: baseline; gap: 12px; }
.collection-edition > span { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.collection-edition h2 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -.02em; }
.collection-toggles { display: flex; align-items: center; gap: 24px; }
.collection-toggle { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; cursor: pointer; }
.collection-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: 32px 24px; padding: 0; margin: 0; list-style: none; }
.collection-item { min-width: 0; container-type: inline-size; }
@media (max-width: 1000px) and (min-width: 601px) { .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .collection-page { padding: 28px 20px; }
  .collection-controls { margin-top: 36px; }
  .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; }
}

/* Pack information shares the quiet typography of footer links. */
.pack-info { width: min(100%, 360px); margin-top: -28px; text-align: center; }
.pack-info-title { margin: 0; font-size: 13px; font-weight: 500; }
.pack-description { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: justify; }
.pack-odds { margin-top: 16px; }
.pack-odds > summary { display: inline-block; border-radius: 3px; color: var(--muted); font-size: 11px; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.pack-odds > summary::-webkit-details-marker { display: none; }
.pack-odds > summary:hover { color: var(--text); }
.pack-odds-content { margin-top: 16px; padding: 20px; border-radius: 20px; background: var(--field); text-align: left; }
.pack-odds-content p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: justify; }
.pack-odds-content table { width: 100%; margin: 16px 0; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.pack-odds-content th, .pack-odds-content td { padding: 7px 0; text-align: right; font-weight: 400; }
.pack-odds-content th:first-child { text-align: left; }
.pack-odds-content thead { color: var(--muted); }
.collection-item .film-card-art { position: relative; }
.collection-quantity { position: absolute; right: 8px; bottom: 8px; padding: 5px 9px; border-radius: 999px; background: #141417; color: #f5f5f7; font-size: 12px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.summary-view { width: 100%; max-width: 1260px; margin-block: auto; }
.summary-continue { display: block; padding-block: 16px; border-radius: 18px; color: var(--text); text-decoration: none; text-align: center; }
.draw-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: 24px; width: 100%; }
.summary-card { position: relative; min-width: 0; padding-top: 22px; container-type: inline-size; text-align: left; }
.summary-new { position: absolute; inset: 0 0 auto; color: var(--muted); font-size: 11px; line-height: 1.4; font-weight: 400; text-align: center; }
@media (max-width: 700px) {
  .draw-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; max-width: 500px; margin-inline: auto; }
}

@media (max-width: 600px) {
  .collection-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
  .collection-toggles .collection-toggle { justify-content: space-between; gap: 8px; }
}

.missing-card-motif .card-back-wordmark { font-size: 16.667cqw; }
.missing-card-motif .card-back-pattern { font-size: 8.333cqw; gap: .416667cqw; }
.missing-card-motif .card-back-pattern > span:nth-child(even) { transform: translateX(-22.916667cqw); }

.missing-card-art { aspect-ratio: 2 / 3; }
.missing-card-motif { position: absolute; inset: 0; display: grid; place-items: center; background: var(--accent); }

/* Collection details and the profile share the existing card designs. */
.collection-item { position: relative; isolation: isolate; }
.collection-card-open { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 18px; background: transparent; cursor: pointer; }
.card-detail-dialog { width: min(calc(100% - 32px), 440px); max-height: calc(100svh - 32px); padding: 20px 24px 28px; border: 0; border-radius: 24px; background: #141417; color: var(--text); overscroll-behavior: contain; }
.card-detail-dialog::backdrop { background: rgb(9 9 11 / 88%); }
.card-detail-layout { display: flex; flex-direction: column; align-items: center; }
.detail-toolbar { display: flex; justify-content: flex-end; width: 100%; margin-bottom: 16px; }
.detail-card { width: min(100%, 240px); container-type: inline-size; }
.showcase-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.showcase-heart { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #ee87ae; cursor: pointer; }
.showcase-heart:hover { background: rgb(238 135 174 / 8%); }
.showcase-heart svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.showcase-heart[aria-pressed="true"] svg { fill: currentColor; }
.showcase-heart:disabled { opacity: .4; cursor: default; }
.showcase-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.showcase-message { max-width: 280px; min-height: 20px; margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: center; }
.profile-page { flex: 1; width: 100%; max-width: 1000px; margin-inline: auto; padding: 48px 24px; }
.profile-heading { text-align: center; }
.profile-bio { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.profile-not-found { flex: 1; display: grid; place-items: center; padding: 48px 24px; text-align: center; }
.profile-not-found > div { width: min(100%, 320px); }
.profile-not-found-link { margin-top: 24px; }
.profile-share { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; }
.profile-share a { max-width: 100%; overflow-wrap: anywhere; color: var(--muted); font-size: 12px; text-underline-offset: 3px; }
.profile-share a:hover { color: var(--text); }
.quiet-button { min-height: 44px; padding: 8px 4px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.quiet-button:hover { color: var(--text); }
#profile-copy-status:not(.sr-only) { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.profile-showcase-section { margin: 40px 0 56px; }
.profile-showcase { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 28px 24px; }
.profile-card { width: min(100%, 220px); min-width: 0; container-type: inline-size; }
.profile-card .card-back-wordmark { font-size: 16.667cqw; }
.profile-card .card-back-pattern { font-size: 8.333cqw; gap: .416667cqw; }
.profile-card .card-back-pattern > span:nth-child(even) { transform: translateX(-22.916667cqw); }
.profile-stats { width: 100%; max-width: 720px; margin-inline: auto; padding: 32px; border-radius: 24px; background: #141417; }
.profile-edition-code { margin: 0 0 8px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.profile-stats h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
.profile-total-labels { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 28px; }
.profile-total-labels p { margin: 0; }
.profile-total-labels strong { font-size: 28px; font-weight: 500; letter-spacing: -.035em; }
.profile-total-labels p > span { margin-left: 8px; }
.profile-total-labels span { color: var(--muted); font-size: 12px; }
.profile-total-progress { margin-top: 16px; }
.profile-rarities { display: grid; gap: 24px; margin-top: 32px; }
.profile-stat-labels { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.profile-stat-labels > :first-child { color: var(--text); letter-spacing: .05em; }
.profile-rarity-row .pack-progress { height: 4px; }
@media (max-width: 600px) {
  .profile-page { padding: 32px 20px; }
  .profile-showcase-section { margin-block: 32px 40px; }
  .profile-showcase { gap: 24px 16px; }
  .profile-card { width: calc((100% - 32px) / 3); max-width: 220px; }
  .profile-showcase[data-count="1"] .profile-card { width: min(100%, 240px); max-width: 240px; }
  .profile-stats { padding: 24px; }
  .card-detail-dialog { padding: 12px 20px 24px; }
}
@media (max-height: 700px) {
  .detail-card { max-width: 190px; }
  .detail-toolbar { margin-bottom: 8px; }
  .showcase-controls { margin-top: 12px; }
}

.collection-showcase-badge { position: absolute; top: 0; left: 0; z-index: 3; width: 28px; height: 28px; transform: translate(-40%, -40%); color: #ee87ae; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 60%)); pointer-events: none; }
.collection-showcase-badge svg { display: block; width: 100%; height: 100%; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.card-detail-metadata { width: min(100%, 300px); margin-top: 20px; text-align: center; overflow-wrap: anywhere; }
.card-detail-full-title { margin: 0; color: var(--text); font-size: 15px; line-height: 1.5; font-weight: 500; }
.card-detail-full-director { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.auth-errors { margin-top: 16px; color: #ffb4ba; font-size: 12px; line-height: 1.6; }
.auth-errors p { margin: 4px 0; }
.logout-form { margin: 0; }
.account-dropdown .logout-form button { display: block; width: 100%; border: 0; padding: 12px 14px; border-radius: 10px; background: transparent; color: var(--label); font-size: 13px; line-height: 1.4; text-align: left; }
.account-dropdown .logout-form button:hover { background: #34343a; color: var(--text); }

.account-menu { min-width: 0; max-width: 100%; }
.account-menu > summary > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }