/* Launch Pass (screens/pass.mjs): the reward track screen, its Home card and the claim reveal.
   Shares the Play screen's shell (.play-arts, .play-shade, .play-foot, .play-sel, .fbtn--go) and the gold tokens from arena.css. */

/* The Beta card face itself (full-bleed art, gold keyline, gold tag) lives with the other art versions in arena.css. */
.gc-slab.is-beta{border-color:var(--rc);box-shadow:inset 0 0 0 3px rgba(255,255,255,.08),inset 0 0 0 4px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.55),0 0 22px color-mix(in srgb,var(--rc) 45%,transparent)}
.pk-rchip--beta{color:#2a1a04;border-color:transparent;background:linear-gradient(180deg,#fffbe8,#f2cf85 50%,#c89040)}

/* ---------- Pass screen ---------- */
.bp{position:relative;height:100vh;min-height:600px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;
  padding:clamp(150px,19vh,200px) clamp(24px,3.4vw,64px) clamp(18px,3.4vh,36px)}
.bp .play-art{opacity:.42}
.bp-body{flex:1;min-height:0;display:flex;flex-direction:column}
.bp-head{display:flex;align-items:flex-end;gap:clamp(16px,2vw,32px);flex-wrap:wrap}
.bp-title{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 420px}
.bp-crest{flex:none;width:clamp(56px,4.4vw,76px);filter:drop-shadow(0 6px 8px rgba(0,0,0,.7))}
.bp-crest img,.hub-pass-crest img{display:block;width:100%;height:auto;aspect-ratio:1}
.bp-head .play-h{margin-bottom:8px;font-size:clamp(20px,1.7vw,28px);letter-spacing:.14em}
.bp-head .play-h small{font:700 13px/1 var(--cond);letter-spacing:.2em}
.bp-intro{margin:0;max-width:640px;font:500 15px/1.35 "Segoe UI",system-ui,sans-serif;color:#e4d9c2;text-shadow:0 1px 4px #000}
.bp-intro b{color:var(--gold1)}
.bp-level{flex:0 1 340px;display:flex;align-items:center;gap:14px;margin-left:auto}
.bp-level-num{flex:none;display:grid;place-items:center;align-content:center;width:64px;height:64px;border-radius:50%;border:3px solid transparent;
  background:radial-gradient(circle at 40% 30%,#fff4d6,#e0b35e 60%,#8a5f22) padding-box,var(--frame) border-box;box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 22px rgba(255,200,110,.45);color:#1c1204}
.bp-level-num small{font:700 10px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase}
.bp-level-num b{font:700 28px/1 var(--cond)}
.bp-level-bar{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.bp-level-bar small{font:700 13px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#d8cdb2;font-variant-numeric:tabular-nums}
.bp-meter{display:block;height:10px;border-radius:99px;background:rgba(6,8,10,.8);border:1px solid rgba(215,166,83,.45);overflow:hidden}
.bp-meter i{display:block;height:100%;width:calc(var(--p) * 100%);border-radius:inherit;background:linear-gradient(90deg,var(--gold3),var(--gold2) 60%,var(--gold1));box-shadow:0 0 12px rgba(255,200,110,.6);transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* The track: ten reward tiles strung on a gold line, the reached part lit. */
.bp-scroll{--tw:clamp(150px,calc((100vw - var(--rail) - 7vw) / 7 - 16px),210px);flex:1;min-height:0;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;
  margin:0 calc(clamp(24px,3.4vw,64px) * -1);padding:0 clamp(24px,3.4vw,64px);scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none}
.bp-scroll::-webkit-scrollbar{display:none}
.bp-scroll.is-dragging{cursor:grabbing}
.bp-scroll.is-dragging .bp-tile{pointer-events:none}
.bp-scroll img{-webkit-user-drag:none}
.bp-card{cursor:zoom-in}
.bp.is-settled .bp-stop{animation:none}
.bp-track{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:var(--tw);gap:clamp(12px,1.2vw,20px);margin:0 auto;padding:30px 4px 14px;list-style:none}
.bp-track::before,.bp-track::after{content:"";position:absolute;z-index:0;left:calc(var(--tw) / 2);top:30px;height:3px;translate:0 -50%}
.bp-track::before{right:calc(var(--tw) / 2);background:rgba(215,166,83,.28)}
.bp-track::after{width:calc((100% - var(--tw)) * var(--reached));background:linear-gradient(90deg,var(--gold2),var(--gold1));box-shadow:0 0 10px rgba(255,200,110,.55),0 2px 4px rgba(0,0,0,.8)}
.bp-stop{position:relative;z-index:1;scroll-snap-align:center;animation:lnIn .5s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 45ms) backwards}
.bp-tile{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:inherit;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.bp-num{position:absolute;left:50%;top:0;z-index:3;translate:-50% -50%;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  font:700 18px/1 var(--cond);color:#f5ecd6;border:3px solid transparent;background:radial-gradient(circle at 40% 30%,#2b3339,#0d1114) padding-box,var(--frame) border-box;box-shadow:0 0 0 3px rgba(0,0,0,.55),0 6px 12px rgba(0,0,0,.7)}
.bp-num svg{width:20px;height:20px}
.bp-frame{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;aspect-ratio:3/4.4;padding:14px 12px 12px;border-radius:12px;overflow:hidden;
  border:3px solid transparent;background:radial-gradient(90% 60% at 50% 40%,rgba(60,50,30,.55),rgba(8,10,12,.94) 75%) padding-box,linear-gradient(rgba(215,166,83,.4),rgba(215,166,83,.4)) border-box;
  box-shadow:0 14px 28px rgba(0,0,0,.65);transition:box-shadow .25s,filter .25s}
.bp-tile.is-beta .bp-frame{background:radial-gradient(90% 60% at 50% 40%,rgba(120,84,26,.6),rgba(10,8,5,.95) 75%) padding-box,linear-gradient(160deg,#fff1c4,#b27a2c 40%,#fbe7b0 70%,#8a5f22) border-box}
/* the reward art fills the space above the name */
.bp-card,.bp-packs,.bp-coins{flex:1;min-height:0;width:100%;display:grid;place-items:center}
.bp-card{position:relative}
.bp-frame .bp-card .cf{position:absolute;left:50%;top:14px;bottom:2px;width:auto;max-width:92%;translate:-50% 0;pointer-events:none}
.bp-card .cf-text,.bp-card .cf-kws{display:none}
.bp-packs{position:relative}
.bp-pack{position:absolute;left:50%;top:50%;translate:calc(-50% + var(--k) * 26%) -50%;rotate:calc(var(--k) * 11deg - 2deg);transform-origin:50% 90%}
.bp-pack:nth-child(2){z-index:1}
.bp-pack .pr-pack{--pw:clamp(64px,calc(var(--tw,180px) * .52 - var(--n) * 6px),110px)}
.bp-got .bp-pack .pr-pack{--pw:clamp(80px,7vw,120px)}
.bp-coins{position:relative;align-content:center}
.bp-coins i{position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;
  background:url(../../assets/ui/icons/coin.svg) center/contain no-repeat;filter:drop-shadow(0 6px 8px rgba(0,0,0,.65))}
.bp-coins i:nth-child(1){translate:-92% -30%}.bp-coins i:nth-child(2){translate:-8% -30%}.bp-coins i:nth-child(3){translate:-50% -72%}
.bp-coins i:nth-child(4){translate:-72% -2%;scale:.85}.bp-coins i:nth-child(5){translate:-28% -2%;scale:.85}
.bp-coins b{position:absolute;left:50%;bottom:4%;translate:-50% 0;font:700 clamp(22px,1.8vw,30px)/1 var(--cond);color:#fff4d2;text-shadow:0 2px 6px #000,0 0 14px rgba(255,200,110,.6)}
.bp-name{position:relative;z-index:1;max-width:100%;font:700 clamp(14px,1.05vw,18px)/1.1 var(--cond);letter-spacing:.06em;text-transform:uppercase;text-align:center;text-shadow:0 2px 6px #000}
.bp-tag{position:relative;z-index:1;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:rgba(6,8,10,.85);border:1px solid rgba(215,166,83,.4);
  font:700 12px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#d8cdb2;font-variant-numeric:tabular-nums}
.bp-tag svg{width:13px;height:13px}
.bp-tag--done{color:#1c1204;background:linear-gradient(180deg,#fff1c4,#e2b25a);border-color:transparent}
.bp-tag--ready{padding:6px 16px;color:#fff;background:linear-gradient(180deg,#2f7fcf,#123e74);border-color:rgba(160,210,255,.6);box-shadow:0 0 16px rgba(63,168,255,.55)}
.bp-tile:hover{transform:translateY(-6px)}
.bp-tile.is-on{transform:translateY(-10px)}
.bp-tile.is-on .bp-frame{background-clip:padding-box,border-box;border-image:none;box-shadow:0 0 0 2px var(--gold1),0 0 30px color-mix(in srgb,var(--fc) 70%,transparent),0 18px 34px rgba(0,0,0,.7)}
.bp-tile.is-locked .bp-card,.bp-tile.is-locked .bp-packs,.bp-tile.is-locked .bp-coins{filter:saturate(.35) brightness(.6)}
.bp-tile.is-locked.is-beta .bp-card{filter:saturate(.55) brightness(.72)}
.bp-tile.is-claimed .bp-card,.bp-tile.is-claimed .bp-packs,.bp-tile.is-claimed .bp-coins{opacity:.55}
.bp-tile.is-ready .bp-frame{box-shadow:0 0 0 2px rgba(143,214,255,.8),0 0 28px rgba(63,168,255,.55),0 14px 28px rgba(0,0,0,.65);animation:bpReady 1.8s ease-in-out infinite}
@keyframes bpReady{50%{box-shadow:0 0 0 2px rgba(191,232,255,.95),0 0 44px rgba(63,168,255,.8),0 14px 28px rgba(0,0,0,.65)}}
.bp-tile.is-ready .bp-num,.bp-tile.is-claimed .bp-num{color:#1c1204;background:radial-gradient(circle at 40% 30%,#fff4d6,#e0b35e 60%,#8a5f22) padding-box,var(--frame) border-box}
.bp-tile.is-next .bp-num{background:radial-gradient(circle at 40% 30%,#3a8fe0,#123e74) padding-box,var(--frame) border-box;animation:lnPulse 1.8s ease-in-out infinite}
.bp-sel-num{flex:none;display:grid;place-items:center;width:clamp(56px,4.2vw,72px);aspect-ratio:1;border-radius:50%;font:700 clamp(24px,2vw,32px)/1 var(--cond);color:#1c1204;border:3px solid transparent;
  background:radial-gradient(circle at 40% 30%,#fff4d6,#e0b35e 60%,#8a5f22) padding-box,var(--frame) border-box;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 20px rgba(255,200,110,.4)}
.bp-sel p{white-space:normal}
.bp .fbtn--go{margin-left:auto}
.bp .fbtn--go i svg{width:70%;height:70%}

/* ---------- claim reveal ---------- */
.bp-veil{position:fixed;left:var(--rail);background:radial-gradient(60% 60% at 50% 50%,rgba(10,14,18,.72),rgba(2,3,4,.95))}
.bp-got .bp-coins b{display:none}
.bp-reveal{display:flex;flex-direction:column;align-items:center;gap:26px;padding:24px;max-width:min(1100px,94vw)}
.bp-reveal .ln-kicker{font:700 15px/1 var(--cond);letter-spacing:.3em;text-transform:uppercase;color:var(--gold1)}
.bp-reveal h2{margin:-10px 0 0;font:700 clamp(40px,7vh,72px)/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;text-align:center;
  background:linear-gradient(180deg,#fffbe8 10%,#f2cf85 45%,#b27a2c 80%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 24px rgba(255,190,90,.45));animation:endIn .9s cubic-bezier(.2,.8,.2,1)}
.bp-gots{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(16px,2vw,34px);margin:0;padding:0;list-style:none}
.bp-got{display:flex;flex-direction:column;align-items:center;gap:12px;width:clamp(130px,11vw,180px);animation:bpGot .7s cubic-bezier(.2,.9,.25,1.2) calc(.25s + var(--i) * .16s) backwards}
.bp-got.is-beta{width:clamp(190px,15vw,250px)}
.bp-got .bp-card,.bp-got .bp-packs,.bp-got .bp-coins{flex:none;aspect-ratio:3/4}
.bp-got .bp-card{padding:0;aspect-ratio:5/7}.bp-got .bp-card .cf{width:100%}
.bp-got.is-beta .bp-card .cf{box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 60px rgba(255,210,120,.65),0 16px 30px rgba(0,0,0,.7)}
.bp-got b{font:700 18px/1.1 var(--cond);letter-spacing:.06em;text-transform:uppercase;text-align:center;text-shadow:0 2px 6px #000}
@keyframes bpGot{from{opacity:0;transform:translateY(30px) scale(.7)}}

/* ---------- Home card (top right, under the top-bar icons) ---------- */
.hub-pass{position:absolute;right:clamp(20px,2.4vw,46px);top:clamp(140px,19vh,200px);z-index:4;display:flex;align-items:center;gap:14px;width:min(360px,calc(100% - 48px));
  padding:12px 18px 12px 12px;cursor:pointer;text-align:left;color:inherit;border:3px solid transparent;border-radius:6px;
  background:linear-gradient(180deg,rgba(18,20,22,.9),rgba(6,7,8,.92)) padding-box,var(--frame) border-box;box-shadow:0 0 0 2px rgba(0,0,0,.7),0 12px 30px rgba(0,0,0,.6);transition:transform .15s,filter .15s}
.hub-pass::before{content:"";position:absolute;inset:5px;border:1px solid rgba(215,166,83,.45);border-radius:1px;pointer-events:none}
.hub-pass:hover{transform:translateY(-2px);filter:brightness(1.12)}
.hub-pass.is-ready{box-shadow:0 0 0 2px rgba(0,0,0,.7),0 0 30px rgba(255,200,110,.45),0 12px 30px rgba(0,0,0,.6)}
.hub-pass .badge{right:-12px;top:-14px}
.hub-pass-crest{flex:none;width:60px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.7))}
.hub-pass-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.hub-pass-text small{font:700 11px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--gold1)}
.hub-pass-text b{font:700 clamp(20px,1.6vw,26px)/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 4px #000}
.hub-pass-bar{display:flex;align-items:center;gap:10px}
.hub-pass-bar .bp-meter{flex:1;height:8px}
.hub-pass-bar em{flex:none;font:700 12px/1 var(--cond);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#f3e3b8;font-variant-numeric:tabular-nums}
.hub-pass-next{font:600 12px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-pass.is-ready .hub-pass-next{color:#9fd0ff}

@media (max-width:1100px){.hub-pass{width:min(300px,calc(100% - 48px))}}
@media (max-width:700px){
  .hub-pass{display:none} /* the rail's Pass button stays */
  .bp{height:auto;min-height:100vh;padding:130px 16px 96px}
  .bp-level{flex-basis:100%}
  .bp-scroll{--tw:150px;min-height:320px}
  .play-foot .bp-sel p{display:none}
}
@media (prefers-reduced-motion:reduce){.bp-tile.is-ready .bp-frame,.bp-tile.is-next .bp-num,.bp-stop,.bp-got{animation:none}}
.no-motion .bp-tile.is-ready .bp-frame,.no-motion .bp-tile.is-next .bp-num,.no-motion .bp-stop,.no-motion .bp-got{animation:none}