:root{
  --gold:#2fd6b4; --gold-2:#9ff7e2; --brass:#14937c; --ivory:#e4fbf5; --paper:#eefcf7; --ink:#06201b;
  --night:#04100f; --rose:#ff4f9a; --red-ink:#c81e6b; --sadu:linear-gradient(90deg,#c81e6b 0 25%,#04100f 25% 50%,#9ff7e2 50% 75%,#c81e6b 75%);
  --wood:url(../img/wood.webp); --linen:url(../img/linen.webp);
  --ease:cubic-bezier(.7,0,.2,1); --spring:cubic-bezier(.34,1.56,.64,1); --soft:cubic-bezier(.22,1,.36,1);
  --top:calc(env(safe-area-inset-top,0px) + 8px); --safe-b:env(safe-area-inset-bottom,0px); --tabh:calc(62px + var(--safe-b));
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--night);color:var(--ivory);font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.calli{font-family:'Alexandria',sans-serif;font-weight:600;letter-spacing:0}
.kicker{font-family:'Alexandria',sans-serif;color:var(--gold);font-size:.8rem;letter-spacing:.04em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 22px;border-radius:999px;font-family:'Alexandria';font-weight:700;font-size:.95rem;transition:transform .2s var(--spring),background .2s}
.btn:active{transform:scale(.94)}
.btn svg{width:18px;height:18px}
.btn.gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--ink);box-shadow:0 8px 20px rgba(212,162,76,.35)}
.btn.line{border:1.5px solid rgba(239,226,198,.45);text-decoration:none;color:var(--ivory)}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(239,226,198,.08);border:1px solid rgba(239,226,198,.18)}
.icon-btn.off .wave{opacity:.15}

/* ============ SHELL: full screen on every device ============ */
#app{position:fixed;inset:0;overflow:hidden;container-type:size;background:var(--night);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.nav-brand{display:none}

/* ============ LOCK ============ */
.lock{position:absolute;inset:0;z-index:120;perspective:1100px;overflow:hidden;cursor:pointer}
.ldoor{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;transition:transform 1.7s var(--ease),filter 1.7s;backface-visibility:hidden}
.ldoor::before{content:"";position:absolute;top:0;bottom:0;width:200%;background:#2a180e url(../img/wardrobe-doors.webp) center/cover}
.ldoor::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 40px rgba(0,0,0,.55)}
.ldoor.l{left:0;transform-origin:0 50%}.ldoor.l::before{left:0}
.ldoor.r{right:0;transform-origin:100% 50%}.ldoor.r::before{right:0}
.lock.open .ldoor.l{transform:rotateY(-104deg);filter:brightness(.4)}
.lock.open .ldoor.r{transform:rotateY(104deg);filter:brightness(.4)}
.lock.gone{visibility:hidden;transition:visibility 0s 1.8s}
.lock-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--top) + 6cqh);background:radial-gradient(ellipse 70% 40% at 50% 46%,rgba(0,0,0,.15),rgba(0,0,0,.55));transition:opacity .5s}
.lock.open .lock-ui{opacity:0;pointer-events:none}
.lock-brand{font-size:min(19cqw,82px);color:var(--gold-2);text-shadow:0 4px 0 #000,0 0 30px rgba(240,200,121,.45);line-height:1}
.lock-sub{font-family:'Alexandria';opacity:.85;margin-top:4px;text-shadow:0 2px 6px #000}
.keyhole{position:absolute;top:44cqh;left:50%;width:min(34cqw,150px);translate:-50% -50%;filter:drop-shadow(0 8px 14px rgba(0,0,0,.7));transition:transform .3s var(--spring)}
.keyhole.ready{transform:scale(1.06)}
.keyhole::after{content:"";position:absolute;inset:-20%;border-radius:50%;border:2px solid rgba(240,200,121,.0);animation:ring 2s ease-out infinite}
@keyframes ring{0%{transform:scale(.6);border-color:rgba(240,200,121,.7)}100%{transform:scale(1.15);border-color:rgba(240,200,121,0)}}
.lock.inserted .keyhole::after{display:none}
.key{position:absolute;left:50%;top:70cqh;width:min(13cqw,56px);translate:-50% 0;cursor:grab;touch-action:none;filter:drop-shadow(0 10px 12px rgba(0,0,0,.7));transform-origin:50% 100%;z-index:3}
.key.idle{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.key.drag{cursor:grabbing;animation:none}
.lock-hint{position:absolute;bottom:calc(var(--safe-b) + 9cqh);padding:10px 18px;border-radius:999px;background:rgba(13,9,6,.75);backdrop-filter:blur(8px);font-family:'Alexandria';border:1px solid rgba(212,162,76,.35)}
.lock-skip{position:absolute;bottom:calc(var(--safe-b) + 3cqh);font-size:.8rem;opacity:.6;text-decoration:underline;text-underline-offset:3px}

/* ============ SCREENS + TABS ============ */
.screens{position:absolute;inset:0 0 var(--tabh) 0}
.screen{position:absolute;inset:0;padding-top:var(--top);opacity:0;visibility:hidden;transform:scale(.97);transition:opacity .35s,transform .45s var(--soft),visibility 0s .35s;overflow:hidden}
.screen.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .45s var(--soft)}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:var(--tabh);padding-bottom:var(--safe-b);display:flex;background:rgba(13,9,6,.92);backdrop-filter:blur(16px);border-top:1px solid rgba(212,162,76,.18);z-index:40}
.tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-family:'Alexandria';font-size:.72rem;opacity:.55;transition:opacity .2s,color .2s}
.tab.on{opacity:1;color:var(--gold-2)}
.tab.on::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
.tab em{position:absolute;top:7px;left:calc(50% - 22px);min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--rose);color:#fff;font-style:normal;font-size:.7rem;font-weight:700;display:grid;place-items:center}
.tab em[hidden]{display:none}
.tab.bump svg{animation:bump .5s var(--spring)}
@keyframes bump{40%{transform:scale(1.35) rotate(-12deg)}}
.top{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 8px;position:relative;z-index:3}
.top h2{font-size:2rem;line-height:1;color:var(--gold-2)}
.top-tools{display:flex;gap:8px;align-items:center}

