/* Pocket Lab shelf, reward, binders and Pokédex — the workout → pack → binder flow. Loads last so it can refine the base styles. */
:root{--paper:#f9fbf9;--leaf:#8daa78;--ember:#ef7a3a;--ember-ink:#a3552f;--ember-soft:#fff4e6;--ember-line:#f1dfc4;--gold:#a7863d;--teal:#63b7ac}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Top bar: streak pill beside the hourglass balance; the brand appears on small screens where the sidebar becomes a bottom bar. */
.topbar-title{display:flex;align-items:center;min-width:0}.topbar-brand{display:none;font-family:Manrope,sans-serif;font-size:17px;font-weight:800;letter-spacing:-.6px;color:var(--ink)}
.streak-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:7px 9px;background:var(--ember-soft);border:1px solid var(--ember-line);border-radius:6px;color:var(--ember-ink);line-height:1;white-space:nowrap}
.streak-pill svg{color:var(--ember)}
.flame{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 3px #f8dcc5;flex:none}

/* Pack shelf */
.shelf-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:18px;align-items:start}
.pack-shelf{position:relative;overflow:hidden;border:1px solid #dde7df;border-radius:17px;background:radial-gradient(ellipse at 50% 36%,#f7faf2 0%,#eef5eb 35%,#eaf2eb 70%,#e8f1ec 100%);padding:16px 16px 18px;display:flex;flex-direction:column}
.shelf-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.shelf-set{display:flex;align-items:center;gap:9px;min-width:0}.shelf-set h2{font-family:Manrope,sans-serif;font-size:14px;font-weight:750;margin:0;letter-spacing:-.2px}.shelf-set span{font-size:10px;color:#8c998e;display:block;margin-top:2px}
.set-code{border:1px solid #b5c3b5;min-width:30px;height:30px;padding:0 5px;border-radius:7px;display:grid;place-items:center;color:#748671;font-family:Manrope,sans-serif;font-size:12px;font-weight:800;flex:none;margin-top:0!important}
.ready-badge{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--green);background:#dfeee0;border-radius:20px;padding:5px 10px;white-space:nowrap;flex:none}.ready-badge.short{color:var(--ember-ink);background:var(--ember-soft)}
.shelf-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:260px;padding-top:18px}
.shelf-glow{position:absolute;left:50%;top:52%;width:230px;height:230px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(#f5f3bc99,transparent 70%);filter:blur(16px);pointer-events:none}
.shelf-fan{display:flex;justify-content:center;align-items:flex-end;position:relative;width:100%}
.shelf-pack{position:relative;padding:0;margin:0 -8px;background:none;border:0;border-radius:8px;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s,filter .3s;transform:translateY(12px) rotate(calc(var(--d)*9deg)) scale(.78);opacity:.85;z-index:1;-webkit-tap-highlight-color:transparent}
.shelf-pack.selected{transform:translateY(-6px) scale(1.08);opacity:1;z-index:2}
.shelf-pack .pack-product{display:block;width:132px;aspect-ratio:1/var(--pack-ratio,1.65);filter:drop-shadow(0 22px 13px #21453640);position:relative}
.shelf-pack img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.shelf-pack:focus-visible{outline:3px solid #47a99e;outline-offset:6px}
.shelf-dots{display:flex;justify-content:center;gap:6px;margin:10px 0 14px}.shelf-dots span{height:5px;width:5px;border-radius:5px;background:#c9d6c8;transition:width .3s,background .3s}.shelf-dots .current{width:14px;background:var(--green)}
.pack-shelf .open-btn{width:100%;min-height:50px;border-radius:12px;font-size:14px}
.shelf-lines{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px;font-size:11px;color:#5f7a5c;flex-wrap:wrap}.shelf-lines .cost-line{margin:0;font-size:11px;color:#5f7a5c;max-width:none}.shelf-lines .cost-line.short{color:var(--ember-ink)}.shelf-lines .dot,.panel-foot .dot{color:#b7c6b3}.shelf-lines .text-btn{font-size:11px;padding:6px 0;min-height:32px;color:#5f7a5c}
.shelf-short{font-size:11px;line-height:1.5;color:var(--ember-ink);text-align:center;margin:8px 0 0}
.shelf-extras{display:flex;justify-content:center;gap:6px 16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #dde7df80}.shelf-extras .text-btn{font-size:11px;min-height:32px}
.shelf-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-tile{text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;color:inherit;transition:border-color .2s}.stat-tile:where(button):hover{border-color:var(--leaf)}.stat-tile .eyebrow{font-size:9px;letter-spacing:1.4px;margin:0}
.tile-figure{display:flex;align-items:baseline;gap:4px;margin-top:8px}.tile-figure strong{font-family:Manrope,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.6px}.tile-figure span{font-size:12px;color:#95a08f}
.tile-bar{height:4px;border-radius:4px;background:#edf2eb;margin-top:10px;overflow:hidden}.tile-bar>div{height:100%;background:var(--leaf);transition:width .6s}.tile-bar>.gold{background:var(--gold)}
.tile-foot{font-size:10px;color:#91a08e;margin-top:8px;line-height:1.4}
.week-dots{display:flex;justify-content:space-between;gap:5px;margin-top:12px}.week-dots span{flex:1;height:6px;border-radius:3px;background:#e2e8e0}.week-dots .trained{background:var(--leaf)}.week-dots .today{background:var(--ember)}.week-dots .today.trained{background:var(--leaf);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ember)}

/* Binders */
.binder-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:22px}
.binder-tile{position:relative;overflow:hidden;text-align:left;border-radius:12px;padding:12px;color:#fff;min-height:96px;display:flex;flex-direction:column;justify-content:flex-end;border:0;outline-offset:2px;transition:transform .2s}.binder-tile:hover{transform:translateY(-2px)}.binder-tile.current{outline:2px solid var(--green)}
.binder-tile strong{font-size:13px;font-weight:650}.binder-tile small{font-size:11px;opacity:.9;margin-top:3px}
.binder-tile.master{background:linear-gradient(135deg,#205842,#3b7a5c)}.binder-tile.dex{background:linear-gradient(135deg,#c93b3b,#e46b4a)}.binder-tile.dex.current{outline-color:#c93b3b}.binder-tile.set{background:linear-gradient(135deg,#5a6f9a,#8aa0c8)}.binder-tile.favorites{background:linear-gradient(135deg,#ef6b3a,#f6a259)}
.tile-orb{position:absolute;right:-14px;top:-14px;width:70px;height:70px;border-radius:50%;background:#ffffff1c}
.pokeball{position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;border:3px solid #fff;background:linear-gradient(#fff 50%,#e46b4a 50%);box-sizing:border-box}
.binder-tile.favorites img{position:absolute;right:-8px;top:-6px;width:48px;height:auto;border-radius:4px;transform:rotate(10deg);opacity:.9;box-shadow:0 4px 10px #0003}

/* Pokédex */
.dex-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.dex-slot{position:relative;aspect-ratio:367/512;border-radius:6px;overflow:hidden;background:#eef3ee;border:1px dashed #cfdacf;display:grid;place-items:center;padding:0;text-align:center;color:#67716b;line-height:0}
.dex-slot.owned{border:0;background:#fff;box-shadow:0 4px 10px #20392c14;cursor:pointer;transition:transform .2s}.dex-slot.owned:hover{transform:translateY(-3px)}.dex-slot.owned img{width:100%;height:100%;object-fit:cover;display:block}
.dex-slot.missing{place-content:center;gap:4px;padding:6px}.dex-slot span{font-family:Manrope,sans-serif;font-size:11px;font-weight:700;line-height:1.2}.dex-slot small{font-size:9px;line-height:1.2;color:#a9b5ad}
.dex-num{position:absolute;left:5px;bottom:5px;background:#fffefaef;padding:4px 5px;border-radius:4px;font-size:9px!important;line-height:1!important;color:#4c6750;box-shadow:0 1px 4px #0002}

/* Reward screen (Pocket Link) */
dialog.reward-modal{width:min(480px,100vw);max-width:100vw;max-height:100dvh;padding:0;border:0;border-radius:24px;background:var(--paper);overflow:auto;box-shadow:0 32px 120px #102e4e50}
dialog.reward-modal .modal-close{top:14px;right:14px}
.reward-screen{min-height:min(760px,100dvh);display:flex;flex-direction:column;padding:16px 22px 28px;background:radial-gradient(ellipse at 50% 22%,#f6faee 0%,#eaf3e8 45%,var(--paper) 100%);animation:reward-pop .4s ease-out both}
.reward-top{display:flex;justify-content:space-between;align-items:center;padding-right:40px}.reward-top .eyebrow{margin:0;font-size:11px;letter-spacing:1.4px}.reward-brand{font-family:Manrope,sans-serif;letter-spacing:-.5px;font-size:14px;color:var(--ink);font-weight:800}
.reward-title{text-align:center;margin-top:36px}.reward-title .eyebrow{font-size:12px;letter-spacing:1.9px;margin:0}.reward-title h1{font-family:Manrope,sans-serif;font-size:34px;letter-spacing:-1.4px;line-height:1.15;font-weight:800;margin:12px 0 0}
.reward-orb{position:relative;margin:32px auto 0;width:220px;height:220px;display:grid;place-items:center}.orb-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(#f5f3bc99,transparent 70%);filter:blur(18px)}.orb-ring{position:absolute;inset:14px;border-radius:50%;border:1px solid #cddccb}
.orb-count{position:relative;text-align:center;animation:reward-countup .7s .15s cubic-bezier(.2,.8,.2,1) both}.orb-count>svg{display:block;margin:0 auto 6px;color:#76966c;stroke-width:1.5}.orb-number{font-family:Manrope,sans-serif;font-size:62px;font-weight:800;letter-spacing:-3px;line-height:1;color:var(--green)}.orb-count .eyebrow{margin:8px 0 0;font-size:12px;letter-spacing:1.6px}
.reward-rows{display:flex;flex-direction:column;gap:8px;margin-top:30px}
.reward-row{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:13px}.reward-row>span{display:flex;align-items:center;gap:10px;color:#4c6750}.reward-row svg{color:#7c9472}.reward-row strong{color:var(--green);font-weight:600}
.reward-row.streak{background:linear-gradient(120deg,var(--ember-soft),#fffaf2);border-color:var(--ember-line)}.reward-row.streak>span{color:#8a5a2b}.reward-row.streak strong{color:var(--ember-ink)}
.reward-rows .week-dots{padding:12px 4px 0;margin:0}.week-caption{display:flex;justify-content:space-between;font-size:11px;color:#91a08e;padding:0 4px}
.reward-actions{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:24px}.reward-balance{text-align:center;font-size:12px;color:#5f7a5c;display:flex;justify-content:center;align-items:center;gap:7px}.reward-balance svg{color:#76966c}
.reward-actions .primary{min-height:52px;border-radius:12px;font-size:15px;width:100%}.reward-actions .text-btn{min-height:44px;font-size:13px}
@keyframes reward-pop{0%{opacity:0;transform:translateY(18px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes reward-countup{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}

/* Reveal: type dot, rare tag, type-tinted aura */
.ritual-status-line{display:flex;justify-content:center;align-items:center;gap:8px;min-height:22px;margin:0}.cinematic-opening .opening-heading .ritual-status-line{font-size:12px;color:#78909c;line-height:1.5}
.rare-tag{background:var(--tier-gold);color:#fff;border-radius:4px;font-size:9px;letter-spacing:1.4px;padding:3px 8px;text-transform:uppercase;line-height:1.2}.rare-tag[hidden]{display:none}
.cinematic-opening .reveal-caption h3{display:flex;align-items:center;justify-content:center;gap:8px;font-size:20px;font-weight:600}
.type-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--type,#63b7ac);box-shadow:0 0 0 3px #ffffffaa;flex:none}
.cinematic-opening.rare-current .opening-atmosphere{background:radial-gradient(ellipse at 50% 40%,#fff 0%,#fff8 28%,transparent 63%),linear-gradient(140deg,color-mix(in srgb,var(--type,#63b7ac) 20%,transparent) 0%,#f7f3ec 40%,#e8f1ee 75%,#f5f3e9);transition:background .6s}
.ritual-stage[data-tier="1"] .rare-aura{background:conic-gradient(from 20deg,transparent,color-mix(in srgb,var(--type,#63b7ac) 65%,transparent),#ffe29e00,color-mix(in srgb,var(--type,#63b7ac) 55%,transparent),#ffe29e00,#ffe29eaa,transparent);filter:blur(14px)}
.reveal-celebration[data-tier="1"] .rare-motes i{animation:rare-mote 1.3s calc(var(--i)*15ms) ease-out both}
.cinematic-opening .reveal-dots .current{background:var(--type,#63b7ac)}

/* Results: progress and pack-point panels beneath the cards */
.ritual-summary .pull-results{align-items:end}.ritual-summary .summary-card[data-standout="true"] .summary-art{transform:scale(1.12) translateY(-4px)}.ritual-summary .summary-card[data-fresh="true"] .summary-art{outline:2px solid #f49b42;outline-offset:2px;border-radius:6px}
.summary-panels{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:720px;margin:6px 0 0}
.summary-panel{background:#fff;border:1px solid #dbe6e9;border-radius:14px;padding:16px;text-align:left;display:flex;flex-direction:column}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.panel-head strong{font-size:13px;font-weight:600;color:#426271}.panel-head>span{font-size:12px;color:#6d8592;white-space:nowrap}.panel-head em{font-style:normal;color:#a3b3bb}.panel-head b{color:var(--green);font-weight:600}
.summary-panel progress{width:100%;height:6px;margin-top:10px;accent-color:var(--teal);border:0;border-radius:3px;overflow:hidden;background:#e4ecef}.summary-panel progress::-webkit-progress-bar{background:#e4ecef;border-radius:3px}.summary-panel progress::-webkit-progress-value{background:var(--teal);border-radius:3px;transition:width .8s .3s}.summary-panel progress::-moz-progress-bar{background:var(--teal)}
.summary-panel progress.gold{accent-color:var(--gold)}.summary-panel progress.gold::-webkit-progress-value{background:var(--gold)}.summary-panel progress.gold::-moz-progress-bar{background:var(--gold)}
.panel-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:11px;color:#6d8592;flex-wrap:wrap}.trade-line{display:flex;align-items:center;gap:10px;flex:1;justify-content:space-between}.trade-btn{color:var(--green);font-weight:600;font-size:11px;padding:4px 0;min-height:28px}.trade-btn:disabled{color:#8ea6ad}
.summary-streak{display:flex;justify-content:center;align-items:center;gap:8px;font-size:12px;color:#8a5a2b;margin:14px 0 0}
dialog.trade-modal .dialog-actions{margin-top:20px}

/* Layout at smaller widths: the shelf stacks, tiles go two-up, and the brand replaces the breadcrumb. */
@media(max-width:1150px){.shelf-layout{grid-template-columns:1fr}.dex-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:800px){.binder-tiles{grid-template-columns:1fr 1fr}.dex-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.summary-panels{grid-template-columns:1fr}}
@media(max-width:550px){.topbar-brand{display:inline}.topbar .breadcrumb,.topbar .slash,.topbar-title strong{display:none}.streak-pill{font-size:10px;padding:6px 8px}.sidebar nav{gap:0}.nav-item{width:20%;padding:9px 2px}.shelf-stage{min-height:240px}.shelf-pack .pack-product{width:118px}.pack-shelf{padding:14px 14px 16px}.shelf-tiles{grid-template-columns:1fr 1fr}.dex-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.dex-slot small{display:none}.binder-tiles{gap:8px;margin-bottom:16px}.reward-screen{padding:14px 18px max(24px,env(safe-area-inset-bottom))}.reward-title{margin-top:28px}.reward-title h1{font-size:30px}.orb-number{font-size:54px}dialog.reward-modal{width:100vw;height:100dvh;border-radius:0}.summary-panels{gap:8px}.summary-panel{padding:13px}}
@media(max-width:380px){.shelf-pack .pack-product{width:104px}.dex-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.shelf-pack,.reward-screen,.orb-count{animation:none!important;transition:none!important}}
/* Results actions sit side by side like the prototype, even on phones. */
.ritual-summary .dialog-actions{flex-wrap:nowrap;justify-content:center}.ritual-summary .dialog-actions .primary,.ritual-summary .dialog-actions .secondary{flex:1 1 0;min-width:0;max-width:260px}
@media(max-width:550px){.ritual-summary .dialog-actions{gap:10px;padding-left:0;padding-right:0}.ritual-summary .dialog-actions .primary,.ritual-summary .dialog-actions .secondary{min-width:0;font-size:12px;padding:11px 10px}}