@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#092c30;--deep:#062125;--paper:#f4f2eb;--gold:#ddbc7c;--muted:#758582;--line:#d9dfd8;--serif:Georgia,'Times New Roman',serif;font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:wait}button,a,input,select{ -webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b28c41;outline-offset:3px}a{color:inherit}button{border:0;background:none;color:inherit;min-height:44px}h1,h2,h3,p{margin:0}h1{font:400 clamp(2rem,4vw,3.1rem)/1.12 var(--serif);letter-spacing:-.04em}h2{font:400 1.7rem/1.2 var(--serif);letter-spacing:-.025em}h3{font-weight:600;font-size:1.05rem}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.muted{color:var(--muted)}.small{font-size:.875rem;line-height:1.5}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.grow{flex:1}.gold{color:var(--gold)}.icon{width:22px;height:22px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.logo{display:flex;align-items:center;gap:10px;font:800 1.15rem 'Manrope',sans-serif;letter-spacing:-.04em}.logo-mark{display:grid;place-items:center;width:36px;height:36px;background:var(--ink);color:var(--gold);border-radius:10px}.header{height:88px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}.header-note{font-size:.75rem;letter-spacing:.13em;color:var(--muted)}.icon-btn{width:44px;border-radius:50%;display:grid;place-items:center}.icon-btn:hover{background:#092c300b}.layout{max-width:1320px;margin:auto;padding:44px 5vw 110px}.home-intro{margin-bottom:30px}.home-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(290px,.75fr);gap:28px}.hero{position:relative;overflow:hidden;background:var(--ink);color:#f9f5e9;min-height:540px;border-radius:20px;padding:30px;display:flex;flex-direction:column}.hero:before,.open-stage:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,#97b59d33,transparent 65%),repeating-radial-gradient(ellipse at 50% 53%,transparent 0 49px,#ffffff05 50px 51px);opacity:.8}.hero-top{position:relative;z-index:2}.pill{padding:7px 11px;border:1px solid #ffffff30;border-radius:99px;font-size:.75rem;letter-spacing:.05em}.showcase{flex:1;min-height:290px;display:grid;place-items:center;position:relative;margin:15px 0}.fan{position:relative;width:195px;height:275px;z-index:1}.fan .image-wrap{position:absolute;inset:0;box-shadow:0 22px 45px #0006;transform:rotate(-14deg) translateX(-67px) scale(.89)}.fan .image-wrap:nth-child(2){transform:rotate(14deg) translateX(67px) scale(.89)}.fan .image-wrap:nth-child(3){transform:rotate(-3deg)}.fan:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#fff4 48%,transparent 60%);pointer-events:none;border-radius:10px;transform:rotate(-3deg)}.hero-bottom{position:relative;text-align:center;z-index:2}.hero-bottom h2{font-size:1.8rem;margin:8px 0}.hero-bottom .small{color:#b8cac3}.side-stack{display:flex;flex-direction:column;gap:20px}.panel{background:#fff9;border:1px solid var(--line);border-radius:16px;padding:24px}.action-panel h2{font-size:2rem;margin:14px 0 12px}.action-panel p{color:#687874;margin-bottom:24px}.btn{display:flex;justify-content:center;align-items:center;gap:10px;min-height:50px;border-radius:9px;font-weight:600;font-size:.9375rem;padding:12px 18px;width:100%;background:var(--ink);color:white;transition:transform .15s,background .15s}.btn:hover{background:#16464a}.btn:active{transform:scale(.98)}.btn.secondary{border:1px solid var(--line);color:var(--ink);background:transparent}.btn.gold-btn{background:var(--gold);color:var(--ink)}.btn + .btn{margin-top:10px}.text-btn{display:inline-flex;gap:8px;align-items:center;font-size:.875rem;text-decoration:underline;text-underline-offset:4px;min-height:44px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.stat strong{font:400 1.9rem var(--serif);display:block;margin-bottom:5px}.stat span{font-size:.75rem;color:var(--muted)}.divider{height:1px;background:var(--line);margin:20px 0}.quick-link{display:flex;align-items:center;gap:13px;padding:12px 0;width:100%;text-align:left}.quick-link + .quick-link{border-top:1px solid var(--line)}.quick-link>span:nth-child(2){flex:1}.quick-icon{width:42px;height:42px;border-radius:10px;background:#e8ece4;display:grid;place-items:center}.section-head{display:flex;align-items:center;justify-content:space-between;margin:36px 0 18px;gap:15px}.recent-sets{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.mini-product{background:#ebeae2;border-radius:12px;min-height:118px;padding:18px;text-align:left;width:100%;display:flex;align-items:center;gap:15px}.mini-product img{width:49px;height:70px;object-fit:contain;border-radius:4px;transform:rotate(-7deg)}.mini-product strong{display:block;font-size:.9375rem;margin-bottom:6px}.mini-product small{display:block;font-size:.75rem;color:#62756d}.nav{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;display:flex;background:#fcfbf7f2;border:1px solid #d9ded4;box-shadow:0 8px 35px #0621251a;backdrop-filter:blur(16px);border-radius:15px;padding:5px;gap:4px}.nav button{display:flex;gap:9px;align-items:center;padding:10px 18px;border-radius:10px;font-size:.875rem;white-space:nowrap}.nav .active{background:var(--ink);color:white}.filterbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:25px 0}.tabs{display:flex;border-radius:10px;background:#e6e9e1;padding:4px;gap:3px}.tabs button{min-width:54px;border-radius:7px;font-size:.875rem;font-weight:600}.tabs .active{background:white;box-shadow:0 1px 4px #0001}.input,select{min-height:45px;border:1px solid #d4dcd3;border-radius:8px;padding:10px 12px;color:var(--ink);background:#fff9;max-width:100%}.input{flex:1;min-width:130px}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.product{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff8}.product-art{height:215px;display:grid;place-items:center;background:radial-gradient(ellipse,#c7d4c1,#e7e9df);position:relative}.product-art .image-wrap{width:114px;height:160px;transform:rotate(-7deg);box-shadow:5px 10px 20px #092c3030}.product-code{position:absolute;top:15px;left:15px;font-size:.75rem;font-weight:700}.product-info{padding:19px}.product-info h3{margin:6px 0 14px;min-height:40px}.progress{height:4px;background:#dce1d8;border-radius:4px;overflow:hidden;margin:10px 0 16px}.progress>span{display:block;height:100%;background:#618974}.product-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.product-actions .btn{margin:0;min-height:44px;padding:10px;font-size:.875rem}.image-wrap{position:relative;background:#d8ded5;aspect-ratio:5/7;border-radius:8px;overflow:hidden;display:grid;place-items:center}.image-wrap img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1;user-select:none;-webkit-user-drag:none}.image-wrap .fallback{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;padding:15px;color:var(--ink);background:linear-gradient(145deg,#eeeede,#ced9d0);font-size:.8rem}.image-wrap .fallback strong{font-family:var(--serif);font-size:1.2rem}.image-wrap img.failed{display:none}.card-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 14px}.card-tile{padding:0;text-align:left;position:relative;min-width:0}.card-tile .image-wrap{width:100%;transition:transform .2s}.card-tile:hover .image-wrap{transform:translateY(-4px)}.card-tile .card-label{margin-top:8px;display:block;font-size:.75rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-tile .card-meta{font-size:.75rem;color:var(--muted);display:block;margin-top:4px}.qty{position:absolute;right:6px;top:6px;z-index:2;background:var(--ink);color:white;padding:3px 7px;border-radius:5px;font-size:.75rem}.new-badge{position:absolute;left:5px;top:6px;background:var(--gold);color:var(--ink);z-index:2;font-size:.65rem;letter-spacing:.06em;font-weight:800;padding:5px 7px;border-radius:4px}.unowned .image-wrap{opacity:.35;filter:saturate(.25)}.empty{padding:55px 20px;text-align:center;max-width:480px;margin:auto}.empty .icon{width:40px;height:40px;color:#6d8e7f;margin-bottom:15px}.empty h2{margin-bottom:12px}.empty p{color:var(--muted);line-height:1.6;margin-bottom:22px}.open-layout{position:fixed;inset:0;background:var(--deep);color:#f8f3e5;z-index:40;display:flex;flex-direction:column;overflow:hidden;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.opening-top{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:4}.opening-top .icon-btn:hover{background:#ffffff12}.opening-title{text-align:center}.opening-title .small{font-size:.8rem;color:#adbbb5;margin-top:5px}.open-stage{flex:1;position:relative;display:grid;place-items:center;min-height:0;perspective:1000px;overflow:hidden}.open-stage.hit-4{background:radial-gradient(ellipse,#79744644,transparent 70%)}.open-stage.hit-5,.open-stage.hit-6{background:radial-gradient(ellipse,#88724455,#223c3840 45%,transparent 75%)}.open-stage.hit-7,.open-stage.hit-8{background:radial-gradient(ellipse,#84958677,#84673422 45%,transparent 75%)}.open-stage.hit-8:after{content:'';position:absolute;width:120%;height:150%;background:repeating-conic-gradient(from 10deg,transparent 0deg 12deg,#e7cb8520 13deg 15deg);animation:spin 30s linear infinite;pointer-events:none;z-index:-0}.open-card{position:relative;width:min(66vw,300px,calc((100dvh - 265px)*.714));aspect-ratio:5/7;z-index:3;touch-action:none;user-select:none;cursor:grab;will-change:transform;animation:rise .5s both;filter:drop-shadow(0 22px 30px #0006)}.open-card .image-wrap{width:100%;height:100%;border-radius:11px}.open-card:before,.open-card:after{content:'';position:absolute;inset:0;border:1px solid #62786a;background:#173c3a;border-radius:11px;transform:translate(7px,-7px);z-index:-1}.open-card:after{transform:translate(14px,-14px);z-index:-2}.open-card.shine .image-wrap:after{content:'';position:absolute;inset:-30%;pointer-events:none;z-index:2;background:linear-gradient(115deg,transparent 36%,#ffffcf55 48%,transparent 57%);animation:sweep 2.5s ease-out 1}.opening-info{min-height:140px;position:relative;z-index:4;text-align:center;padding:15px 20px 25px}.opening-info h2{font:400 1.45rem var(--serif);margin:7px 0}.opening-info .meta{color:#b9c9be;font-size:.8rem}.gesture-hint{font-size:.875rem;color:#b4c4ba;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px}.rarity-tag{font-size:.75rem;letter-spacing:.08em;color:var(--gold);font-weight:700}.pack{width:min(62vw,270px,calc((100dvh - 275px)*.64));aspect-ratio:.64;position:relative;z-index:3;filter:drop-shadow(0 30px 25px #0008);transform:rotate(-3deg);touch-action:none;user-select:none}.foil-body,.foil-strip{position:absolute;inset:0;background:linear-gradient(105deg,#0a4c50,#377470 20%,#0e3b3e 41%,#2a615d 74%,#0e3c3e);border:1px solid #77a297;overflow:hidden;clip-path:polygon(0 0,100% 0,98% 100%,2% 100%)}.foil-body:after,.foil-strip:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent,#ffffff18 20%,transparent 28%,#0002 46%,transparent 63%,#ffffff26 80%,transparent 95%);pointer-events:none}.foil-body{top:19%;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}.foil-body:before{content:'';position:absolute;bottom:0;left:0;right:0;height:16px;background:repeating-linear-gradient(90deg,#afc2a744 0 2px,transparent 2px 4px)}.foil-strip{height:20%;bottom:auto;z-index:6;transform:translateX(var(--drag,0px)) rotate(var(--tilt,0deg));transform-origin:80% 100%;display:flex;align-items:center;justify-content:center;border-bottom:1px dashed #d2d4b9}.foil-strip strong{font-size:.8rem;letter-spacing:.25em;color:#ebdfb4}.foil-body .pack-num{font:400 clamp(2.4rem,8vw,4.4rem) var(--serif);color:#f2dfac;letter-spacing:-.05em}.foil-body .pack-title{font-size:.875rem;line-height:1.4;max-width:180px;color:#efead5}.foil-body .pack-compass{width:65px;height:65px;display:grid;place-items:center;border:1px solid #bfc99b66;border-radius:50%;color:#dcca91}.pack .tear-zone{position:absolute;top:0;height:28%;width:100%;z-index:8;cursor:ew-resize;touch-action:none}.tear-line{position:absolute;top:19%;left:0;height:3px;width:var(--tear,0%);background:#ffffda;box-shadow:0 0 16px 5px #fff59b66;z-index:7}.pack.torn .foil-strip{animation:detach .55s forwards}.pack.torn .foil-body{animation:drop .85s .15s forwards}.pack.torn .tear-line{width:100%;box-shadow:0 0 50px 22px #fff5b5}.pack.torn .rising-card{animation:out-of-pack .8s forwards}.rising-card{position:absolute;inset:23% 10% 5%;z-index:4;opacity:0}.pack-caption{text-align:center;position:absolute;bottom:-40px;left:-30px;right:-30px;font-size:.75rem;color:#b4c4b1}.history-list{display:flex;flex-direction:column;gap:12px}.history-item{background:#fff9;border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;gap:18px;text-align:left;align-items:center;width:100%}.history-item .image-wrap{width:55px;flex-shrink:0}.history-item strong{display:block;margin-bottom:5px}.history-item .count{text-align:right}.display-packs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:25px 0}.display-pack{aspect-ratio:.65;border-radius:4px;background:linear-gradient(110deg,#1d605f,#103c3d);color:var(--gold);border:1px solid #5a8980;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.display-pack.opened{background:transparent;color:#9ca99c;border:1px dashed #b3c0b1}.display-pack .icon{width:27px;height:27px}.summary-feature{display:grid;grid-template-columns:100px 1fr;gap:22px;align-items:center;margin:22px 0;padding:20px;background:#e5e9df;border-radius:12px}.summary-actions{display:flex;gap:10px;max-width:700px;margin:30px auto}.summary-actions .btn{margin:0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;gap:20px;border-bottom:1px solid var(--line)}.setting-row input[type=checkbox]{width:42px;height:24px;accent-color:var(--ink)}.settings{max-width:680px}.settings h2{margin:25px 0 5px}.settings .btn{margin-top:12px}.notice{padding:15px 18px;border:1px solid #d8c9a8;background:#efe8d6;border-radius:10px;line-height:1.5;margin:18px 0;font-size:.875rem}.note{font-size:.75rem;color:#6f8176;line-height:1.55;margin-top:14px}.badge{font-size:.75rem;background:#e4e9dc;padding:5px 9px;border-radius:6px}dialog{width:min(92vw,480px);max-height:90dvh;border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:24px;color:var(--ink);box-shadow:0 30px 100px #0004}dialog::backdrop{background:#052c30aa;backdrop-filter:blur(5px)}dialog .detail-img{width:min(64vw,235px);margin:10px auto 20px}dialog h2{margin:12px 0}dialog .detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}dialog .detail-meta span{font-size:.75rem;color:var(--muted);display:block}dialog .detail-meta strong{font-size:.875rem;display:block;margin-top:5px}.boot{min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;letter-spacing:.2em;font-size:1.8rem;background:var(--ink);color:var(--gold)}.boot span{font-size:.8rem;letter-spacing:0;color:#aec0b4}#toast{position:fixed;bottom:105px;left:50%;transform:translateX(-50%);background:#1d3d38;color:white;padding:14px 20px;border-radius:10px;z-index:100;max-width:90vw;font-size:.875rem;box-shadow:0 5px 25px #0002;display:none}#toast.visible{display:block}.loading-ring{width:38px;height:38px;border:2px solid #ffffff25;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}.pager{display:flex;justify-content:center;margin:25px}.footer-note{text-align:center;font-size:.75rem;line-height:1.6;color:#7c8a7f;margin-top:32px}.reduced *, .reduced *:before,.reduced *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes rise{from{opacity:.3;transform:translateY(70px) rotate(-4deg) scale(.93)}to{opacity:1;transform:translateY(0)}}@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes detach{to{transform:translate(80px,-280px) rotate(40deg);opacity:0}}@keyframes drop{to{transform:translateY(80vh) rotate(15deg);opacity:0}}@keyframes out-of-pack{0%{opacity:0;transform:translateY(30px) scale(.85)}30%{opacity:1}100%{opacity:1;transform:translateY(-80px) scale(1.12)}}
@media(min-width:1000px){.nav{bottom:22px}.collection .card-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:760px){.header{height:70px;padding-left:20px;padding-right:16px}.header-note{display:none}.layout{padding:28px 20px 105px}.home-intro{margin-bottom:22px}.home-intro h1{font-size:2rem}.home-grid{grid-template-columns:1fr;gap:20px}.hero{min-height:400px;padding:22px;border-radius:16px}.showcase{min-height:235px;margin:10px 0}.fan{width:154px;height:216px}.fan .image-wrap{transform:rotate(-13deg) translateX(-56px) scale(.88)}.fan .image-wrap:nth-child(2){transform:rotate(13deg) translateX(56px) scale(.88)}.hero-bottom h2{font-size:1.5rem}.side-stack{gap:16px}.action-panel{padding:0;background:none;border:0}.action-panel .eyebrow,.action-panel h2,.action-panel>p{display:none}.action-panel>.btn{min-height:54px}.action-panel>.note{text-align:center}.side-stack .panel:not(.action-panel){padding:20px}.stats{margin:20px 0}.recent-sets{grid-template-columns:1fr 1fr;gap:10px}.mini-product{padding:14px;gap:12px;min-height:110px}.mini-product img{width:40px;height:56px}.mini-product small{font-size:.7rem}.nav{bottom:0;left:0;right:0;transform:none;border-radius:18px 18px 0 0;border-bottom:0;padding:7px 8px calc(7px + env(safe-area-inset-bottom));justify-content:space-around;gap:0}.nav button{flex:1;display:flex;flex-direction:column;gap:4px;font-size:.7rem;min-height:51px;padding:6px 4px;border-radius:10px}.nav button .icon{width:22px;height:22px}.section-head{margin-top:26px}.section-head h2{font-size:1.55rem}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.product-art{height:170px}.product-art .image-wrap{width:85px;height:120px}.product-info{padding:13px}.product-info h3{font-size:.875rem;min-height:38px}.product-actions{grid-template-columns:1fr}.product-actions .btn.secondary{font-size:.8125rem}.product-code{top:12px;left:12px}.filterbar{gap:8px}.filterbar .input{width:100%}.filterbar select{flex:1;min-width:100px;font-size:.875rem}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}.card-tile .card-label{font-size:.7rem}.card-tile .card-meta{font-size:.65rem}.opening-top{padding:10px 13px}.opening-info{min-height:137px;padding:10px 15px 20px}.open-card{width:min(69vw,300px,calc((100dvh - 250px)*.714))}.opening-info h2{font-size:1.3rem}.gesture-hint{font-size:.8rem;margin-top:15px}.display-packs{grid-template-columns:repeat(4,1fr);gap:10px}.summary-actions{flex-direction:column}.stats-grid{grid-template-columns:1fr 1fr}.summary-feature{grid-template-columns:80px 1fr;padding:16px;gap:16px}.history-item{gap:12px;padding:13px}.history-item .small{font-size:.75rem}.history-item .count{font-size:.75rem}.panel{padding:20px}.qty{font-size:.65rem}.new-badge{font-size:.55rem;padding:4px}.home-intro .eyebrow{font-size:.65rem}.footer-note{margin-top:25px}}
@media(max-width:360px){.layout{padding-left:14px;padding-right:14px}.hero{min-height:350px}.showcase{min-height:210px}.fan{width:136px;height:192px}.hero-top .pill{font-size:.65rem}.open-card{width:min(70vw,calc((100dvh - 250px)*.714))}.product-info h3{min-height:50px}.pack{width:min(61vw,calc((100dvh - 265px)*.64))}}
/* Preserve the complete header and card on standalone iPhones with safe-area insets. */
.header{height:calc(88px + env(safe-area-inset-top))}
.open-card{width:min(66vw,300px,calc((100dvh - 265px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .714))}
.pack{width:min(62vw,270px,calc((100dvh - 285px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .64))}
@media(max-width:760px){.header{height:calc(70px + env(safe-area-inset-top))}.open-card{width:min(69vw,300px,calc((100dvh - 250px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .714))}}
/* One Piece atlas: parchment, ocean-blue ink, gold bindings. */
:root{--ink:#193d54;--deep:#132c43;--paper:#eee4cb;--gold:#d9af55;--muted:#776c55;--line:#cdbd98}
body{background-color:#eee4cb;background-image:linear-gradient(#f4ebd9eb,#ede0c4ed),url('/assets/one-piece-reference.webp');background-size:cover;background-attachment:fixed;color:var(--ink)}
.header{background:#f5eddadb;border-bottom:1px solid #bda77c;box-shadow:0 3px 15px #5944250a}.header-note{color:#786a4d}.logo-mark{background:linear-gradient(145deg,#399eb0,#263b78);color:#f3d27b;border:1px solid #baa06a}.hero{background:#203e56;border:1px solid #a08448;box-shadow:0 8px 30px #4d3c271a;padding:22px;min-height:490px}.hero:before{background:linear-gradient(#183d5999,#192b4de0),url('/assets/one-piece-reference.webp') center/cover;opacity:1}.reference-banner{position:relative;z-index:1;display:grid;place-items:center;flex:1;min-height:260px;margin:22px -22px 15px;overflow:hidden}.reference-banner img{display:block;width:100%;height:auto;min-height:210px;object-fit:cover;border-top:2px solid #ba9a60;border-bottom:2px solid #ba9a60}.hero-top .gold,.hero-bottom .gold{color:#e7c272}.panel{background:#faf4e6bd;border-color:#c8b68d;box-shadow:0 4px 14px #7765400a}.btn{background:linear-gradient(120deg,#286784,#243b6a);border:1px solid #173b54;box-shadow:0 3px 0 #15304333;color:#fffaf0}.btn:hover{background:#254e79}.btn.secondary{background:#fff8e966;color:#3d503d;border-color:#bdab86;box-shadow:none}.nav{background:#f7eddbf5;border-color:#bdaa81;box-shadow:0 4px 20px #5c47292b}.nav .active{background:linear-gradient(140deg,#32849d,#283c73);color:#fff8e1}.quick-icon{background:#e2d8bf;color:#466871}.mini-product{background:#e7d8b9;border:1px solid #c8b38c}.tabs{background:#dacbad}.tabs .active{background:#fff3d9}.product-art{background:linear-gradient(#e2d7bdbb,#cbb790aa),url('/assets/one-piece-reference.webp') center/cover}.product{background:#f9f1e0b8;border-color:#bea781}.input,select{background:#fff9ec;border-color:#beae8c}.progress{background:#d5c6a6}.progress>span{background:#35849a}.product-info .small,.product-info .eyebrow{color:#70654e}.boot{background:#193d54}.open-layout{background:#182f44}.open-stage:before{background:linear-gradient(#152e46dd,#18354ef0),url('/assets/one-piece-reference.webp') center/cover;opacity:.9}.open-stage.hit-5:before,.open-stage.hit-6:before,.open-stage.hit-7:before,.open-stage.hit-8:before{opacity:.5}.foil-body,.foil-strip{background:linear-gradient(105deg,#263d67,#358aa0 20%,#223d68 45%,#38899d 75%,#223554);border-color:#c4ae7a}.foil-strip{border-bottom-color:#e2ca8e}.summary-feature{background:#e0d4b7}.history-item{background:#faf1dfcf;border-color:#c3b08a}.badge{background:#e2d6b9}.footer-note{color:#75694e}.update-banner{position:fixed;top:calc(8px + env(safe-area-inset-top));left:5%;width:90%;z-index:120;background:#214767;color:white;border:1px solid #e2bf6e;border-radius:10px;padding:14px;box-shadow:0 4px 20px #0005}
.binder-heading{text-align:center;position:relative;padding:12px 0 24px}.binder-heading .eyebrow{color:#8a7040;font-size:.75rem;letter-spacing:.18em;margin-bottom:12px}.binder-heading h1{font-size:3.3rem;color:#234665}.binder-heading>p:not(.eyebrow){margin:12px 0 17px;font-family:var(--serif);font-size:1.1rem;color:#7b6644;font-style:italic}.binder-total{display:inline-block;border-top:1px solid #b59b6a;border-bottom:1px solid #b59b6a;padding:8px 20px;font-size:.8rem;color:#796238}.binder-filters{justify-content:center;margin:16px 0}.binder-filters .input{flex:0 1 250px}.binder-instruction{text-align:center;color:#7c6a4a;font-size:.875rem;margin:24px 0 30px}.binder-shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 30px;perspective:1200px;padding:10px 10px 30px}.binder-cover{position:relative;padding:0 9px 5px 17px;min-width:0;aspect-ratio:.69;transform:rotateY(-8deg) rotate(-1deg);transform-style:preserve-3d;text-align:center;transition:transform .25s,filter .25s;filter:drop-shadow(8px 12px 9px #57482c3d);border-radius:4px 11px 11px 4px;isolation:isolate}.binder-cover:hover,.binder-cover:focus-visible{transform:rotateY(0) rotate(0) translateY(-8px);filter:drop-shadow(8px 18px 10px #57482c48)}.binder-face{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:space-between;height:100%;padding:18px 13px 13px;color:#eee0b8;border-radius:3px 10px 10px 3px;background:linear-gradient(105deg,#0004,transparent 10%,#fff1 46%,#0002),linear-gradient(hsl(var(--cover-hue) 40% 26% / .92),hsl(var(--cover-hue) 46% 18% / .96)),url('/assets/one-piece-reference.webp') center/cover;border:1px solid #b0965c;box-shadow:inset 0 0 0 5px #0b15282a,inset 0 0 0 6px #cdb37a66,inset 4px 0 5px #0004;overflow:hidden}.binder-face:before{content:'';position:absolute;inset:11px;border:1px solid #dfc28d55;border-radius:3px 5px 5px 3px;pointer-events:none}.binder-spine{position:absolute;top:1px;bottom:5px;left:0;width:20px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.65rem;letter-spacing:.2em;font-weight:700;padding:18px 4px;background:linear-gradient(90deg,hsl(var(--cover-hue) 40% 15%),hsl(var(--cover-hue) 35% 28%),hsl(var(--cover-hue) 40% 17%));color:#d5bf8e;border:1px solid #9f8658;border-radius:3px;z-index:2}.binder-paper-edge{position:absolute;top:9px;bottom:0;right:1px;width:16px;z-index:-1;background:repeating-linear-gradient(0deg,#e8d8b9 0 2px,#9c927f 2px 3px);border:1px solid #8e7b55;border-radius:0 9px 8px 0;box-shadow:4px 1px 0 #304154}.cover-edition{font-size:.56rem;letter-spacing:.12em;z-index:1;white-space:nowrap;color:#d7c69f}.cover-code{font:400 clamp(2rem,3vw,3.5rem)/1.1 var(--serif);letter-spacing:.015em;text-shadow:1px 2px 2px #0006;margin-top:8px;color:#f4d58b}.cover-card{display:block;width:47%;margin:10px auto 8px;transform:rotate(-4deg);border:1px solid #d8c393;box-shadow:0 4px 12px #0005;border-radius:5px;overflow:hidden}.cover-card .image-wrap{border-radius:4px}.cover-title{font:400 .95rem/1.15 var(--serif);max-width:90%;min-height:33px;display:flex;align-items:center;justify-content:center;color:#f4e3bd}.cover-rule{width:35%;height:1px;background:#cbb47c99;margin:8px auto}.cover-count{font:400 1.25rem var(--serif);color:#f2db9b}.cover-count>span{font-size:.8rem;color:#bbaf95}.cover-bottom{display:flex;align-items:center;gap:5px;justify-content:center;font-size:.52rem;letter-spacing:.065em;color:#ddc694;margin-top:10px}.cover-bottom .icon{width:15px;height:15px}.album-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.album-title{text-align:center;margin:15px auto;max-width:720px}.album-title .eyebrow{color:#8c6f3e;margin-bottom:10px;font-size:.75rem}.album-title h1{font-size:2rem}.album-title .progress{max-width:280px;margin:15px auto}.album-toolbar{display:flex;align-items:center;justify-content:center;gap:30px;margin:14px 0}.album-toolbar .icon-btn{background:#e6d8b9;border:1px solid #bda77c;box-shadow:0 2px 2px #67503022}.album-toolbar select{min-height:42px;width:65px;background:#f8efd8;color:#604c2a}.album-toolbar button:disabled{cursor:default;opacity:.3}.album-book{position:relative;max-width:920px;margin:0 auto;padding:18px 18px 18px 32px;background:linear-gradient(95deg,#163249,#294658 4%,#173548 7%,#294252 50%,#163247);border:1px solid #8d794d;border-radius:7px 16px 16px 7px;box-shadow:0 15px 28px #52432a36,3px 5px 0 #a19372,4px 7px 0 #d5c7a7;touch-action:pan-y;perspective:1800px;overflow:hidden}.album-spread{display:grid;grid-template-columns:1fr 1fr;gap:18px;transform-style:preserve-3d;transform-origin:0% 50%;will-change:transform,opacity}.album-sheet{padding:13px 12px 10px;background:linear-gradient(90deg,#c2bfb055,#f6f1dd22 7%,#b0bdc022),#d1d2c2;border:1px solid #e9e5d0;border-radius:3px 8px 8px 3px;box-shadow:0 2px 3px #0003,inset 5px 0 10px #0001;min-width:0}.sheet-heading{display:flex;justify-content:space-between;color:#445354;font-size:.6rem;font-weight:700;letter-spacing:.12em;margin:0 3px 10px}.pocket-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pocket{aspect-ratio:5/7;position:relative;border:1px solid #ffffff80;border-bottom:2px solid #e6e7d4;box-shadow:inset 0 0 0 1px #67757422,0 1px 3px #0002;border-radius:3px;padding:5px;background:linear-gradient(120deg,#fff3,#a3b0b11a 40%,#fff4 42%,#fff1 45%,#95a4a522);display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;min-width:0}.pocket:after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,transparent 30%,#fff2 45%,transparent 47%,#fff1 80%,transparent 82%);border-top:3px double #ffffff8c;pointer-events:none;z-index:3}.pocket .image-wrap{width:100%;height:100%;border-radius:3px;background:#a9b8b5;box-shadow:0 1px 3px #0003}.pocket .image-wrap img{object-fit:contain}.pocket.filled:hover .image-wrap{transform:scale(1.025)}.missing-emblem{color:#7c8d8799;display:grid;place-items:center;border:1px solid #929d8e66;border-radius:50%;width:34px;height:34px;margin-bottom:12px}.missing-emblem .icon{width:23px;height:23px}.missing-number{font-size:.65rem;color:#606f6a;font-weight:600}.missing-variant{font-size:.52rem;color:#78827a;margin-top:5px}.pocket-index{position:absolute;bottom:4px;left:5px;font-size:.5rem;color:#7b8a82;z-index:4}.filled .pocket-index{background:#f3ecd9dd;padding:1px 3px;border-radius:2px;bottom:5px;color:#375254}.pocket-quantity{position:absolute;top:6px;right:6px;font-size:.6rem;background:#143747eb;color:#f3dbab;border-radius:3px;padding:3px 5px;z-index:4}.pocket.unused{opacity:.4}.sheet-footer{display:flex;justify-content:space-between;font-size:.55rem;color:#62746c;margin:9px 3px 0;letter-spacing:.07em}.album-rings{position:absolute;top:0;bottom:0;left:12px;width:23px;display:flex;flex-direction:column;justify-content:space-around;z-index:4;pointer-events:none}.album-rings i{height:12px;display:block;border-radius:7px;background:linear-gradient(#4e554e,#e2e4d3 25%,#929b91 50%,#f3eddb 60%,#414d47);box-shadow:0 2px 4px #0008;border:1px solid #666d62}.album-hint{display:flex;justify-content:center;align-items:center;gap:8px;font-size:.75rem;color:#7e6b48;text-align:center;margin:22px 0}.album-hint .icon{width:20px;height:20px}.album-footer{display:flex;max-width:500px;margin:0 auto;gap:10px}.album-footer .btn{margin:0}.turn-forward{animation:page-out-forward .23s ease-in forwards}.turn-back{animation:page-out-back .23s ease-in forwards}.page-arriving{animation:page-in .3s ease-out}.book-opening{animation:book-open .55s ease-out}@keyframes page-out-forward{to{transform:rotateY(-16deg) translateX(-20px);opacity:.25}}@keyframes page-out-back{to{transform:rotateY(16deg) translateX(20px);opacity:.25}}@keyframes page-in{from{transform:rotateY(calc(var(--turn-direction)*12deg));opacity:.45}to{transform:rotateY(0);opacity:1}}@keyframes book-open{from{transform:rotateY(-12deg) scale(.94);opacity:.3}to{transform:rotateY(0) scale(1);opacity:1}}
@media(max-width:1100px){.binder-shelf{grid-template-columns:repeat(3,1fr);gap:32px}.cover-card{width:42%}}
@media(max-width:899px){.album-spread{grid-template-columns:1fr}.album-book{max-width:450px}.binder-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}.cover-title{font-size:.85rem}.cover-code{font-size:2.3rem}}
@media(max-width:760px){.hero{min-height:340px;padding:18px}.reference-banner{min-height:190px;margin:18px -18px 12px}.reference-banner img{min-height:0}.action-panel{background:none;box-shadow:none}.binder-heading{padding:8px 0 15px}.binder-heading h1{font-size:2.4rem}.binder-heading .eyebrow{font-size:.65rem}.binder-heading>p:not(.eyebrow){font-size:1rem;margin:10px 0 15px}.binder-filters{gap:8px}.binder-filters .tabs{width:100%;justify-content:space-between}.binder-filters .tabs button{min-width:44px;flex:1;font-size:.8rem}.binder-filters .input{flex:1;min-width:140px}.binder-filters select{flex:0 0 65px;min-width:65px}.binder-filters .text-btn{width:100%;justify-content:center;font-size:.8rem}.binder-instruction{font-size:.8rem;margin:12px 0 22px}.binder-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 15px;padding:4px 4px 24px}.binder-cover{padding-left:14px;padding-right:7px;aspect-ratio:.65}.binder-spine{width:16px;font-size:.55rem;padding:12px 2px}.binder-face{padding:14px 10px 12px}.binder-face:before{inset:8px}.cover-edition{font-size:.44rem;letter-spacing:.07em}.cover-code{font-size:2.1rem;margin-top:6px}.cover-card{width:49%;margin:6px auto}.cover-title{font-size:.72rem;min-height:27px}.cover-rule{margin:6px}.cover-count{font-size:1.15rem}.cover-count>span{font-size:.7rem}.cover-bottom{font-size:.43rem;margin-top:7px;gap:3px}.cover-bottom .icon{width:12px;height:12px}.album.layout{padding:16px 12px 100px}.album-top{margin:0 6px}.album-title{margin:10px 8px}.album-title h1{font-size:1.4rem}.album-title .eyebrow{font-size:.65rem;margin-bottom:7px}.album-title .progress{margin:10px auto}.album-toolbar{margin:12px 0;gap:28px}.album-book{padding:12px 10px 12px 25px;border-radius:5px 12px 12px 5px}.album-rings{left:7px;width:21px}.album-rings i{height:10px}.album-sheet{padding:10px 8px 8px}.pocket-grid{gap:6px}.pocket{padding:4px}.sheet-heading{margin-bottom:7px;font-size:.55rem}.missing-number{font-size:.56rem}.missing-variant{font-size:.45rem}.missing-emblem{width:27px;height:27px;margin-bottom:9px}.missing-emblem .icon{width:19px;height:19px}.pocket-quantity{font-size:.5rem;right:4px;top:4px;padding:2px 4px}.pocket-index{font-size:.43rem}.sheet-footer{font-size:.5rem}.album-hint{font-size:.67rem;gap:5px;margin:18px 0}.album-footer{padding:0 5px;gap:8px}.album-footer .btn{font-size:.8rem;padding:10px;min-height:46px}.album-footer .icon{width:18px}.binder-total{font-size:.75rem}}
@media(max-width:360px){.binder-shelf{gap:22px 10px}.cover-code{font-size:1.8rem}.cover-title{font-size:.65rem}.cover-edition{font-size:.4rem}.cover-bottom{font-size:.38rem}.binder-face{padding:12px 8px 10px}.album-book{padding-left:23px}.pocket-grid{gap:4px}.pocket{padding:3px}.missing-emblem{width:24px;height:24px;margin-bottom:5px}}
@media(prefers-reduced-motion:reduce){.binder-cover{transition:none}.turn-forward,.turn-back,.page-arriving,.book-opening{animation:none}}
.cover-edition{font-size:.75rem;letter-spacing:.08em}.cover-title{font-size:1rem}.cover-bottom{font-size:.75rem;letter-spacing:.02em}.missing-number{font-size:.75rem}.missing-variant{font-size:.75rem}.pocket-index{font-size:.65rem}.sheet-heading,.sheet-footer{font-size:.75rem}.pocket-quantity{font-size:.75rem}
@media(max-width:760px){.binder-cover{aspect-ratio:.55}.cover-edition{font-size:.75rem;letter-spacing:.02em}.cover-code{font-size:2.1rem}.cover-title{font-size:.875rem;min-height:35px}.cover-card{width:43%;margin:5px auto}.cover-bottom{font-size:.75rem}.cover-count>span{font-size:.75rem}.missing-number{font-size:.7rem}.missing-variant{font-size:.65rem}.sheet-heading,.sheet-footer{font-size:.65rem}.pocket-quantity{font-size:.65rem}.pocket-index{font-size:.6rem}}