/* ============ CLOSET ============ */
#s-closet{display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 0,#2b1d12,var(--night) 70%)}
.level{position:relative;width:76px;height:22px;border-radius:11px;background:linear-gradient(#e9f3c8,#b8cf7a);box-shadow:inset 0 2px 4px rgba(0,0,0,.35),0 0 0 3px #8c6224,0 0 0 4px #2a180e}
.level::before,.level::after{content:"";position:absolute;top:2px;bottom:2px;width:1.5px;background:rgba(42,26,16,.5)}
.level::before{left:calc(50% - 11px)}.level::after{left:calc(50% + 10px)}
.bubble{position:absolute;top:4px;left:50%;width:16px;height:14px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#f4fbe0 60%,#d9e8a8);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.cab{flex:1 1 auto;min-height:0;margin:0 12px;padding:9px;border-radius:18px 18px 6px 6px;background:var(--wood) center/240px;box-shadow:inset 0 0 0 1px rgba(255,220,160,.15),0 20px 40px rgba(0,0,0,.6)}
.cab-in{position:relative;height:100%;border-radius:10px 10px 3px 3px;overflow:hidden;background:#140b06 url(../img/wardrobe-inside.webp) center/cover;box-shadow:inset 0 0 40px rgba(0,0,0,.85)}
.cab-in::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 85% 70% at 50% 0,transparent 40%,rgba(0,0,0,.6));z-index:6}
.bulb{position:absolute;top:0;left:50%;width:44px;height:10px;translate:-50% 0;border-radius:0 0 20px 20px;background:#2a1a10;z-index:8}
.bulb::after{content:"";position:absolute;left:50%;bottom:-5px;width:16px;height:7px;translate:-50% 0;border-radius:0 0 9px 9px;background:#fff4d6;box-shadow:0 0 12px 4px rgba(255,220,150,.9),0 0 50px 20px rgba(255,190,100,.4)}
.cone{position:absolute;top:6px;left:50%;width:160%;height:100%;translate:-50% 0;pointer-events:none;background:radial-gradient(ellipse 42% 80% at 50% 0,rgba(255,214,140,.34),rgba(255,200,120,.06) 60%,transparent 75%);mix-blend-mode:screen;z-index:7;animation:hum 4s ease-in-out infinite}
@keyframes hum{50%{opacity:.85}}
.rod{position:absolute;top:7%;left:-2%;right:-2%;height:8px;border-radius:4px;background:linear-gradient(#fff0c4,#c99a45 45%,#6e4c18);box-shadow:0 4px 7px rgba(0,0,0,.6);z-index:5}
.rail{position:absolute;top:calc(7% - 2px);left:0;right:0;bottom:4%;perspective:620px;perspective-origin:50% 10%;z-index:4;touch-action:none}
.hg{position:absolute;top:0;left:0;height:100%;width:0;will-change:transform}
.hg .sw{position:absolute;top:0;left:0;height:100%;transform-origin:0 2%}
.hg .g{position:absolute;top:0;left:0;height:100%;translate:-50% 0;transform:rotateY(64deg);transform-origin:50% 0;transition:transform .55s var(--spring),filter .4s;filter:brightness(.68)}
.hg .g img{height:100%;width:auto;max-width:none;filter:drop-shadow(-6px 10px 10px rgba(0,0,0,.6));pointer-events:auto;cursor:grab}
.hg.grab .g,.hg.peek .g{transform:rotateY(0) translateZ(40px);filter:brightness(1.05)}
.hg .ptag{position:absolute;top:22%;left:12px;padding:4px 9px;border-radius:3px 9px 9px 3px;background:#c9a46a;color:var(--ink);font-family:'Alexandria';font-weight:700;font-size:.72rem;white-space:nowrap;opacity:0;transform:scale(.6) rotate(-14deg);transform-origin:0 50%;transition:.35s var(--spring);pointer-events:none;z-index:2}
.hg.peek .ptag{opacity:1;transform:rotate(-5deg)}
.tilt-hint{position:absolute;left:50%;bottom:7%;translate:-50% 0;z-index:9;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:16px;background:rgba(13,9,6,.8);backdrop-filter:blur(8px);border:1px solid rgba(212,162,76,.35);font-size:.82rem;line-height:1.5;width:max-content;max-width:92%;transition:opacity .6s,transform .6s;pointer-events:none}
.tilt-hint.hide{opacity:0;transform:translateY(16px)}
.tilt-hint b{color:var(--gold-2);font-weight:700}
.phone-ico svg{width:30px;height:30px;color:var(--gold);animation:tiltme 2.2s ease-in-out infinite}
@keyframes tiltme{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
.shelf-row{flex:0 0 auto;padding:12px 0 calc(16px + 52px)}
.row-title{padding:0 16px 8px;font-family:'Alexandria';font-size:.95rem}
.row-title small{opacity:.5;font-size:.75rem;margin-inline-start:6px}
.shelf-scroll{display:flex;gap:10px;padding:0 16px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.shelf-scroll::-webkit-scrollbar{display:none}
.cubby{position:relative;flex:0 0 31%;aspect-ratio:1/1.05;scroll-snap-align:start;border-radius:12px;grid-template-rows:100%;background:#1d120a url(../img/wardrobe-inside.webp) center/300%;box-shadow:inset 0 0 0 5px #3b2416,inset 0 0 22px rgba(0,0,0,.8);display:grid;place-items:center;padding:12px 10px 18px;overflow:hidden;transition:transform .25s var(--spring)}
.cubby:active{transform:scale(.95)}
.cubby::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--wood) center/160px;box-shadow:0 -2px 0 rgba(255,225,170,.2)}
.cubby img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.6));transform:perspective(300px) rotateX(var(--rx,0deg))}
.cubby .pt{position:absolute;top:7px;right:7px;padding:2px 7px;border-radius:3px;background:var(--paper);color:var(--ink);font-family:'Alexandria';font-size:.7rem;font-weight:700;rotate:4deg;z-index:2}
.fab{position:absolute;left:50%;bottom:12px;translate:-50% 0;display:flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--ink);font-family:'Alexandria';font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.5);z-index:10}
.fab svg{animation:jig 2.6s ease-in-out infinite}
@keyframes jig{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-16deg)}82%{transform:rotate(14deg)}89%{transform:rotate(-8deg)}}
#app.shaking .cab{animation:quake .5s linear}
@keyframes quake{10%,50%,90%{transform:translateX(-6px) rotate(-.6deg)}30%,70%{transform:translateX(6px) rotate(.6deg)}}

/* ============ SHEET ============ */
.scrim{position:absolute;inset:0;z-index:60;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:70;max-height:92%;overflow:hidden auto;border-radius:26px 26px 0 0;color:var(--ink);background:var(--paper);background-image:linear-gradient(rgba(244,234,214,.86),rgba(244,234,214,.86)),var(--linen);background-size:auto,360px;transform:translateY(105%);transition:transform .5s var(--soft);padding-bottom:calc(var(--safe-b) + 16px);box-shadow:0 -20px 50px rgba(0,0,0,.5)}
.sheet.on{transform:none}
.sheet.dragging{transition:none}
.grab{position:sticky;top:0;height:26px;display:grid;place-items:center;z-index:3;touch-action:none;cursor:grab}
.grab::before{content:"";width:44px;height:5px;border-radius:3px;background:rgba(42,26,16,.3)}
.sh-vis{position:relative;height:min(38cqh,330px);display:grid;place-items:center;grid-template-rows:100%;margin:-6px 16px 0;border-radius:18px;background:#1d120a url(../img/wardrobe-inside.webp) center/cover;box-shadow:inset 0 0 40px rgba(0,0,0,.8)}
.sh-vis img{height:92%;width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(0,0,0,.6));transform-origin:50% 0;animation:dangle 4.5s ease-in-out infinite}
@keyframes dangle{0%,100%{rotate:-1.5deg}50%{rotate:1.5deg}}
.hangtag{position:absolute;top:16%;left:12%;width:62px;padding:14px 6px 8px;text-align:center;background:#c9a46a;clip-path:polygon(22% 0,78% 0,100% 16%,100% 100%,0 100%,0 16%);transform-origin:50% 0;animation:tag 3.2s ease-in-out infinite;box-shadow:0 6px 12px rgba(0,0,0,.4)}
.hangtag small{display:block;font-family:'Alexandria';font-size:.8rem;opacity:.7}
.hangtag b{font-family:'Alexandria';font-size:1.05rem}
@keyframes tag{0%,100%{rotate:-8deg}50%{rotate:6deg}}
.sh-body{padding:14px 20px 0}
.sh-body .kicker{color:var(--red-ink)}
.sh-body h3{font-size:2.1rem;line-height:1.2;margin:2px 0 6px}
.sh-desc{line-height:1.8;opacity:.85;font-size:.95rem}
.sizes{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.size{min-width:44px;height:44px;padding:0 8px;border-radius:50%;border:2px dashed rgba(42,26,16,.4);font-weight:700;color:var(--ink);transition:.2s var(--spring)}
.size.on{border-style:solid;border-color:var(--red-ink);background:var(--red-ink);color:var(--paper);transform:rotate(-8deg) scale(1.06)}
.size.one{border-radius:999px}
.sh-buy{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:2px dotted rgba(42,26,16,.3)}
.sh-buy b{font-family:'Alexandria';font-size:1.9rem}
.sz-lbl{font-family:'Alexandria';font-size:.85rem;margin-top:12px;opacity:.75}
.sz-lbl small{opacity:.7}
.sz-lbl[hidden]{display:none}
.sz-lbl+.sizes{margin-top:6px}
.sh-model{position:absolute;bottom:12px;right:12px;z-index:2;padding:7px 14px;border-radius:999px;background:rgba(11,10,12,.72);backdrop-filter:blur(6px);color:var(--gold-2);font-family:'Alexandria';font-size:.8rem;border:1px solid rgba(212,162,76,.4)}
.sh-model[hidden]{display:none}
.sh-vis.worn{background:#0b2230}
.sh-vis.worn img{height:100%;width:100%;max-width:100%;object-fit:cover;object-position:50% 18%;border-radius:18px;animation:none;filter:none}
.sh-vis.worn .hangtag{display:none}
.sh-try{display:flex;align-items:center;gap:6px;margin:14px auto 0;font-family:'Alexandria';font-weight:700;color:var(--red-ink)}
.stamp{position:absolute;top:40%;left:10%;padding:6px 16px;border:4px double var(--red-ink);border-radius:10px;color:var(--red-ink);font-family:'Alexandria';font-weight:700;font-size:1.6rem;opacity:0;rotate:-16deg;pointer-events:none;mix-blend-mode:multiply;z-index:5}
.stamp.go{animation:stampIn 1.4s var(--ease) forwards}
@keyframes stampIn{0%{opacity:0;transform:scale(2.6)}14%{opacity:.9;transform:scale(.94)}20%{transform:scale(1)}75%{opacity:.85}100%{opacity:0}}
.fly{position:fixed;z-index:500;pointer-events:none;object-fit:contain;filter:drop-shadow(0 20px 20px rgba(0,0,0,.6))}

/* ============ SHAKE ============ */
.shake{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:calc(var(--top) + 20px) 16px calc(var(--safe-b) + 20px);background:radial-gradient(circle at 50% 40%,rgba(59,36,22,.96),rgba(13,9,6,.98));text-align:center}
.shake[hidden]{display:none}
.shake h3{font-size:2.4rem;color:var(--gold-2)}
.shake-x{position:absolute;top:calc(var(--top) + 6px);left:14px}
.cards{position:relative;width:100%;height:46cqh;margin:14px 0 6px}
.card{position:absolute;top:0;left:50%;width:46%;height:86%;margin-left:-23%;border-radius:16px;background:var(--paper);color:var(--ink);padding:10px 10px 12px;display:flex;flex-direction:column;align-items:center;box-shadow:0 20px 40px rgba(0,0,0,.6);transform:translateY(120%) rotate(0);opacity:0;transition:transform .7s var(--spring),opacity .4s}
.card img{flex:1;min-height:0;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.35))}
.card b{font-family:'Alexandria';font-size:.82rem;margin-top:6px}
.card span{font-family:'Alexandria';color:var(--red-ink);font-weight:700}
.shake.on .card{opacity:1}
.shake.on .card:nth-child(1){transform:translate(48%,4%) rotate(9deg);transition-delay:.25s}
.shake.on .card:nth-child(2){transform:translate(0,0) rotate(-1deg);transition-delay:.1s;z-index:2}
.shake.on .card:nth-child(3){transform:translate(-48%,6%) rotate(-10deg);transition-delay:.4s}
.shake-total{font-family:'Alexandria';opacity:.85}
.shake-actions{display:flex;gap:10px;margin-top:10px}

/* ============ REELS ============ */
#s-reels{padding-top:0}
.reels{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#000}
.reel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s linear}
.reel.seen>img{transform:scale(1.14)}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.45),transparent 22%,transparent 52%,rgba(0,0,0,.85));pointer-events:none}
.reel-top{position:absolute;top:calc(var(--top) + 4px);left:0;right:0;z-index:2;display:flex;justify-content:center;gap:18px;font-family:'Alexandria';font-size:.9rem}
.reel-top b{color:var(--gold-2);border-bottom:2px solid var(--gold);padding-bottom:3px}
.reel-top span{opacity:.6}
.reel-info{position:absolute;right:14px;left:112px;bottom:18px;z-index:2}
.reel-info h4{font-family:'Alexandria';font-size:2rem;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.reel-info p{opacity:.85;font-size:.9rem;margin:2px 0 10px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:rgba(244,234,214,.92);color:var(--ink);font-family:'Alexandria';font-size:.75rem;font-weight:700}
.chip img{width:30px;height:30px;border-radius:50%;object-fit:contain;background:#fff}
.chip i{font-style:normal;color:var(--red-ink)}
.reel-side{position:absolute;left:10px;bottom:22px;z-index:2;display:flex;flex-direction:column;gap:16px;align-items:center}
.rs{padding:8px 14px;border-radius:999px;background:rgba(11,10,12,.55);backdrop-filter:blur(8px);border:1px solid rgba(239,226,198,.22);font-size:.78rem;font-family:'Alexandria';min-width:84px;transition:background .2s,color .2s}
.rs:hover{background:rgba(11,10,12,.8)}
.rs.liked{background:var(--gold-2);color:var(--ink);border-color:var(--gold-2);animation:bump .45s var(--spring)}
.burst{position:absolute;z-index:5;pointer-events:none;width:110px;height:110px;margin:-55px 0 0 -55px}
.burst b{display:grid;place-items:center;width:100%;height:100%;font-family:'Alexandria';font-size:1.4rem;color:var(--gold-2);text-shadow:0 2px 12px rgba(0,0,0,.6);width:100%;height:100%;fill:var(--rose);stroke:none;animation:pop .9s var(--soft) forwards;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.burst i{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:radial-gradient(circle,#e8c35a 25%,#fff 30%);animation:petal .9s var(--soft) forwards}
@keyframes pop{0%{transform:scale(0) rotate(-20deg)}30%{transform:scale(1.15) rotate(5deg)}60%{transform:scale(1);opacity:1}100%{transform:scale(1.1) translateY(-40px);opacity:0}}
@keyframes petal{to{transform:translate(var(--dx),var(--dy)) rotate(200deg);opacity:0}}
.swipe-hint{position:absolute;top:44%;left:50%;translate:-50% 0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 18px;border-radius:16px;background:rgba(13,9,6,.6);backdrop-filter:blur(6px);font-family:'Alexandria';font-size:.85rem;transition:opacity .5s;pointer-events:none}
.swipe-hint svg{animation:up 1.4s ease-in-out infinite}
@keyframes up{50%{transform:translateY(-10px)}}
.swipe-hint.hide{opacity:0}

/* ============ BUNDLE ============ */
#s-bundle{display:flex;flex-direction:column;padding-top:0}
.bundle-hero{position:relative;flex:0 0 auto;height:40cqh;display:flex;flex-direction:column;align-items:center;padding-top:var(--top);overflow:hidden}
.bh-bg{position:absolute;inset:0;background:linear-gradient(rgba(13,9,6,.3),var(--night)),url(../img/look-1.webp) center 40%/cover}
.bundle-hero .top{align-self:stretch}
#bundleImg{position:relative;height:56%;width:auto;margin-top:2%;filter:drop-shadow(0 18px 20px rgba(0,0,0,.7));transform:scale(var(--bs,.75));transition:transform .5s var(--spring),filter .4s}
#bundleImg.empty{filter:grayscale(.8) brightness(.55) drop-shadow(0 18px 20px rgba(0,0,0,.7))}
#bundleImg.wob{animation:wob .6s var(--spring)}
@keyframes wob{30%{rotate:-6deg;translate:0 -8px}60%{rotate:4deg}}
#bundleImg.tied{animation:tied .9s var(--spring)}
@keyframes tied{30%{transform:scale(calc(var(--bs) * .8),calc(var(--bs) * 1.15))}60%{transform:scale(calc(var(--bs) * 1.1),calc(var(--bs) * .9))}}
.bcount{position:relative;margin-top:4px;padding:3px 12px;border-radius:999px;background:var(--paper);color:var(--ink);font-family:'Alexandria';font-size:.8rem;font-weight:700}
.b-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 16px}
.bi{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px dashed rgba(239,226,198,.15);animation:drop .45s var(--spring)}
.bi img{width:56px;height:56px;object-fit:contain;border-radius:12px;background:rgba(239,226,198,.06);padding:4px}
.bi h6{font-family:'Alexandria';font-size:.95rem}
.bi small{opacity:.55;font-size:.78rem}
.qty{display:flex;align-items:center;gap:8px;margin-top:4px}
.qty button{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(239,226,198,.35)}
.qty svg{width:14px;height:14px}
.bi .pr{font-family:'Alexandria';font-weight:700;color:var(--gold-2)}
.b-empty{text-align:center;opacity:.6;padding:30px 10px;line-height:1.9;font-family:'Alexandria'}
.b-foot{flex:0 0 auto;padding:10px 16px 14px;border-top:1px solid rgba(212,162,76,.18)}
.total{display:flex;justify-content:space-between;font-family:'Alexandria';font-size:1.1rem;margin-bottom:10px}
.total b{color:var(--gold-2)}
.tie{position:relative;height:60px;border-radius:999px;background:rgba(239,226,198,.08);border:1.5px solid rgba(212,162,76,.35);overflow:hidden;touch-action:none}
.tie-txt{position:absolute;inset:0;display:grid;place-items:center;font-family:'Alexandria';font-size:.85rem;padding-right:56px;opacity:.85;background:linear-gradient(90deg,rgba(239,226,198,.35),rgba(239,226,198,1) 50%,rgba(239,226,198,.35));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 2.4s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.tie-fill{position:absolute;top:0;bottom:0;right:0;width:0;background:linear-gradient(270deg,rgba(212,162,76,.55),rgba(142,42,34,.55))}
.knot{position:absolute;top:4px;right:4px;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 35%,#f3d58c,#b8873a 60%,#7a5520);box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,240,200,.35);cursor:grab;color:#3b2410}
.knot svg{width:28px;height:28px}
.tie.done .knot{background:radial-gradient(circle at 35% 35%,#fff3cf,var(--gold-2))}

.toast{position:absolute;left:50%;bottom:calc(var(--tabh) + 14px);z-index:110;translate:-50% 40px;opacity:0;padding:11px 18px;border-radius:999px;background:var(--paper);color:var(--ink);font-family:'Alexandria';font-weight:700;font-size:.88rem;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.45);transition:.4s var(--spring);pointer-events:none}
.toast.on{translate:-50% 0;opacity:1}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ============ WEBSITE LAYOUT (computer) ============ */
@media (min-width:900px){
  :root{--tabh:68px;--top:0px}
  .tabbar{top:0;bottom:auto;height:var(--tabh);padding:0 clamp(24px,4vw,64px);gap:6px;justify-content:flex-start;align-items:center;border-top:0;border-bottom:1px solid rgba(212,162,76,.18)}
  .nav-brand{display:block;font-size:1.7rem;color:var(--gold-2);margin-inline-end:auto}
  .tab{flex:0 0 auto;flex-direction:row;padding:10px 18px;border-radius:999px;font-size:.98rem;opacity:.7}
  .tab:hover{opacity:1}
  .tab.on{background:rgba(212,162,76,.12)}
  .tab.on::before{display:none}
  .tab em{position:static;margin-inline-start:6px}
  .screens{inset:var(--tabh) 0 0 0}
  .screen{padding-top:0}
  .screen>.top,.bundle-hero .top{display:none}

  /* closet: wardrobe beside the shelf */
  #s-closet{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:minmax(0,1fr);gap:28px;padding:28px clamp(24px,4vw,64px) 28px}
  #s-closet>.top{display:none}
  .cab{margin:0;grid-row:1;height:100%}
  .shelf-row{grid-column:2;grid-row:1;padding:0;display:flex;flex-direction:column;min-height:0}
  .row-title{padding:0 0 12px;font-size:1.1rem}
  .row-title small{display:none}
  .shelf-scroll{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0;overflow-y:auto;overflow-x:hidden;flex:1;align-content:start}
  .cubby{flex:none;width:100%}
  .cubby:hover{transform:translateY(-3px)}
  .fab{position:static;translate:none;margin-top:16px;justify-content:center}
  .shelf-row .fab{width:100%}
  .tilt-hint{font-size:.95rem}

  /* sheet becomes a centred two-column dialog */
  .sheet{left:50%;right:auto;bottom:50%;width:min(940px,calc(100vw - 64px));height:min(84vh,640px);max-height:none;overflow:hidden;border-radius:24px;display:grid;grid-template-columns:1fr 1fr;
    transform:translate(-50%,calc(50% + 40px)) scale(.97);opacity:0;pointer-events:none;transition:transform .45s var(--soft),opacity .3s;padding-bottom:0}
  .sheet.on{transform:translate(-50%,50%);opacity:1;pointer-events:auto}
  .grab{display:none}
  .sh-vis{height:auto;min-height:100%;margin:0;border-radius:24px 0 0 24px}
  [dir=rtl] .sh-vis{border-radius:0 24px 24px 0}
  .sh-vis.worn img{border-radius:0}
  .sh-body{padding:36px 34px;overflow-y:auto}
  .sh-body h3{font-size:2.2rem}

  /* looks: a gallery instead of full-screen reels */
  .reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;padding:28px clamp(24px,4vw,64px);scroll-snap-type:none;overflow-y:auto}
  .reel{height:auto;aspect-ratio:9/16;border-radius:20px;scroll-snap-align:none}
  .reel:hover>img{transform:scale(1.08)}
  .reel-top{top:14px}
  .swipe-hint{display:none}
  .reels{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .reel-info{left:14px;right:14px;bottom:14px}
  .reel-info h4{font-size:1.35rem}
  .reel-info p{font-size:.8rem}
  .reel-side{top:48px;bottom:auto;left:12px;gap:8px}
  .rs{min-width:0;padding:6px 12px;font-size:.72rem}

  /* mandoos: picture on one side, order on the other */
  #s-bundle{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,520px);grid-template-rows:minmax(0,1fr) auto}
  .bundle-hero{grid-row:1/3;height:100%;justify-content:center;padding:0}
  #bundleImg{height:48%}
  .b-list{grid-column:2;padding:28px 32px 8px}
  .b-foot{grid-column:2;padding:16px 32px 28px}

  .shake .cards{max-width:760px;height:52vh}
  .toast{bottom:28px}
}