#shop-content .shop-tabbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:20px 0}
#shop-content .shop-tabbar #shop-tabs{grid-template-columns:repeat(3,minmax(0,1fr));width:540px;margin:0}
#shop-content #shop-tabs:before{width:calc((100% - 10px)/3)}#shop-content #shop-tabs[data-section=rates]:before{opacity:0}
#shop-content #shop-rates-tab{display:flex;align-items:center;gap:9px;padding:13px 18px;border:1px solid #e4d5dc;border-radius:12px;color:#596e72;background:#fffaf7;font:inherit;font-size:12px;font-weight:650;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s}
#shop-content #shop-rates-tab svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}#shop-content #shop-rates-tab.selected{color:#90395e;background:#fae6ef;border-color:#d5a5b8}#shop-content #shop-rates-tab:active{transform:scale(.96)}
#shop-dock{gap:4px;padding:9px 10px;border-radius:23px;background:linear-gradient(180deg,#ffffff25,#ffffff0b),#2d2d2dc0;border-color:#ffffff38;box-shadow:0 9px 25px #0004,0 3px 8px #0003,inset 0 1px #ffffff33;backdrop-filter:blur(20px) saturate(150%)}
#shop-dock:before{content:"";position:absolute;inset:1px 1px 50%;background:linear-gradient(#ffffff20,transparent);border-radius:22px 22px 40% 40%;pointer-events:none;z-index:-1}
#shop-dock button{width:54px;height:54px;padding:3px;background:transparent;box-sizing:border-box;border-radius:14px}
#shop-dock button .dock-art{width:100%;height:100%;padding:0;border:0;fill:revert;stroke:none;filter:drop-shadow(0 3px 4px #0004);object-fit:cover;border-radius:13px;transition:filter .2s}
#shop-dock #dock-avatar{border:3px solid #f8c7df;background:#edd4e4;image-rendering:pixelated}
#shop-dock button:hover,#shop-dock button:focus-visible:where(html[data-input="keyboard"] *){width:78px;height:78px;background:transparent}#shop-dock button:hover+button,#shop-dock button:has(+button:hover){width:66px;height:66px}#shop-dock button:hover+button+button,#shop-dock button:has(+button+button:hover){width:56px;height:56px}
#shop-dock button>span{border-color:#ffffff33;background:linear-gradient(#ffffff15,#ffffff05),#141417ed;box-shadow:0 7px 18px #0003;font-size:12px;padding:8px 11px;backdrop-filter:blur(18px)}
#shop-dock #dock-unread{position:absolute;top:-2px;right:-2px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border:2px solid #fff;border-radius:12px;background:#c43e67;color:#fff;font:700 10px system-ui;box-sizing:border-box}#shop-dock #dock-unread[hidden]{display:none}
body[data-view=shop] #chat-toggle{display:none}
@media(max-width:700px){#shop-content .shop-tabbar{gap:10px}#shop-content .shop-tabbar #shop-tabs{width:auto;flex:1}#shop-content #shop-rates-tab{padding:13px 10px;font-size:11px;gap:6px}#shop-dock button,#shop-dock button:hover,#shop-dock button:focus-visible:where(html[data-input="keyboard"] *),#shop-dock button:hover+button,#shop-dock button:has(+button:hover),#shop-dock button:hover+button+button,#shop-dock button:has(+button+button:hover){width:45px;height:45px}#shop-dock{padding:7px 8px;bottom:max(14px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){#shop-dock button .dock-art,#shop-content #shop-rates-tab{transition:none}}

#shop-content #shop-tabs[data-section=basic]:before{transform:translateX(100%)}
#shop-content #shop-tabs[data-section=premium]:before{transform:translateX(200%)}
#gacha-track .gacha-item .gacha-art img{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
#gacha-track .gacha-art.is-enchanted img{filter:drop-shadow(0 0 5px var(--enchant-shadow))}
#gacha-track .enchant-glint{animation:enchanted-sweep 4s linear infinite}
@media(prefers-reduced-motion:reduce){#gacha-track .enchant-glint{animation:none}}
@media(max-width:480px){#shop-content .shop-tabbar{gap:6px}#shop-content #shop-tabs button{font-size:10px;padding:13px 3px}#shop-content #shop-rates-tab{padding:12px 8px}}

#shop-dock button .dock-image{object-fit:contain;border-radius:0}
#shop-dock button .dock-chat-art{background:#fffaf7;border-radius:50%;padding:12px;box-sizing:border-box;fill:none;stroke:#96365c;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Fixed-size hit areas avoid reflow while the dock magnifies. */
#shop-dock{gap:3px;padding:5px 7px;border-radius:18px;bottom:10px}
#shop-dock button,#shop-dock button:hover,#shop-dock button:focus-visible:where(html[data-input="keyboard"] *),#shop-dock button:hover+button,#shop-dock button:has(+button:hover),#shop-dock button:hover+button+button,#shop-dock button:has(+button+button:hover){width:40px;height:40px;padding:3px;transition:transform .18s cubic-bezier(.2,.8,.2,1);transform:scale(1)}
#shop-dock button:hover,#shop-dock button:focus-visible:where(html[data-input="keyboard"] *){transform:translateY(-3px) scale(1.16)}
#shop-dock button:active{transform:scale(.94)}
#shop-dock button .dock-chat-art{padding:9px}
body[data-view=shop] .store-scroll{padding-bottom:76px}
#gacha-panel .gacha-controls{padding-top:20px;padding-bottom:15px;gap:14px}
#gacha-panel .gacha-controls #gacha-spin,#gacha-panel .gacha-controls #gacha-spin-five{position:relative;isolation:isolate;overflow:hidden;border:1px solid #ffffff35!important;border-radius:25px;min-height:50px;padding:8px 20px;transform:translateY(-5px);background:linear-gradient(135deg,#c3507b,#95375f)!important;color:white!important;box-shadow:0 5px 0 #65243f,0 8px 9px #30202a26;transition:transform .13s cubic-bezier(.3,.7,.4,1),box-shadow .13s;touch-action:manipulation;filter:none;text-shadow:0 -1px 1px #0003}
#gacha-panel .gacha-controls #gacha-spin-five{background:linear-gradient(135deg,#b73a67,#86264f)!important}
#gacha-panel .gacha-controls .gacha-spin::after{content:'';display:block;position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,#ffffff30,transparent);transform:translateX(-110%);transition:transform .45s;animation:none}
#gacha-panel .gacha-controls .gacha-spin:hover:not(:disabled)::after{transform:translateX(110%)}
#gacha-panel .gacha-controls #gacha-spin:hover:not(:disabled),#gacha-panel .gacha-controls #gacha-spin-five:hover:not(:disabled){transform:translateY(-7px);box-shadow:0 7px 0 #65243f,0 10px 12px #30202a26;filter:none}
#gacha-panel .gacha-controls #gacha-spin:active:not(:disabled),#gacha-panel .gacha-controls #gacha-spin-five:active:not(:disabled){transform:translateY(0);box-shadow:0 0 0 #65243f,0 2px 3px #30202a20;transition-duration:34ms}
#gacha-panel .gacha-controls #gacha-spin:disabled,#gacha-panel .gacha-controls #gacha-spin-five:disabled{transform:none;box-shadow:0 2px 0 #65243f;opacity:.55}
@media(hover:none){#shop-dock button:hover{transform:none}}
@media(prefers-reduced-motion:reduce){#shop-dock button,#gacha-panel .gacha-controls .gacha-spin,#gacha-panel .gacha-controls .gacha-spin::after{transition:none!important}}


/* Scoped miniature history chest. */
#dock-history .mc-environment {
  
  --w: 140px;
  --d: 140px;
  --h-base: 100px;
  --h-lid: 40px;

  
  --mc-border: #251a10; 
  --mc-wood: #825425; 
  --mc-wood-light: #996531; 
  --mc-wood-dark: #593615; 

  --mc-latch-light: #d1d1d1; 
  --mc-latch-base: #8f8f8f; 
  --mc-latch-dark: #565656; 
  --mc-latch-outline: #1a1a1a; 

  --mc-void: #050302; 

  
  margin: 0;
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  box-sizing: border-box;
}#dock-history .mc-chest-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  margin-top: 100px;
}#dock-history .mc-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 100;
  cursor: pointer;
}#dock-history .mc-chest {
  position: relative;
  width: var(--w);
  height: calc(var(--h-base) + var(--h-lid));
  transform-style: preserve-3d;
  
  transform: rotateX(-24deg) rotateY(-40deg);
  pointer-events: none;
}#dock-history .chest-part {
  position: absolute;
  left: 0;
  width: var(--w);
  transform-style: preserve-3d;
}#dock-history .chest-base {
  top: var(--h-lid);
  height: var(--h-base);
}#dock-history .chest-lid {
  top: 0;
  height: var(--h-lid);
  
  transform-origin: 50% var(--h-lid) -70px;
  transition: transform 0.45s cubic-bezier(0.2, 1.2, 0.4, 1);
}#dock-history .mc-file-input:hover ~ .mc-chest .chest-lid {
  transform: rotateX(100deg);
}#dock-history .mc-file-input:active ~ .mc-chest .chest-lid {
  transform: rotateX(110deg);
}#dock-history .c-face {
  position: absolute;
  box-sizing: border-box;
  background-color: var(--mc-wood);
  
  border: 10px solid var(--mc-border);

  
  background-image: 
    
    repeating-linear-gradient(
      to bottom,
      var(--mc-wood-light) 0px,
      var(--mc-wood-light) 4px,
      transparent 4px,
      transparent 16px,
      var(--mc-wood-dark) 16px,
      var(--mc-wood-dark) 20px
    ),
    
      repeating-linear-gradient(
        to right,
        transparent 0px,
        transparent 10px,
        rgba(0, 0, 0, 0.06) 10px,
        rgba(0, 0, 0, 0.06) 20px,
        rgba(255, 255, 255, 0.06) 20px,
        rgba(255, 255, 255, 0.06) 40px,
        rgba(0, 0, 0, 0.12) 40px,
        rgba(0, 0, 0, 0.12) 50px
      );
}#dock-history .base-front, #dock-history .lid-front {
  filter: brightness(1);
}#dock-history .base-left, #dock-history .lid-left {
  filter: brightness(0.85);
}#dock-history .base-right, #dock-history .lid-right {
  filter: brightness(0.65);
}#dock-history .base-back, #dock-history .lid-back {
  filter: brightness(0.5);
}#dock-history .lid-top {
  filter: brightness(1.2);
}#dock-history .base-front {
  width: var(--w);
  height: var(--h-base);
  transform: translateZ(70px);
}#dock-history .base-back {
  width: var(--w);
  height: var(--h-base);
  transform: rotateY(180deg) translateZ(70px);
}#dock-history .base-left {
  width: var(--d);
  height: var(--h-base);
  transform: rotateY(-90deg) translateZ(70px);
}#dock-history .base-right {
  width: var(--d);
  height: var(--h-base);
  transform: rotateY(90deg) translateZ(70px);
}#dock-history .base-bottom {
  width: var(--w);
  height: var(--d);
  transform: rotateX(-90deg) translateZ(calc(var(--h-base) - 70px));
  background: var(--mc-border);
}#dock-history .base-top {
  width: var(--w);
  height: var(--d);
  transform: rotateX(90deg) translateZ(70px);
  background-color: var(--mc-void);
  background-image: none;
  box-shadow: inset 0 0 40px #000;
}#dock-history .lid-front {
  width: var(--w);
  height: var(--h-lid);
  transform: translateZ(70px);
}#dock-history .lid-back {
  width: var(--w);
  height: var(--h-lid);
  transform: rotateY(180deg) translateZ(70px);
}#dock-history .lid-left {
  width: var(--d);
  height: var(--h-lid);
  transform: rotateY(-90deg) translateZ(70px);
}#dock-history .lid-right {
  width: var(--d);
  height: var(--h-lid);
  transform: rotateY(90deg) translateZ(70px);
}#dock-history .lid-top {
  width: var(--w);
  height: var(--d);
  transform: rotateX(90deg) translateZ(70px);
}#dock-history .lid-bottom {
  width: var(--w);
  height: var(--d);
  transform: rotateX(-90deg) translateZ(calc(var(--h-lid) - 70px));
  background-color: var(--mc-wood-dark);
  background-image: none;
  border: 10px solid var(--mc-border);
}#dock-history .mc-latch {
  position: absolute;
  width: 20px;
  height: 40px;
  left: calc(50% - 10px);
  top: calc(var(--h-lid) - 20px);
  transform-style: preserve-3d;
  transform: translateZ(75px);
}#dock-history .latch-f {
  position: absolute;
  box-sizing: border-box;
  background-color: var(--mc-latch-base);
  border: 2px solid var(--mc-latch-outline);
}#dock-history .latch-front {
  width: 20px;
  height: 40px;
  transform: translateZ(5px);
  background: linear-gradient(
    to bottom,
    var(--mc-latch-light) 0px,
    var(--mc-latch-light) 10px,
    var(--mc-latch-base) 10px,
    var(--mc-latch-base) 28px,
    var(--mc-latch-dark) 28px
  );
}#dock-history .latch-back {
  width: 20px;
  height: 40px;
  transform: rotateY(180deg) translateZ(5px);
}#dock-history .latch-left {
  width: 10px;
  height: 40px;
  left: 5px;
  transform: rotateY(-90deg) translateZ(10px);
  background: var(--mc-latch-dark);
}#dock-history .latch-right {
  width: 10px;
  height: 40px;
  left: 5px;
  transform: rotateY(90deg) translateZ(10px);
  background: var(--mc-latch-dark);
}#dock-history .latch-top {
  width: 20px;
  height: 10px;
  top: 15px;
  transform: rotateX(90deg) translateZ(20px);
  background: var(--mc-latch-light);
}#dock-history .latch-bottom {
  width: 20px;
  height: 10px;
  top: 15px;
  transform: rotateX(-90deg) translateZ(20px);
  background: var(--mc-latch-dark);
}#dock-history .mc-chest-text {
  margin-top: 60px;
  
  font-family: ui-monospace, "Courier New", Courier, monospace;
  font-weight: bold;
  text-transform: uppercase;
  color: #aaaaaa;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 0 #151515;
  transition:
    transform 0.2s,
    color 0.2s;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}#dock-history .mc-file-input:hover ~ .mc-chest-text {
  color: #ffff55;
  transform: translateY(-2px);
}

