/* v3: wardrobe, fortune, raid, zen. Same tokens as styles.css */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zen{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);transition:background .3s;flex:none}
.zen:hover{background:var(--paper2)}
.zen .bars{display:flex;gap:3px;align-items:flex-end;height:16px}
.zen .bars i{width:3px;height:4px;background:var(--text2);border-radius:2px;transition:height .3s}
.zen[aria-pressed="true"]{background:var(--ink)}
.zen[aria-pressed="true"] .bars i{background:var(--straw);animation:eq 1s ease-in-out infinite}
.zen[aria-pressed="true"] .bars i:nth-child(2){animation-delay:-.3s}.zen[aria-pressed="true"] .bars i:nth-child(3){animation-delay:-.6s}.zen[aria-pressed="true"] .bars i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;width:40px;height:40px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;border:1px solid var(--line-strong)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{width:16px;height:2px;background:var(--ink);border-radius:2px;transition:transform .5s var(--ease-fluid)}
.mnav[open] summary span:first-child{transform:translateY(3.5px) rotate(45deg)}.mnav[open] summary span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mnav-panel{position:fixed;left:16px;right:16px;top:80px;background:color-mix(in oklab,var(--paper) 96%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:24px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:4px;box-shadow:0 30px 60px -20px rgba(60,30,10,.4)}
.mnav-panel a{padding:12px 16px;border-radius:12px;font-weight:600;color:var(--text2)}
.mnav-panel a:hover{background:var(--paper2);color:var(--accent)}
@media (max-width:760px){.mnav{display:block}.nav{padding:6px 6px 6px 12px;gap:8px}.nav .btn-sm{padding:8px 12px}}
@media (max-width:1060px) and (min-width:761px){.nav ul a{padding:8px}}

.hero-skins{margin-top:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hs-label{font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hs-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hs-row button,.hs-more{width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line-strong);transition:transform .4s var(--ease-fluid),box-shadow .3s;flex:none}
.hs-row button img{width:100%;height:100%;object-fit:cover}
.hs-row button:hover{transform:translateY(-3px) scale(1.06)}
.hs-row button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--accent);transform:scale(1.08)}
.hs-more{display:grid;place-items:center;background:var(--ink);color:var(--paper);font:600 13px/1 var(--font-mono)}
.hs-more:hover{background:var(--accent)}
.cat img{transition:opacity .25s,transform .4s var(--ease-fluid),filter .25s}
.cat.swap img{opacity:0;transform:scale(1.12) rotate(-3deg);filter:blur(6px)}
.pet-pill{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:13px;padding:6px 14px;border-radius:999px;white-space:nowrap;z-index:2;box-shadow:0 10px 20px -8px rgba(40,15,5,.5)}
.pet-pill span{color:var(--straw-soft)}
.pet-pill b{color:var(--straw)}

