/* Scoped to the fourth tile and its expanding pass. */
.game-tile--soon .pass-tile { padding:18px 10px 14px; min-height:224px; aspect-ratio:auto; gap:0; color:#342052; text-align:center; background:linear-gradient(145deg,#ffffffa8,#f5dcff66 42%,#d8fff080); border-color:#ffffffe0; backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); box-shadow:inset 0 2px 2px #fff, inset 0 -2px 4px #ffffff8c,-5px 6px 0 #baafd5a6,0 18px 32px #30205228; transition:transform 200ms cubic-bezier(.23,1,.32,1); }
.pass-tile::before,.pass-sheet__glass::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent 18%,#fff6 19%,#fff1 38%,transparent 39%); }
.pass-tile__eyebrow { font-size:9px; font-weight:800; letter-spacing:.07em; }
.pass-tile__mark { flex-shrink:0; border-radius:12px; margin:11px 0 8px; box-shadow:0 5px 12px #68458926; }
.pass-tile__title { font-size:clamp(20px,1.8vw,27px); line-height:1.04; font-weight:850; letter-spacing:-.045em; }
.pass-tile__price { font-size:9px; margin-top:10px; font-weight:600; white-space:nowrap; }
.pass-tile__action { display:flex; gap:14px; align-items:center; margin-top:12px; font-size:11px; font-weight:750; }
.pass-tile:active { transform:scale(.97)!important; }
.pass-tile:focus-visible,.pass-close:focus-visible,.pass-checkout:focus-visible { outline:3px solid #592ba4; outline-offset:5px; }
.pass-dialog { position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:24px; border:0; background:transparent; color:#35224f; overflow:auto; overscroll-behavior:contain; font-family:Inter,system-ui,sans-serif; }
.pass-dialog[open] { display:flex; align-items:safe center; justify-content:center; }
.pass-dialog::backdrop { background:#20112d69; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pass-sheet { position:relative; width:min(100%,480px); flex-shrink:0; margin:auto; isolation:isolate; }
.pass-sheet__glass { position:absolute; inset:0; z-index:-1; overflow:hidden; border:1.5px solid #ffffffe0; border-radius:32px; background:linear-gradient(140deg,#fff9,#f7e8ffa6 48%,#e6fff6c4),#e9ddf1de; box-shadow:inset 0 2px 1px #fff,inset 0 -3px 8px #ffffffb3,0 30px 85px #1d0b3e4d,0 5px 0 #ffffff47; }
.pass-sheet__content { padding:24px 28px 18px; }

/* ---- header ------------------------------------------------------------
   Brand only. The price sat up here for a while, which filled the empty top
   right but left the brand and the number at opposite ends of a wide row with
   a hole between them -- that is what read as spaced out. It belongs ON the
   button, where the amount sits next to the action it commits to and the
   reader meets it at the moment they decide. */
.pass-head { display:flex; align-items:center; margin-bottom:16px; }
.pass-head .pass-brand { margin-bottom:0; }
.pass-close { position:absolute; right:16px; top:16px; display:grid; place-items:center; width:44px; height:44px; border:1px solid #fff9; border-radius:50%; background:#ffffff70; color:#513764; cursor:pointer; transition:transform 160ms cubic-bezier(.23,1,.32,1); }
.pass-close svg { width:19px; height:19px; }
.pass-brand { display:flex; align-items:center; gap:10px; margin-bottom:22px; font-size:12px; font-weight:850; letter-spacing:.025em; line-height:1.2; }
.pass-brand img { border-radius:11px; }
.pass-brand small { font-size:8px; letter-spacing:.13em; font-weight:600; }
.pass-badge { display:inline-block; padding:7px 10px; border:1px solid #fff; border-radius:20px; background:#ffffff70; color:#684884; font-size:9px; font-weight:800; letter-spacing:.075em; }
.pass-sheet h2 { margin:0 0 8px; font-size:33px; line-height:1.05; letter-spacing:-.055em; font-weight:850; text-wrap:balance; }
#pass-intro { margin:0; color:#6a537b; font-size:13px; line-height:1.5; }
/* Two across rather than four down. The copy is short enough to sit in a half
   width, and the sheet loses four rows of height for it. */
.pass-perks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px;
  list-style:none; padding:0; margin:18px 0; }
.pass-perks li { display:flex; gap:10px; align-items:flex-start; }
/* Standalone icons, no box. The bordered tile around each one was doing
   nothing except adding a second shape to read before the icon inside it, and
   four of them in a row made the list look like a toolbar. */
.pass-perks__icon { flex:none; width:21px; height:21px; margin-top:1px; color:#764caf; }
.pass-perks strong { display:block; font-size:12.5px; font-weight:750; line-height:1.25; letter-spacing:-.01em; }
.pass-perks p { font-size:10.5px; line-height:1.45; margin:3px 0 0; color:#6a537b; }
/* .pass-price is retired -- the price moved into .pass-tag in the header. The
   rule is kept only so an older cached copy of the markup still renders. */
.pass-price { display:none; }
.pass-perks + .pass-checkout { margin-top:4px; }
.pass-price strong { font-size:35px; line-height:1; font-weight:800; letter-spacing:-.05em; }
.pass-price span { font-size:12px; margin-left:5px; color:#6a537b; }
.pass-price .pass-price__label { font-size:10px; font-weight:700; padding:7px 10px; border-radius:20px; color:#4d5f54; background:#d9efdf; }
/* ---- plan chooser -----------------------------------------------------
   A segmented control built from real radio inputs. The input is laid over
   its label at zero opacity rather than display:none'd, so it keeps its place
   in the tab order and in the accessibility tree: arrow keys move between the
   two, and a screen reader announces a group of two choices. A pair of divs
   with click handlers would look identical and do neither. */
.pass-plans { display:grid; grid-template-columns:1fr 1fr; gap:9px; border:0; padding:0; margin:0 0 13px; min-width:0; }
.pass-plans__legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pass-plan { position:relative; }
.pass-plan input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.pass-plan > span { display:flex; align-items:baseline; gap:7px; padding:11px 13px; border-radius:14px;
  border:1.5px solid #ffffffcc; background:#ffffff5c; transition:border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.pass-plan b { font-size:12.5px; font-weight:750; }
.pass-plan i { font-size:12.5px; font-style:normal; color:#6a537b; }
.pass-plan em { margin-left:auto; align-self:center; padding:3px 7px; border-radius:20px; background:#d9efdf;
  color:#4d5f54; font-size:9px; font-weight:700; font-style:normal; white-space:nowrap; }
.pass-plan input:hover + span { border-color:#fff; background:#ffffff85; }
.pass-plan input:checked + span { border-color:#9865db; background:#ffffffb3;
  box-shadow:0 0 0 1px #9865db, 0 4px 12px #7440a61f; }
.pass-plan input:focus-visible + span { box-shadow:0 0 0 3px #592ba4; }

/* The price rides on the button: the action and what it costs on one line, so
   the amount is met at the moment of deciding rather than carried down from
   the header. */
.pass-checkout__price { font-weight:600; opacity:.74; }
.pass-checkout__price::before { content:"\00b7"; margin-right:9px; opacity:.6; }
.pass-checkout { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:54px; border-radius:17px; background:linear-gradient(#9865db,#7e48c4); border:1px solid #b488eb; box-shadow:inset 0 1px 0 #ffffff5c,0 4px 0 #61339d,0 8px 18px #7440a62e; color:white; text-decoration:none; font-weight:750; font-size:14px; transition:transform 180ms cubic-bezier(.23,1,.32,1); }
.pass-checkout:active,.pass-close:active { transform:scale(.97); }
.pass-terms { text-align:center; font-size:10px; line-height:1.55; margin:13px 0 0; color:#6f5c7e; }
.pass-checkout-note { margin:8px 0 0; font-size:9px; text-align:center; color:#776783; }
@media (hover:hover) and (pointer:fine) { .game-tile--soon .pass-tile:hover { transform:translateY(-4px) rotate(2deg); } .pass-checkout:hover { transform:translateY(-2px); } .pass-close:hover { transform:rotate(8deg); } }
@media (max-width:760px) { .pass-perks { grid-template-columns:1fr; gap:13px; } }
@media (max-width:400px) { .pass-plans { grid-template-columns:1fr; gap:7px; } }
@media (max-width:640px) { .pass-dialog { padding:16px; } .pass-sheet__content { padding:26px 22px 20px; }
  .pass-head { margin-bottom:13px; } .pass-sheet h2 { font-size:32px; } .pass-tile__price { font-size:8px; } .pass-tile__eyebrow { font-size:8px; } }
@media (max-width:360px) { .pass-dialog { padding:12px; } .pass-sheet__content { padding:24px 20px 20px; } .pass-sheet h2 { font-size:29px; } .pass-perks { gap:12px; } }
@media (prefers-reduced-motion:reduce) { .game-tile--soon .pass-tile,.pass-checkout,.pass-close { transition:none; } .game-tile--soon .pass-tile:hover,.pass-checkout:hover,.pass-close:hover { transform:none; } }