#dock-history .mc-environment{position:absolute;left:50%;top:50%;width:140px;height:140px;min-height:0;margin:0;padding:0;display:block;transform:translate(-50%,-50%) scale(.17);perspective:1200px;pointer-events:none}
#dock-history .mc-chest{display:block}
#dock-history:hover .chest-lid,#dock-history:focus-visible:where(html[data-input="keyboard"] *) .chest-lid{transform:rotateX(100deg)}
#dock-history:active .chest-lid{transform:rotateX(110deg)}
@media(prefers-reduced-motion:reduce){#dock-history .chest-lid{transition:none}}

/* Keep the perspective scene centered within its dock slot. */
#dock-history .mc-environment{transform:translate(-50%,-50%) scale(.135);perspective:none}
#dock-history .mc-chest{transform-origin:50% 50%;transform:rotateX(-24deg) rotateY(-40deg)}
#dock-history .mc-environment{left:calc(50% - 7.25px)}

#shop-dock button.pointer-used{transform:none}
#shop-dock button.pointer-used>span{opacity:0}
#dock-history.pointer-used .chest-lid{transform:none}
body #chat-toggle.pointer-used{width:52px}
#chat-toggle.pointer-used:before,#chat-toggle.pointer-used:after,#chat-toggle.pointer-used>span{opacity:0}
#chat-toggle.pointer-used>svg{transform:none;opacity:1}

/* Shared Basic/Premium milestone meter; width comes from confirmed progress. */
#bonus-progress .bonus-glow-track{position:relative;grid-column:1/-1;width:100%;height:20px;margin:8px 0 3px;background:radial-gradient(circle,#1b2735,#090a0f);border:1px solid #313131;border-radius:30px;overflow:hidden;box-sizing:border-box;box-shadow:0 4px 12px #0003}
#bonus-progress #bonus-meter{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0}
#bonus-progress #bonus-glow-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,#00f260,#0575e6);box-shadow:0 0 15px #00f260,0 0 30px #0575e6;transition:width .8s cubic-bezier(.2,.7,.3,1);overflow:hidden}
#bonus-progress #bonus-glow-fill:before{content:'';position:absolute;left:50%;top:50%;width:200%;height:200%;background:radial-gradient(circle,#ffffff40,transparent);animation:bonus-ripple 3s infinite;pointer-events:none}
#bonus-progress #bonus-count{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:750;letter-spacing:1px;text-shadow:0 2px 4px #000b;z-index:2}
#bonus-glow-fill i{position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;opacity:.6;animation:bonus-float 5s ease-in-out infinite;pointer-events:none}
#bonus-glow-fill i:nth-child(1){top:10%;left:20%}#bonus-glow-fill i:nth-child(2){top:30%;left:70%;animation-delay:-1s}#bonus-glow-fill i:nth-child(3){top:50%;left:50%;animation-delay:-2s}#bonus-glow-fill i:nth-child(4){top:80%;left:40%;animation-delay:-1.5s}#bonus-glow-fill i:nth-child(5){top:90%;left:60%;animation-delay:-2.5s}
@keyframes bonus-ripple{from{transform:translate(-50%,-50%) scale(.5);opacity:.7}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@keyframes bonus-float{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-20px)}}
@media(prefers-reduced-motion:reduce){#bonus-progress #bonus-glow-fill{transition:none}#bonus-progress #bonus-glow-fill:before,#bonus-glow-fill i{animation:none}}

#bonus-progress>strong,#bonus-progress>p{grid-column:1/-1}
#bonus-progress .bonus-glow-track{min-width:0;justify-self:stretch}