/* Shop prototype visuals scoped to the game shop. Shared palette comes from ui-theme.css. */
@scope (.shop-v2){

:scope{
  --ink:#06141a; --bone:#efe7d4; --brass:#c9a55b; --brass-dim:#7d6636;
  --ice:#6fd8ff; --coral:#ff4b5c; --parch-ink:#2b2418;
  --off:#ff4b5c; --def:#4aa8ff; --skl:#f4f1e8; --nex:#6fe0a0;
  --o-off:#e8566a; --o-def:#5aa9ff; --o-skl:#e3c46a; --o-nex:#6fe0a0;
  --common:#a9bcc0; --rare:#6fb6ff; --epic:#c08cff; --gold:#ffd66b;
  --cloth:#a3182c; --cloth-d:#6e0c1b; --cloth-l:#c8283d;
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --num:"Barlow Condensed","Arial Narrow","Helvetica Neue",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

 :scope[data-theme="dark"]{--ink:#06141a;--bone:#efe7d4}
*,*::before,*::after{box-sizing:inherit}

:scope{margin:0;height:100%;background:#030a0d;color:var(--bone);font-family:var(--serif);overflow:hidden;
  -webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;color:inherit}
:scope{position:relative;width:min(100%,440px);height:100%;margin:0 auto;overflow:hidden;overflow:clip;isolation:isolate;display:flex;flex-direction:column}
.bg{position:absolute;inset:0;z-index:-3;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(10,5,2,.0) 0%,rgba(10,5,2,.35) 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px,rgba(255,220,170,.03) 3px 4px,transparent 4px 9px),
    repeating-linear-gradient(90deg,#3b2415 0 46px,#2a190e 46px 48px,#432a18 48px 94px,#2a190e 94px 96px);}
/* top beam */
.bg::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 30px);
  background:linear-gradient(#1a0e07,#2c1a0e 70%,#120904);box-shadow:0 4px 10px rgba(0,0,0,.6)}
/* floor */
.floor{position:absolute;left:-30%;right:-30%;bottom:-8%;height:62%;z-index:-2;transform:perspective(420px) rotateX(58deg);transform-origin:50% 100%;
  background:
    linear-gradient(180deg,rgba(8,4,1,.85),rgba(8,4,1,.1) 40%,rgba(8,4,1,.5)),
    repeating-linear-gradient(90deg,#4a2e18 0 58px,#2a180b 58px 60px,#553620 60px 118px,#2a180b 118px 120px)}
/* warm light & vignette */
.glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 12% 16%,rgba(255,170,80,.28),transparent 70%),radial-gradient(ellipse 60% 40% at 88% 16%,rgba(255,170,80,.28),transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 60%,rgba(255,140,60,.12),transparent 70%),radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.65) 100%);
  animation:flick 4s ease-in-out infinite}
@keyframes flick{0%,100%{opacity:1}42%{opacity:.9}47%{opacity:1}71%{opacity:.93}}
.shelf{position:absolute;top:calc(env(safe-area-inset-top,0px) + 50px);width:92px;height:64px;z-index:-1;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.55))}
.shelf.l{left:calc(50% - 170px)}.shelf.r{right:calc(50% - 170px)}
.lantern{position:absolute;top:calc(env(safe-area-inset-top,0px) + 20px);width:34px;height:74px;z-index:3;pointer-events:none;transform-origin:50% 0;animation:sway 5s ease-in-out infinite}
.lantern.l{left:8px}.lantern.r{right:8px;animation-delay:-2.5s}
.lantern .halo{position:absolute;left:50%;top:56%;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:radial-gradient(circle,rgba(255,190,100,.55),rgba(255,150,60,.15) 45%,transparent 70%);animation:halo 2.6s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(3deg)}}
@keyframes halo{50%{opacity:.75;transform:scale(.94)}}

