:root{color-scheme:dark;--bg:#101512;--panel:#19211c;--line:#344036;--ink:#f2f1e6;--muted:#a9b3a6;--lime:#d7f174}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--lime);outline-offset:4px}header{max-width:1320px;margin:auto;padding:28px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}.brand{font-size:28px;font-weight:900;letter-spacing:-1.7px}.brand span{display:block;font-size:8px;letter-spacing:2px;margin-top:6px}nav{display:flex;gap:24px;font-size:12px;font-weight:bold;align-items:center}nav .active{background:var(--lime);color:var(--bg);border-radius:30px;padding:13px 18px}main{max-width:1320px;margin:auto;padding:56px 40px}.intro{display:flex;justify-content:space-between;align-items:center;gap:24px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--lime);font-weight:700}h1{font-size:clamp(38px,6vw,76px);letter-spacing:-3px;line-height:1;margin:22px 0 16px}h1 span{color:var(--lime)}.lede{color:var(--muted);font-size:17px}.counter{min-width:200px;border-left:1px solid var(--line);padding-left:42px}.counter strong{display:block;font-size:64px;letter-spacing:-3px}.counter small{font-size:28px;color:var(--muted);font-weight:400}.counter>span{font-size:9px;letter-spacing:1.3px}.wallet{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:30px;font-size:12px}.wallet>div{display:flex;align-items:center;gap:12px}.dot{width:7px;height:7px;border-radius:50%;background:var(--lime)}button,.actions a{border:1px solid var(--line);border-radius:30px;padding:10px 14px;background:transparent;color:var(--ink);font-size:12px}button:disabled{opacity:.4;cursor:default}#account{overflow-wrap:anywhere}#status{font-size:12px;color:var(--muted);min-height:18px;margin:22px 0}.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.slot{position:relative;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:14px;min-width:0;overflow:hidden}.slot .number{font-size:10px;letter-spacing:1px;color:var(--muted)}.slot img{display:block;width:100%;height:180px;object-fit:contain;margin:10px 0 12px;filter:drop-shadow(0 12px 8px #0005)}.slot.missing img{filter:brightness(0);opacity:.33}.slot.missing{background:#141b16;border-color:#28332b}.slot strong{font-size:13px;letter-spacing:.5px;display:block}.slot .caption{display:block;color:var(--muted);font-size:10px;margin-top:6px}.slot .badge{position:absolute;right:12px;top:10px;background:var(--lime);color:#19211c;font-weight:bold;padding:5px 7px;border-radius:12px;font-size:11px}.slot.owned{background:radial-gradient(ellipse at 50% 45%,#3a4932,transparent 75%),var(--panel)}.slot.owned:hover{border-color:var(--lime)}.stale .grid{opacity:.5}.claims{border-top:1px solid var(--line);margin-top:48px;padding-top:26px;color:var(--muted);font-size:13px}.claims h2{font-size:23px;color:var(--ink);letter-spacing:-.5px}.claims h2 span{font-size:14px;color:var(--lime)}.claims>a{display:inline-block;color:var(--lime);padding-top:18px}#claims{display:flex;gap:10px;flex-wrap:wrap}.claim{padding:14px;border:1px solid var(--line);border-radius:10px}footer{max-width:1240px;margin:0 auto;padding:24px 0 32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:20px;width:min(480px,calc(100% - 32px));max-height:85dvh;padding:24px}dialog::backdrop{background:#000b}#close{float:right;font-size:22px}#detailBody img{width:100%;height:260px;object-fit:contain}#detailBody p{overflow-wrap:anywhere;font-size:12px;line-height:1.6}#detailBody h2{font-size:28px}#detailBody article{border-top:1px solid var(--line);padding-top:8px} @media(max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){header{padding:22px 20px;gap:12px}.brand{font-size:24px}nav{gap:10px;font-size:10px}nav .active{padding:10px}main{padding:34px 20px}.intro{align-items:flex-start;flex-direction:column;gap:4px}h1{letter-spacing:-2px;font-size:48px}.counter{border:0;padding:0;display:flex;align-items:center;gap:18px}.counter strong{font-size:42px}.counter small{font-size:23px}.counter>span{max-width:110px;line-height:1.5}.wallet{align-items:flex-start;flex-direction:column;margin-top:24px}.wallet .actions{flex-wrap:wrap}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.slot{padding:12px}.slot img{height:180px}.claims{margin-top:32px}footer{margin:0 20px;flex-direction:column;gap:10px}}

.crew-summary{display:flex;align-items:center;gap:28px}.boss-mascot{margin:0;text-align:center;flex:none}.boss-frame{position:relative;width:180px;height:205px;overflow:hidden}.boss-frame img{position:absolute;width:220px;height:auto;max-width:none;left:50%;top:-30px;transform:translateX(-50%)}.boss-mascot figcaption{font-size:8px;letter-spacing:.8px;color:var(--muted);line-height:1.6}.boss-mascot strong{color:var(--lime)}.boss-mascot figcaption span{display:block;font-size:9px;letter-spacing:0}.crew-summary .counter{min-width:170px;padding-left:28px}@media(max-width:1000px){.crew-summary{gap:10px}.crew-summary .counter{min-width:140px;padding-left:16px}.intro h1{font-size:46px}}@media(max-width:600px){.crew-summary{width:100%;justify-content:space-between;flex-direction:row-reverse;margin-top:8px;gap:12px}.boss-frame{width:115px;height:126px;margin:auto}.boss-frame img{width:136px;top:-19px}.boss-mascot figcaption{font-size:6px;letter-spacing:0}.boss-mascot figcaption span{font-size:8px}.crew-summary .counter{padding:0;min-width:0;flex:1;gap:12px}.counter>span{max-width:90px}.intro h1{font-size:48px}}

.character-story{clear:both;line-height:1.6;overflow-wrap:anywhere;font-size:15px}.character-story h3{font-size:13px;color:var(--lime);margin-bottom:4px}dialog{max-height:90dvh;overflow-y:auto}#detailBody{min-width:0}

/* Preview: calm shelf motion (transform/opacity only; no idle loops) */.slot.owned{transition:transform .14s ease-out}.slot.owned:active,.slot.owned.press{transform:scale(.97)}.slot.arrive{animation:hz-arrive .5s cubic-bezier(.2,.7,.3,1) both}@keyframes hz-arrive{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}dialog[open]{animation:hz-pop .24s ease-out}dialog[open]::backdrop{animation:hz-fade .24s ease-out}@keyframes hz-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}@keyframes hz-fade{from{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.slot.owned,.slot.arrive,dialog[open],dialog[open]::backdrop{animation:none!important;transition:none!important}.slot.owned:active,.slot.owned.press{transform:none}}

/* Preview: popup pose clip with real alpha (owned figures only); canvas takes the approved image's box, so no layout jump */#detailBody .pose-clip{width:100%;height:260px;object-fit:contain;background:transparent;vertical-align:baseline}#detailBody .pose-clip.pending{opacity:0;pointer-events:none}#detailBody .pose-src{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}@media (prefers-reduced-motion:reduce){#detailBody .pose-clip,#detailBody .pose-src{display:none}}
/* Preview: enlarged popup media. Common display crop for all 18 (union over approved PNGs + every clip frame, +3% margin): x 0-480, y 70-637 of 480x720. Image and canvas share identical placement, so the swap does not jump. */#detailBody .pose-stage{position:relative;clear:both;overflow:hidden;width:min(100%,calc(64dvh * 0.84656));aspect-ratio:480/567;margin:6px auto 0}#detailBody .pose-stage>img,#detailBody .pose-stage>.pose-clip{position:absolute;left:-0.0000%;top:-12.3457%;width:100.0000%;height:126.9841%;max-width:none;margin:0;object-fit:fill}#close{min-width:44px;min-height:44px;position:relative;z-index:1}@media(max-width:600px){dialog{width:calc(100% - 16px);max-width:calc(100% - 16px);padding:14px}}
/* v2 (Playwright WebKit WebGL defect, see tests/webkit_repro_v2/README.md): while the MY HOMEEZ pop-up is open the shelf behind its #000b backdrop drops its CSS filters, so no filtered large <img> is rendered while the pose WebGL context lives. Owned thumbnails lose only the drop-shadow; missing (silhouette) thumbnails are hidden instead of shown unfiltered. */
html.hz-popfx .slot img,body:has(#detail[open]) .slot img{filter:none}html.hz-popfx .slot.missing img,body:has(#detail[open]) .slot.missing img{opacity:0}