.lore-grid.six{grid-template-columns:repeat(3,1fr);list-style:none}
.lore-grid.six .pin{font-family:var(--font-brush);font-size:28px}
@media (max-width:900px){.lore-grid.six{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lore-grid.six{grid-template-columns:1fr}}

.skins{background:var(--ink);color:var(--paper)}
.skins .sec-head p{color:rgba(244,234,215,.7)}
.skins .sec-head h2 em{color:#f05a4b}
.skin-filter{display:flex;gap:8px;flex-wrap:wrap;margin:-16px 0 32px}
.skin-filter button{padding:8px 16px;border-radius:999px;border:1px solid rgba(244,234,215,.2);color:rgba(244,234,215,.75);font-size:14px;font-weight:600;transition:all .35s var(--ease-fluid)}
.skin-filter button:hover{border-color:var(--straw);color:var(--paper)}
.skin-filter button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.skin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.skin-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.skin-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.skin-card{background:#241710;border:1px solid rgba(244,234,215,.1);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-fluid),transform .8s var(--ease-fluid),border-color .3s;transition-delay:calc(var(--i)*70ms)}
.skin-card.in{opacity:1;transform:none}
.skin-card:hover{border-color:color-mix(in oklab,var(--straw) 60%,transparent)}
.skin-card.worn{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sc-img{position:relative;aspect-ratio:1;overflow:hidden;display:block;width:100%}
.sc-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-fluid)}
.skin-card:hover .sc-img img{transform:scale(1.07)}
.sc-han{position:absolute;top:12px;right:12px;font-family:var(--font-brush);font-size:22px;color:var(--paper);background:rgba(198,47,34,.9);padding:4px 8px;border-radius:8px;line-height:1}
.sc-worn{position:absolute;left:12px;top:12px;font:600 11px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.12em;background:var(--paper);color:var(--accent);padding:6px 8px;border-radius:999px;opacity:0;transition:opacity .3s}
.skin-card.worn .sc-worn{opacity:1}
.sc-body{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1;justify-content:space-between}
.sc-body b{font-family:var(--font-display);font-size:20px;line-height:28px}
.sc-body p{font-size:13px;line-height:20px;color:rgba(244,234,215,.6)}
.sc-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.sc-actions button{padding:8px 4px;border-radius:10px;font-size:12px;font-weight:700;background:rgba(244,234,215,.07);color:var(--paper);transition:background .3s}
.sc-actions button:hover{background:var(--accent)}
.skin-card[hidden]{display:none}
.credit{margin-top:32px;color:rgba(244,234,215,.6);font-size:14px}
.credit a{color:var(--straw);border-bottom:1px solid currentColor}
@media (max-width:420px){.sc-body p{display:none}.sc-body{padding:12px}}

.skin-pick{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.skin-pick button{flex:none;width:56px;height:56px;border-radius:14px;overflow:hidden;border:2px solid transparent;box-shadow:0 0 0 1px var(--line);transition:transform .3s var(--ease-fluid)}
.skin-pick button:hover{transform:translateY(-2px)}
.skin-pick button.on{border-color:var(--accent)}
.skin-pick img{width:100%;height:100%;object-fit:cover}

/* fortune */
.fortune{overflow:hidden}
.fortune .han-bg{position:absolute;left:-4%;top:50%;transform:translateY(-50%);font-family:var(--font-brush);font-size:clamp(240px,40vw,560px);line-height:1;color:var(--accent);opacity:.06;pointer-events:none}
.fortune-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;position:relative}
.h-fortune{font-size:clamp(40px,5vw,72px);margin:16px 0}
.h-fortune em{font-style:normal;color:var(--accent)}
.fortune-lede{color:var(--text2);font-size:18px;line-height:28px;max-width:480px}
.fortune-meta{margin-top:16px;font:500 12px/16px var(--font-mono);color:var(--muted)}
.fortune-stage{position:relative;min-height:460px;display:grid;place-items:center}
.cup{position:relative;width:180px;height:260px;cursor:pointer;transform-origin:50% 90%}
.cup-body{position:absolute;bottom:0;left:0;right:0;height:190px;border-radius:16px 16px 40px 40px;background:linear-gradient(90deg,#8f1c13,#c62f22 40%,#d9473a 55%,#9c1f16);box-shadow:inset 0 -12px 0 rgba(0,0,0,.15),0 30px 40px -20px rgba(60,10,5,.6);display:grid;place-items:center;border-top:8px solid #d9a441}
.cup-body span{font-family:var(--font-brush);font-size:72px;color:var(--straw-soft)}
.sticks{position:absolute;left:24px;right:24px;bottom:150px;height:110px;display:flex;justify-content:center;gap:6px}
.sticks i{width:12px;height:100%;background:linear-gradient(#f0d79a,#d9a441);border-radius:6px 6px 2px 2px;transform-origin:50% 100%;box-shadow:inset -2px 0 rgba(0,0,0,.12)}
.sticks i::before{content:"";display:block;height:14px;background:var(--accent);border-radius:6px 6px 0 0}
.sticks i:nth-child(1){transform:rotate(-14deg) translateY(8px)}.sticks i:nth-child(2){transform:rotate(-8deg)}.sticks i:nth-child(3){transform:rotate(-3deg) translateY(-6px)}.sticks i:nth-child(4){transform:translateY(-12px)}.sticks i:nth-child(5){transform:rotate(4deg) translateY(-4px)}.sticks i:nth-child(6){transform:rotate(9deg)}.sticks i:nth-child(7){transform:rotate(15deg) translateY(10px)}
.cup:hover{transform:rotate(-3deg)}
.cup.shake{animation:cupshake .18s ease-in-out 7}
.cup.shake .sticks i:nth-child(4){animation:stickup 1.3s var(--ease-out) forwards}
@keyframes cupshake{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg) translateY(-6px)}}
@keyframes stickup{70%{transform:translateY(-12px)}100%{transform:translateY(-90px) rotate(20deg);opacity:0}}
.slip{position:absolute;width:min(340px,100%);background:var(--paper);border:2px solid var(--accent);border-radius:20px;padding:24px;text-align:center;box-shadow:0 40px 80px -30px rgba(60,20,5,.55);transform:translateY(30px) scale(.9) rotate(-4deg);opacity:0;transition:all .8s var(--ease-fluid);z-index:3}
.slip.in{transform:none;opacity:1}
.slip::before{content:"";position:absolute;inset:8px;border:1px solid color-mix(in oklab,var(--accent) 40%,transparent);border-radius:14px;pointer-events:none}
.slip-no{font:500 12px/16px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.slip-rank{font-family:var(--font-brush);font-size:64px;line-height:1.1;color:var(--accent);margin-top:8px}
.slip-rank small{display:block;font:600 13px/16px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text2)}
.slip-han{position:absolute;right:16px;bottom:8px;font-family:var(--font-brush);font-size:96px;color:var(--accent);opacity:.08;pointer-events:none}
.slip-en{font-family:var(--font-display);font-size:22px;line-height:28px;color:var(--ink2);margin:16px 0 24px;text-wrap:balance}
.slip-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;position:relative}
@media (max-width:900px){.fortune-grid{grid-template-columns:minmax(0,1fr)}.fortune-stage{min-height:420px}}

/* raid */
.raid{background:var(--paper2);border-block:1px solid var(--line)}
.raid-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px;align-items:start}
.raid-card{background:var(--ink);color:var(--paper);border-radius:24px;padding:24px;box-shadow:0 40px 80px -40px rgba(30,10,5,.6)}
.raid-top{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.raid-top img{width:40px;height:40px;border-radius:50%;border:2px solid var(--accent)}
.raid-top b{display:block;font-size:15px;line-height:20px}.raid-top span{font-size:13px;color:rgba(244,234,215,.55)}
.raid-card textarea{width:100%;resize:vertical;background:transparent;border:1px solid rgba(244,234,215,.14);border-radius:16px;color:var(--paper);font:500 17px/26px var(--font-body);padding:16px;min-height:180px;transition:border-color .3s}
.raid-card textarea:focus{outline:none;border-color:var(--straw)}
.raid-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.raid-foot .num{color:rgba(244,234,215,.55);font-size:13px}
.raid-card .btn-ghost{color:var(--paper);border-color:rgba(244,234,215,.25)}
.raid-card .btn-ghost:hover{background:rgba(244,234,215,.08)}
.raid-side{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:24px}
.raid-side h3{font-size:24px;line-height:32px;margin-bottom:16px}
.raid-side ol{list-style:none;display:flex;flex-direction:column;gap:16px}
.raid-side li{display:flex;gap:12px;color:var(--text2);font-size:15px}
.raid-side li b{font-family:var(--font-brush);color:var(--accent);font-size:24px;line-height:24px;font-weight:400;flex:none;width:28px}
@media (max-width:900px){.raid-grid{grid-template-columns:minmax(0,1fr)}}

/* info */
.info{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:-16px 0 32px}
.info div{background:var(--paper);padding:16px 20px}
.info dt{font:500 12px/16px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.info dd{font-family:var(--font-display);font-size:22px;line-height:32px;font-weight:600;margin-top:4px}
.info dd.num{font-family:var(--font-mono);font-size:18px}
@media (max-width:700px){.info{grid-template-columns:1fr 1fr}}

/* lightbox */
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;color:var(--paper)}
.lightbox::backdrop{background:rgba(20,12,8,.9);backdrop-filter:blur(10px)}
.lightbox[open]{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;grid-template-rows:1fr auto;align-items:center;justify-items:center;gap:16px;padding:24px 16px;animation:lbin .5s var(--ease-fluid)}
@keyframes lbin{from{opacity:0;transform:scale(.97)}}
.lightbox figure{grid-column:2;grid-row:1;max-width:min(640px,100%);display:flex;flex-direction:column;gap:12px;align-items:center}
.lightbox figure img{max-height:68dvh;width:auto;max-width:100%;border-radius:20px;box-shadow:0 40px 80px -30px #000}
.lightbox figcaption{display:flex;gap:16px;align-items:baseline}
.lightbox figcaption b{font-family:var(--font-display);font-size:24px}
.lightbox figcaption span{font-size:13px;color:rgba(244,234,215,.6)}
.lb-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(244,234,215,.1);color:var(--paper);font-size:18px}
.lb-nav{width:52px;height:52px;border-radius:50%;background:rgba(244,234,215,.1);color:var(--paper);font-size:32px;line-height:1}
.lb-nav:hover,.lb-close:hover{background:var(--accent)}
.lb-nav.prev{grid-column:1;grid-row:1}.lb-nav.next{grid-column:3;grid-row:1}
.lb-actions{grid-column:1/-1;grid-row:2;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lightbox .btn-ghost{color:var(--paper);border-color:rgba(244,234,215,.3)}
html.lb-open{overflow:hidden}
@media (max-width:600px){.lightbox[open]{grid-template-columns:40px minmax(0,1fr) 40px;padding:64px 8px 24px}.lb-nav{width:40px;height:40px;font-size:24px}}

@media (prefers-reduced-motion:reduce){.skin-card{opacity:1;transform:none}}
.mnav{position:static}
.mnav-panel{position:absolute;left:50%;right:auto;top:calc(100% + 8px);transform:translateX(-50%);width:calc(100vw - 32px);max-width:420px;background:var(--paper)}
.zen .bars i:nth-child(1){height:6px}.zen .bars i:nth-child(2){height:11px}.zen .bars i:nth-child(3){height:8px}.zen .bars i:nth-child(4){height:4px}