/* run bar */
.runbar{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:8px 12px 4px;font-size:12px;color:#b9c7c9;flex:none}
.runbar .fl{white-space:nowrap}.runbar .fl b{font-family:var(--num);font-style:italic;font-weight:800;font-size:20px;color:#fff}
.runbar .hp{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.runbar .hp span{display:flex;justify-content:space-between;font-size:11px}
.runbar .hp span b{font-family:var(--num);font-style:italic;font-weight:800;font-size:15px;color:#fff}
.runbar .hp i{display:block;height:4px;background:#1b2f36;transform:skewX(-30deg);position:relative;overflow:hidden}
.runbar .hp i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--hp-percent,100%);background:linear-gradient(90deg,#3fb3c9,#b5f3ff)}
.gold{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.gold b{font-family:var(--num);font-style:italic;font-weight:800;font-size:24px;color:var(--gold);text-shadow:0 0 10px rgba(255,214,107,.35)}
.gold small{font-family:var(--num);font-style:italic;font-size:12px;color:var(--gold)}
.gold.spend b{animation:spend .5s}
@keyframes spend{30%{color:#fff;transform:scale(1.2)}}

/* hanging sign */
.signwrap{position:relative;flex:none;height:78px;display:flex;justify-content:center;z-index:2}
.sign{position:relative;margin-top:14px;padding:4px 20px 6px;text-align:center;
  background:linear-gradient(#6b4524,#4a2d15);box-shadow:inset 0 0 0 1px #a07a3e,inset 0 0 0 3px #3a2410,inset 0 0 0 4px rgba(232,197,122,.45),0 4px 8px rgba(0,0,0,.55);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);transform-origin:50% -16px;animation:signsway 6s ease-in-out infinite}
.signwrap::before,.signwrap::after{content:"";position:absolute;top:0;width:1px;height:20px;background:#a07a3e}
.signwrap::before{left:calc(50% - 44px)}.signwrap::after{left:calc(50% + 44px)}
.sign small{display:block;font-family:var(--num);font-style:italic;font-weight:800;font-size:10px;letter-spacing:.3em;color:#e8c57a}
.sign b{display:block;margin-top:1px;font-family:"Yuji Boku","Noto Serif JP","Hiragino Mincho ProN",serif;font-weight:400;font-size:24px;line-height:1.15;letter-spacing:.14em;padding-left:.14em;
  background:linear-gradient(180deg,#fff4cf 0%,#f1cf7a 38%,#b8862a 62%,#f3d995 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 #1a0e06) drop-shadow(0 -1px 0 rgba(255,230,180,.25)) drop-shadow(0 0 6px rgba(255,190,100,.35))}
@keyframes signsway{50%{transform:rotate(-1deg)}}
/* heading */
.head{position:relative;flex:none;padding:6px 14px 2px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.head .t small{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--brass)}
.head .t h1{margin:2px 0 0;font-size:22px;font-weight:800;letter-spacing:.06em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.head .rule{display:block;width:80px;height:8px;color:var(--brass);margin-top:3px}

/* ---------- furoshiki ---------- */
.cloth-wrap{position:relative;flex:1 1 auto;min-height:0;margin:14px 14px 4px;display:flex}
.cloth{position:relative;flex:1;display:flex;flex-direction:column;padding:16px 12px 12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23e8c57a' stroke-width='1' opacity='.55'%3E%3Ccircle cx='0' cy='0' r='22'/%3E%3Ccircle cx='44' cy='0' r='22'/%3E%3Ccircle cx='0' cy='44' r='22'/%3E%3Ccircle cx='44' cy='44' r='22'/%3E%3Ccircle cx='22' cy='22' r='22'/%3E%3C/g%3E%3C/svg%3E") 0 0/44px 44px,
    radial-gradient(ellipse at 30% 10%,rgba(255,120,120,.35),transparent 55%),
    radial-gradient(ellipse at 80% 90%,rgba(0,0,0,.35),transparent 60%),
    linear-gradient(160deg,var(--cloth-l),var(--cloth) 45%,var(--cloth-d));
  background-blend-mode:soft-light,normal,normal,normal;
  clip-path:polygon(2.5% 0,97.5% 0,100% 100%,0 100%);
  box-shadow:inset 0 0 0 7px rgba(70,5,15,.55),inset 0 0 0 8px rgba(232,197,122,.7),inset 0 0 0 11px rgba(70,5,15,.4),inset 0 0 0 12px rgba(232,197,122,.35),inset 0 -30px 50px rgba(0,0,0,.35);
  transform-origin:50% 0;opacity:0;transform:scaleY(.05)}
:scope.open .cloth{opacity:1;transform:none;transition:transform .55s cubic-bezier(.2,1.1,.3,1),opacity .15s}
/* fold creases */
.cloth::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 33%,rgba(0,0,0,.14) 33.3%,rgba(255,255,255,.06) 33.8%,transparent 34.3%,transparent 66%,rgba(0,0,0,.14) 66.3%,rgba(255,255,255,.06) 66.8%,transparent 67.3%),
             linear-gradient(180deg,transparent 49%,rgba(0,0,0,.12) 49.3%,rgba(255,255,255,.05) 49.8%,transparent 50.3%)}
/* drop shadow under cloth */
.cloth-wrap::after{content:"";position:absolute;left:4%;right:4%;bottom:-8px;height:18px;z-index:-1;background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%)}
/* knotted ears */
.ear{position:absolute;top:-16px;width:46px;height:40px;z-index:3;opacity:0;transition:opacity .3s .45s}
.ear.l{left:-6px}.ear.r{right:-6px;transform:scaleX(-1)}
:scope.open .ear{opacity:1}
.tassel{position:absolute;bottom:-12px;width:10px;height:26px;z-index:3;opacity:0;transition:opacity .3s .5s}
.tassel.l{left:6px}.tassel.r{right:6px}
:scope.open .tassel{opacity:1}

.lbl{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin:0 6px 6px;font-family:var(--num);font-style:italic;font-weight:800;font-size:13px;letter-spacing:.2em;color:#f3d995;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.lbl::after{content:"";flex:1;height:0;border-top:1px dashed rgba(243,217,149,.55)}
.lbl small{font-family:var(--serif);font-style:normal;font-weight:600;font-size:10px;letter-spacing:.06em;color:rgba(255,230,200,.75)}

/* item base */
.item{position:relative;border:0;padding:0;background:none;cursor:pointer;opacity:0;transform:translateY(-40px) scale(.9)}
.item.in{opacity:1;transform:none;transition:transform .5s cubic-bezier(.2,1.5,.4,1),opacity .2s}
.item::after{content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:12px;z-index:-1;background:radial-gradient(ellipse,rgba(40,0,5,.7),transparent 70%)}
.item.sold{pointer-events:none}
.item.sold>*:not(.stamp){filter:grayscale(.85) brightness(.5)}
.item.pick{animation:pick .3s}
@keyframes pick{50%{transform:translateY(-4px) scale(1.03)}}

/* price tag */
.tag{position:absolute;left:50%;bottom:-17px;z-index:4;transform:translateX(-50%) rotate(-3deg);transform-origin:50% -10px;display:flex;align-items:baseline;gap:2px;
  padding:2px 10px 2px 14px;background:linear-gradient(#f4ecd8,#dccda8);color:var(--parch-ink);white-space:nowrap;box-shadow:0 2px 3px rgba(0,0,0,.45);
  clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%)}
.tag::before{content:"";position:absolute;left:5px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#6e0c1b}
.tag b{font-family:var(--num);font-style:italic;font-weight:800;font-size:17px;line-height:1}
.tag small{font-family:var(--num);font-style:italic;font-size:11px}
.item.poor .tag b,.item.poor .tag small{color:#b8202f}
.item.in .tag{animation:swing 1.4s .2s ease-out}
@keyframes swing{0%{transform:translateX(-50%) rotate(14deg)}40%{transform:translateX(-50%) rotate(-8deg)}70%{transform:translateX(-50%) rotate(2deg)}100%{transform:translateX(-50%) rotate(-3deg)}}

/* cards */
.cards{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;gap:8px;justify-content:center;padding:0 4px 22px}
.shop-card{--tc:var(--off);flex:1 1 0;max-width:124px;display:flex}
.shop-card .face{position:relative;flex:1;display:flex;flex-direction:column;background:linear-gradient(#141a1c,#07090a);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  box-shadow:inset 0 0 0 1.5px var(--tc),inset 0 0 0 3px #07090a,inset 0 0 0 4px color-mix(in srgb,var(--tc) 45%,transparent),inset 0 -40px 30px -24px color-mix(in srgb,var(--tc) 35%,transparent)}
.shop-card .face::after{content:"";position:absolute;right:0;bottom:0;width:15px;height:15px;background:var(--tc);clip-path:polygon(100% 0,100% 100%,0 100%)}
.shop-card .art{position:relative;flex:none;height:36%;margin:4px 4px 0;overflow:hidden;border-bottom:1.5px solid var(--tc)}
.shop-card .art{background-image:url("/assets/card-atlas.webp");background-size:400% 300%;background-repeat:no-repeat}
.shop-card .cost{position:absolute;left:4px;top:4px;width:26px;height:26px;display:grid;place-items:center;font-family:var(--num);font-style:italic;font-weight:800;font-size:17px;color:#fff}
.shop-card .cost::before{content:"";position:absolute;inset:4px;transform:rotate(45deg);background:var(--ink);border:1px solid var(--brass)}
.shop-card .cost span{position:relative}
.shop-card .gemk{position:absolute;right:6px;top:7px;width:9px;height:9px;transform:rotate(45deg);background:var(--tc);box-shadow:0 0 0 2px #07090a,0 0 8px var(--tc)}
.shop-card .ki{margin:4px 5px 0;display:flex;justify-content:space-between;gap:4px;font-family:var(--num);font-style:italic;font-weight:600;font-size:9.5px;letter-spacing:.05em;color:var(--tc)}
.shop-card .cn{flex:none;margin:2px 5px 0;padding:3px 2px;font-size:14px;font-weight:800;text-align:center;color:var(--parch-ink);background:linear-gradient(#efe5cc,#d9cba6);line-height:1.1}
.shop-card .tx{flex:1 1 auto;min-height:0;overflow:hidden;margin:3px 5px 0;padding:4px 5px;text-align:left;font-size:11px;line-height:1.5;font-weight:600;color:var(--parch-ink);background:linear-gradient(#f4ecd8,#e6dac0)}
.shop-card .tx b{color:#1d6b3a}.shop-card .tx b.b{color:#0b5d7c}
.shop-card .tx small{display:block;margin-top:2px;font-size:10px;color:#8a7650}
.shop-card .sk{flex:none;margin:5px 0 8px;display:flex;justify-content:center;gap:5px}
.shop-card .sk i{width:9px;height:9px;border-radius:50%;border:1px solid var(--brass);background:radial-gradient(circle at 35% 30%,#fff,var(--oc,#c9d2d4) 40%,#2a3236)}

/* modules */
.mods{position:relative;z-index:1;flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 4px 20px}
.mod{height:90px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;padding-top:4px}
.mod .cushion{position:absolute;left:50%;top:6px;width:46px;height:46px;margin-left:-23px;transform:rotate(45deg);
  background:linear-gradient(135deg,#2b3f7a,#16214a);box-shadow:inset 0 0 0 2px rgba(232,197,122,.8),0 3px 6px rgba(0,0,0,.5);border-radius:6px}
.mod .cushion::after{content:"";position:absolute;inset:-3px;border-radius:8px;background:
  radial-gradient(circle at 0 0,#e8c57a 0 3px,transparent 4px),radial-gradient(circle at 100% 0,#e8c57a 0 3px,transparent 4px),
  radial-gradient(circle at 0 100%,#e8c57a 0 3px,transparent 4px),radial-gradient(circle at 100% 100%,#e8c57a 0 3px,transparent 4px)}
.mod .orb{position:relative;z-index:1;width:30px;height:30px;margin-top:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 9%,var(--oc) 42%,color-mix(in srgb,var(--oc) 40%,#000) 100%);
  box-shadow:0 0 0 2px #0a1418,0 0 0 3px var(--brass-dim),0 0 16px var(--oc),0 6px 8px rgba(0,0,0,.5)}
.mod .nm{position:relative;z-index:1;margin-top:12px;font-size:12.5px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000;white-space:nowrap}
.mod .nm em{font-style:normal;font-family:var(--num);font-weight:800;font-size:12px;color:#ffe3a1;margin-left:2px}
.mod .rr{position:relative;z-index:1;margin-bottom:14px;font-family:var(--num);font-style:italic;font-weight:800;font-size:10px;letter-spacing:.14em;color:var(--rc);text-shadow:0 1px 2px #000}
.mod.epic .orb{animation:orbglow 2.2s ease-in-out infinite}
@keyframes orbglow{50%{box-shadow:0 0 0 2px #0a1418,0 0 0 3px var(--epic),0 0 26px var(--oc),0 6px 8px rgba(0,0,0,.5)}}
.mod .only{position:absolute;top:0;right:2px;z-index:2;font-size:9px;font-weight:800;padding:1px 5px;color:#0b2a17;background:var(--nex);transform:rotate(6deg)}

/* service */
.svc{position:relative;z-index:1;flex:none;align-self:center;margin:2px 0 14px;display:flex;align-items:center;gap:10px;padding:7px 78px 7px 12px;
  background:linear-gradient(#5a3a1c,#3a2410);box-shadow:inset 0 0 0 1px #a07a3e,inset 0 0 0 3px #3a2410,inset 0 0 0 4px rgba(232,197,122,.35),0 3px 6px rgba(0,0,0,.5);
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,10px 100%)}
.svc .ic{width:22px;height:22px;color:#f3d995}
.svc .st b{display:block;font-size:13px;font-weight:800;color:#fff}
.svc .st small{font-size:10px;color:#e0cfa8}
.svc .tag{left:auto;right:8px;bottom:auto;top:50%;transform:translateY(-50%) rotate(-4deg)}
.svc.in .tag{animation:none}

/* sold stamp */
.stamp{position:absolute;left:50%;top:40%;z-index:6;padding:2px 12px;font-family:var(--num);font-style:italic;font-weight:800;font-size:22px;letter-spacing:.12em;color:#fff;background:var(--coral);
  transform:translate(-50%,-50%) rotate(-14deg);box-shadow:3px 3px 0 var(--ink);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);animation:stamp .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp{0%{transform:translate(-50%,-50%) rotate(-14deg) scale(2.6);opacity:0}100%{transform:translate(-50%,-50%) rotate(-14deg) scale(1);opacity:1}}

/* coins */
.coin{position:absolute;z-index:40;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff6c8,#e3b64f 55%,#8b6420);box-shadow:0 0 8px rgba(255,214,107,.8)}
.flyer{position:absolute;z-index:41;pointer-events:none;transition:transform .6s cubic-bezier(.5,0,.8,.4),opacity .6s}
.burst{position:absolute;z-index:30;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px var(--bc);animation:burst .6s ease-out forwards}
@keyframes burst{to{transform:scale(12);opacity:0}}

/* sheet */
.veil{position:absolute;inset:0;z-index:20;background:rgba(3,10,13,.55);opacity:0;pointer-events:none;transition:opacity .2s}
.veil.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 82px);z-index:21;padding:10px 12px 12px;background:rgba(6,20,26,.97);
  box-shadow:inset 0 0 0 1px var(--dc,var(--brass-dim)),inset 3px 0 0 var(--dc,var(--brass-dim));clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  transform:translateY(20px);opacity:0;pointer-events:none;transition:all .22s cubic-bezier(.2,.9,.3,1)}
.sheet.on{transform:none;opacity:1;pointer-events:auto}
.sheet .row{display:flex;align-items:center;gap:8px}
.sheet .k{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--dc)}
.sheet .r{font-family:var(--num);font-style:italic;font-size:11px;letter-spacing:.12em;color:var(--rc2)}
.sheet .x{margin-left:auto;width:26px;height:26px;border:1px solid var(--brass-dim);background:transparent;font-size:16px;line-height:1;cursor:pointer}
.sheet h3{margin:2px 0 5px;font-size:17px;font-weight:800;color:#fff}
.sheet p{margin:0;padding:4px 8px;font-size:12.5px;line-height:1.55;font-weight:600;color:var(--parch-ink);background:rgba(233,223,198,.93)}
.sheet p b{color:#1d6b3a}.sheet p b.b{color:#0b5d7c}.sheet p .only{display:inline-block;margin-right:4px;padding:0 5px;font-size:10px;color:#0b2a17;background:var(--nex)}
.sheet .buy{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:8px;border:0;padding:9px 14px;cursor:pointer;
  background:linear-gradient(#f3d995,#c9a55b);color:var(--ink);font-weight:800;font-size:15px;letter-spacing:.06em;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.sheet .buy small{font-family:var(--num);font-style:italic;font-weight:600;font-size:12px;letter-spacing:.04em;color:#5a4418}
.sheet .buy:disabled{background:#3a3a3a;color:#999;cursor:default}.sheet .buy:disabled small{color:#ff8a95}
.sheet .buy:not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;width:26%;left:-30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:gosheen 2.2s ease-in-out infinite}
@keyframes gosheen{0%{left:-30%}60%,100%{left:120%}}

/* footer */
.foot{flex:none;display:flex;gap:10px;align-items:center;padding:8px 12px 12px}
.bag{flex:none;display:flex;height:54px;background:rgba(6,20,26,.9);box-shadow:inset 0 0 0 1px var(--brass-dim),inset 0 0 0 4px rgba(6,20,26,.9),inset 0 0 0 5px rgba(201,165,91,.3);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.bag button{border:0;background:none;padding:0 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer}
.bag button+button{border-left:1px solid rgba(201,165,91,.3);padding-right:18px}
.bag small{font-size:10px;color:var(--brass);letter-spacing:.12em}
.bag b{font-family:var(--num);font-style:italic;font-weight:800;font-size:22px;line-height:1;color:#fff}
.bag .bump{animation:bump .35s}
@keyframes bump{50%{transform:scale(1.25)}}
.go{position:relative;flex:1;height:58px;border:0;padding:0;background:none;cursor:pointer;color:var(--ink)}
.go .sh{position:absolute;inset:6px -2px -6px 8px;background:var(--coral);clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%);transition:transform .12s}
.go .face{position:absolute;inset:0 6px 6px 0;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--bone);clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%);transition:transform .12s}
.go .t{font-weight:800;font-size:17px;letter-spacing:.08em;white-space:nowrap;text-align:center}
.go .t small{display:block;font-family:var(--num);font-style:italic;font-weight:600;font-size:10px;letter-spacing:.16em;color:#7a6a45}
.go .chev{display:flex}.go .chev i{width:7px;height:7px;border-top:2.5px solid var(--coral);border-right:2.5px solid var(--coral);transform:rotate(45deg);margin-left:-1px;opacity:.6}
.go:active .face{transform:translate(5px,5px)}.go:active .sh{transform:translate(-2px,-2px)}
.toast{position:absolute;left:50%;top:44%;z-index:50;transform:translate(-50%,-50%) rotate(-6deg);padding:6px 20px;font-weight:800;font-size:18px;color:var(--ink);background:var(--gold);
  box-shadow:4px 4px 0 var(--coral);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);animation:toast 1.1s ease-out forwards;pointer-events:none;white-space:nowrap}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(1.8)}15%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) rotate(-6deg)}}

button:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
@media (max-height:720px){
  .signwrap{height:50px}.sign{margin-top:10px;padding:3px 18px 4px}.sign b{font-size:20px}.lantern{transform:scale(.85)}.shelf{display:none}
  .cloth-wrap{margin-top:10px}.cloth{padding:12px 10px 8px}
  .shop-card .tx{font-size:9.6px;line-height:1.42}.shop-card .cn{font-size:12.5px}
  .mod{height:82px}.mod .cushion{width:40px;height:40px;margin-left:-20px}.mod .orb{width:26px;height:26px;margin-top:6px}.mod .nm{margin-top:9px;font-size:11.5px}
  .mods{padding-bottom:18px}.svc{margin-bottom:10px;padding:5px 74px 5px 10px}
  .foot{padding:6px 12px 8px}.lbl{margin-bottom:4px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

}
#app.shop-app{height:100vh;height:100dvh;min-height:0;overflow:hidden;background:#030a0d}
main.shop-v2{max-width:440px;padding:0;min-height:0;height:100%;line-height:1.5}
body.shop-mode .shop-v2,body.shop-mode .shop-v2 *{font-family:var(--serif)!important}
body.shop-mode .shop-v2 :is(.fl b,.hp b,.gold b,.gold small,.sign small,.lbl,.shop-card .cost,.shop-card .ki,.tag,.mod .nm em,.mod .rr,.sheet .r,.sheet .buy small,.bag b,.go .t small,.stamp){font-family:var(--num)!important}
body.shop-mode .shop-v2 .sign b{font-family:"Yuji Boku","Noto Serif JP",serif!important}
.shop-v2 .shop-ornaments{position:absolute;width:0;height:0;overflow:hidden}
.shop-v2 .shop-card .tx p{margin:0;padding:0;color:inherit;font:inherit}
.shop-v2 .shop-card .tx small{font-size:10px}
.shop-v2 .item:disabled{opacity:1}
.shop-v2 .sheet{max-height:52%;overflow:auto;overscroll-behavior:contain}
.shop-v2 .sheet .buy{flex-wrap:wrap;gap:3px}
.shop-v2 .sheet .buy small{white-space:normal;text-align:right}