/* Home / pack stage. Laptop = pinned rail + stage + progress rail (1c).
   Phone = carousel over a floating open button (1d). Light centred variant (1e),
   and the user-selectable "Shelf list" layout mode (1f). */
@keyframes foil{0%{background-position:120% 0}100%{background-position:-20% 0}}
@keyframes aura{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}

.home{display:grid;grid-template-columns:248px minmax(0,1fr) 300px;flex:1;min-height:0}
.rail{padding:22px 16px 22px 24px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--edge);min-width:0}
.rail-right{padding:22px 24px 22px 16px;gap:12px;border-right:0;border-left:1px solid var(--edge)}
.rail-label{font-size:calc(11px*var(--scale));letter-spacing:1.6px;font-weight:700;color:var(--dim);margin:0 10px 8px}

.pin{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-md);width:100%;text-align:left;color:var(--fg-2);font-size:calc(13px*var(--scale))}
.pin.active{background:var(--surface-3);border:1px solid var(--edge-2)}
.pin img{width:26px;height:44px;object-fit:cover;border-radius:4px;flex:none}
.pin b{display:block;font-weight:600;font-size:calc(13px*var(--scale));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin.active b{font-weight:700;color:var(--fg)}
.pin span{flex:1;min-width:0}
.pin em{font-style:normal;font-size:calc(11px*var(--scale));color:var(--fg-muted);flex:none}
.bar{height:3px;border-radius:3px;background:var(--edge-2);margin-top:6px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:3px}
.rail .ghost-btn{margin-top:8px;padding:12px 10px;border-radius:var(--r-md);border:1px dashed var(--edge-3);font-size:calc(13px*var(--scale));color:var(--fg-muted);display:flex;justify-content:space-between;align-items:center;width:100%}

.side-card{padding:16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--edge);box-shadow:var(--raise)}
.side-card h3{font-size:calc(11px*var(--scale));letter-spacing:1.4px;font-weight:700;color:var(--dim);font-family:var(--font-body)}
.side-head{display:flex;justify-content:space-between;align-items:baseline}
.side-head small{font-size:calc(12px*var(--scale));color:var(--fg-muted)}
.tally{display:flex;align-items:baseline;gap:6px;margin-top:8px}
.tally strong{font-family:var(--font-display);font-weight:800;font-size:calc(32px*var(--scale));letter-spacing:-1px;color:var(--fg)}
.tally span{color:var(--fg-muted)}
.segments{display:flex;gap:3px;margin-top:12px}
.segments i{flex:1;height:6px;border-radius:3px;background:var(--edge-2)}
.segments i.on{background:var(--accent)}
.rarity-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;font-size:calc(12px*var(--scale));color:var(--fg-muted)}
.rarity-split .gold{color:var(--gold-text)}
.chase{display:flex;gap:8px;margin-top:12px}
.chase>div{flex:1;position:relative}
.chase img{width:100%;border-radius:6px;display:block}
.chase .locked img{filter:var(--grey-out)}
.chase .locked span{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(11px*var(--scale));font-weight:700;color:var(--fg);text-align:center}
.last-pack{margin-top:auto}
.last-pack .strip{display:flex;gap:4px;margin-top:10px;overflow:hidden}
.last-pack .strip img{width:36px;border-radius:3px}
.last-pack .strip img.star{box-shadow:0 0 0 1.5px var(--gold)}
.note{font-size:calc(12px*var(--scale));color:var(--fg-muted);margin-top:10px}

.stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 40px 30px;min-width:0}
.stage-title{display:flex;align-items:center;gap:10px;font-size:calc(13px*var(--scale));color:var(--fg-muted);text-align:center;flex-wrap:wrap;justify-content:center}
.stage-title b{font-family:var(--font-display);font-weight:800;color:var(--fg);font-size:calc(22px*var(--scale));letter-spacing:-.6px}
.carousel{container-type:inline-size;--spread:clamp(92px,36cqw,235px);position:relative;width:100%;height:420px;display:flex;justify-content:center;align-items:center;perspective:1200px;margin-top:6px}
.carousel .floor{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);width:min(420px,80%);height:40px;border-radius:50%;background:radial-gradient(ellipse,var(--floor),transparent 70%);pointer-events:none}
.pack-slot{position:absolute;width:150px;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s,filter .45s}
.pack-slot img{width:100%;display:block}
.pack-slot.prev{transform:translateX(calc(-1*var(--spread))) rotateY(38deg) scale(.86);opacity:.7;filter:drop-shadow(0 30px 30px #0009) brightness(.7)}
.pack-slot.next{transform:translateX(var(--spread)) rotateY(-38deg) scale(.86);opacity:.7;filter:drop-shadow(0 30px 30px #0009) brightness(.7)}
.pack-slot.hero{position:relative;width:196px;filter:drop-shadow(0 40px 34px #000c);z-index:2}
.pack-slot.hero .sheen{position:absolute;inset:0;border-radius:6px;background:linear-gradient(115deg,transparent 25%,#fff5 45%,transparent 60%);background-size:220% 100%;mix-blend-mode:screen;animation:foil 4.5s ease-in-out infinite;pointer-events:none}
.carousel .arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--fg-2);z-index:3}
.carousel .arrow.left{left:18px}
.carousel .arrow.right{right:18px}
.dots{display:flex;gap:6px;align-items:center;justify-content:center}
.dots button{position:relative;width:6px;height:6px;border-radius:3px;background:var(--edge-3);transition:width .3s;padding:0}
.dots button::after{content:"";position:absolute;inset:-14px -7px}
.dots button.on{width:20px;background:var(--accent)}
.stage h1{font-family:var(--font-display);font-weight:800;font-size:calc(28px*var(--scale));letter-spacing:-.8px;margin-top:14px;color:var(--fg);text-align:center}
.stage .sub{font-size:calc(13px*var(--scale));color:var(--fg-muted);margin-top:4px;text-align:center}
.open-actions{display:flex;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap;justify-content:center}
.btn-open{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 36px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);font-weight:800;font-size:calc(16px*var(--scale));box-shadow:0 10px 30px #5fd3c955}
.btn-open small{font-weight:600;font-size:calc(12px*var(--scale));opacity:.75}
.btn-open:disabled{box-shadow:none}
.btn-ghost{height:56px;padding:0 22px;border-radius:var(--r-pill);border:1px solid var(--edge-3);font-weight:600;font-size:calc(14px*var(--scale));color:var(--fg)}
.footnote{font-size:calc(12px*var(--scale));color:var(--dim);margin-top:14px;text-align:center}
.footnote button{color:var(--fg-muted);text-decoration:underline;text-underline-offset:2px}

/* Centred stage (1e): laptop that keeps the single-column phone focus. */
.home[data-layout="centred"]{grid-template-columns:minmax(0,1fr)}
.home[data-layout="centred"] .rail{display:none}
.home[data-layout="centred"] .stage{max-width:520px;margin:0 auto}

.set-bar{display:none}

/* Shelf list (1f): a scannable list instead of the carousel. */
.shelf-list{display:flex;flex-direction:column;gap:10px;width:100%;max-width:560px;margin:0 auto;padding:4px 0 8px}
.shelf-row{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--edge);width:100%;text-align:left}
.shelf-row.active{border-color:var(--accent);background:var(--accent-soft)}
.shelf-row img{width:44px;height:74px;object-fit:cover;border-radius:5px;flex:none}
.shelf-row b{display:block;font-family:var(--font-display);font-weight:750;font-size:calc(15px*var(--scale));color:var(--fg)}
.shelf-row small{display:block;font-size:calc(12px*var(--scale));color:var(--fg-muted);margin-top:3px}
.shelf-row .go{margin-left:auto;color:var(--fg-muted);flex:none}

@media(max-width:1150px){
 .home{grid-template-columns:210px minmax(0,1fr)}
 .rail-right{display:none}
 .stage{padding:16px 20px 24px}
 .carousel{height:360px}
 .pack-slot{width:124px}
 .pack-slot.hero{width:164px}
}
@media(max-width:960px){.home{grid-template-columns:minmax(0,1fr)}.rail{display:none}}
@media(max-width:860px){
 .home{grid-template-columns:minmax(0,1fr)}
 .home .rail{display:none}
 .stage{flex:1;padding:8px 20px 14px;justify-content:flex-start}
 .stage .open-actions{margin-top:auto}
 .stage-title{display:none}
 .carousel{height:min(380px,44vh)}
 .pack-slot{width:118px}
 .pack-slot.hero{width:176px}
 .pack-slot.prev{transform:translateX(calc(-1*var(--spread))) rotateY(40deg) scale(.85);opacity:.65}
 .pack-slot.next{transform:translateX(var(--spread)) rotateY(-40deg) scale(.85);opacity:.65}
 .carousel .arrow{display:none}
 .stage h1{font-size:calc(26px*var(--scale));margin-top:12px}
 .open-actions{flex-direction:column;width:100%;margin-top:16px}
 .btn-open{width:100%;height:58px;font-size:calc(17px*var(--scale));box-shadow:0 12px 34px #5fd3c955}
 .btn-ghost{display:none}
 .carousel{--spread:clamp(92px,42cqw,150px)}
 .set-bar{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:10px 12px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--edge);text-align:left}
 .set-bar img{width:26px;height:44px;object-fit:cover;border-radius:4px;flex:none}
 .set-bar>span{flex:1;min-width:0}
 .set-bar b{display:block;font-family:var(--font-display);font-weight:750;font-size:calc(15px*var(--scale));color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .set-bar small{display:block;font-size:calc(12px*var(--scale));color:var(--fg-muted);margin-top:2px}
 .set-bar em{font-style:normal;font-size:calc(12px*var(--scale));font-weight:700;color:var(--accent-text);flex:none;white-space:nowrap}
}
:root[data-motion="reduced"] .pack-slot,:root[data-motion="reduced"] .dots i{transition:none}
:root[data-motion="reduced"] .pack-slot.hero .sheen{animation:none}
@media(prefers-reduced-motion:reduce){.pack-slot{transition:none}.pack-slot.hero .sheen{animation:none}}

.bar{display:block}
.carousel .arrow.left svg{transform:rotate(180deg)}
.side-card.row{display:flex;align-items:center;gap:12px}
.side-icon{width:38px;height:38px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent-text);flex:none}
.row-title{font-weight:700;font-size:calc(13px*var(--scale));color:var(--fg)}
.side-card.row .note{margin-top:2px}

/* Me: trainer card, appearance and accessibility (artboard 1r). */
.me{max-width:560px;margin:0 auto;padding:22px 20px 40px;width:100%}
.me-card{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.avatar.big{width:56px;height:56px;font-size:calc(20px*var(--scale))}
.me h1{font-family:var(--font-display);font-weight:800;font-size:calc(24px*var(--scale));letter-spacing:-.8px;color:var(--fg)}
.me-card small{display:block;font-size:calc(12px*var(--scale));color:var(--fg-muted);margin-top:4px}
.me-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--edge);text-align:center;margin-bottom:26px}
.me-stats strong{display:block;font-family:var(--font-display);font-weight:800;font-size:calc(20px*var(--scale));color:var(--fg)}
.me-stats small{font-size:calc(11px*var(--scale));color:var(--fg-muted)}
.me-label{font-size:calc(11px*var(--scale));letter-spacing:1.6px;font-weight:700;color:var(--dim);font-family:var(--font-body);margin:0 0 10px}
.me-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px;border-bottom:1px solid var(--edge);font-size:calc(14px*var(--scale));color:var(--fg)}
.me-row+.me-label{margin-top:28px}
.seg{display:flex;gap:3px;padding:3px;border-radius:var(--r-pill);background:var(--chip)}
.seg button{padding:7px 13px;border-radius:var(--r-pill);font-size:calc(12px*var(--scale));font-weight:600;color:var(--fg-muted);white-space:nowrap}
.seg button.on{background:var(--on-nav);color:var(--on-nav-ink);font-weight:700}
.seg button:nth-child(2){font-size:calc(14px*var(--scale))}
.seg button:nth-child(3){font-size:calc(16px*var(--scale))}
.swatches{display:flex;gap:8px}
.swatch{width:26px;height:26px;border-radius:50%;background:var(--sw);border:2px solid transparent}
.swatch.on{border-color:var(--fg);box-shadow:0 0 0 2px var(--bg) inset}
.link-btn{display:inline-flex;align-items:center;gap:5px;color:var(--fg-muted);font-size:calc(13px*var(--scale));font-weight:600}
.me-foot{font-size:calc(12px*var(--scale));color:var(--dim);margin-top:26px;line-height:1.7}
.me-foot .link-btn{color:var(--fg-muted);text-decoration:underline;text-underline-offset:2px}
/* Four-option rows (card style, binder view) overflow a phone, so the row stacks. */
@media(max-width:520px){
 .me-row{flex-wrap:wrap}
 .me-row .seg{width:100%;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
 .me-row .seg::-webkit-scrollbar{display:none}
 .me-row>span:first-child{flex:1 1 100%}
}