:root{
  --cyan:#64cbe9;
  --cyanDark:#2b6678;
  --glassDark:rgba(49,72,78,.72);
  --glassLine:rgba(216,244,249,.88);
  --text:#c6edf4;
  --heart-scale:0.45;
  --girl-blur:2.8px;
  --pop-blur:2.4px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#664933;font-family:Arial,Helvetica,sans-serif}
body{position:fixed;inset:0;overscroll-behavior:none}
#viewport{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 51% 29%,#f3ede7 0 15%,#d2c1b4 34%,#9a765e 63%,#664933 100%)}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center center;overflow:hidden}
#stage:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 47%,rgba(255,255,255,.16),transparent 49%);pointer-events:none}

/* 3D */
.three-slot{position:absolute;pointer-events:none;overflow:visible}
.three-slot canvas{display:block;width:100%!important;height:100%!important}
#girl3d{left:120px;top:68px;width:620px;height:850px;z-index:2;filter:blur(var(--girl-blur))}
#product3d{left:1115px;top:35px;width:720px;z-index:1;height:auto;filter:blur(var(--pop-blur))}

/* CLEAN FROSTED GLASS — NO decorative shine blobs/streaks */
#price{
  position:absolute;left:312px;top:347px;width:195px;height:280px;z-index:20;
  border:2px solid rgba(226,248,252,.92);border-radius:12px;overflow:visible;
  background:rgba(75,199,229,.38);
  box-shadow:0 12px 30px rgba(21,52,60,.22),inset 0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  color:#1f6278;
}


/* XBO FIX: continuous price border ABOVE #tax.
   #tax's z-index is local to #price; it cannot go "behind" the parent's own border
   by using z-index:19 while #price is z-index:20. */
#price::after{
  content:"";
  position:absolute;
  inset:-2px;
  border:2px solid rgba(226,248,252,.92);
  border-radius:12px;
  pointer-events:none;
  z-index:100;
}
#heart{position:absolute;right:-30px;top:-43px;width:66px;height:66px;transform:rotate(-45deg) scale(var(--heart-scale));transform-origin:center center;background:#76d8ee;border-radius:12px 0 12px 0}
#heart:before,#heart:after{content:"";position:absolute;background:#76d8ee;width:66px;height:66px;border-radius:50%}
#heart:before{top:-32px;left:0}#heart:after{left:32px;top:0}
#priceValue{position:absolute;left:12px;top:18px;font:300 70px/1 Georgia,serif;letter-spacing:1px}
#priceValue small{font:300 28px Arial,sans-serif;margin-left:8px}
#qty{position:absolute;left:13px;right:13px;top:137px;height:64px;display:flex;align-items:center;justify-content:space-between}
#qty button,#qty span{height:55px;border:0;border-radius:7px;background:rgba(39,108,128,.62);color:#c6edf4;display:grid;place-items:center;font:300 35px/1 Georgia,serif}
#qty button{width:42px;cursor:pointer}#qty span{width:63px;font-size:44px}
#tax{position:absolute;left:-2px;right:-2px;bottom:-2px;height:50px;display:flex;align-items:center;justify-content:center;color:#caedf4;font-size:14px;background:rgba(28,100,121,.64);border-radius:0 0 10px 10px;;z-index:19;}

#infoTitle{
  position:absolute;left:1291px;top:193px;width:500px;height:70px;z-index:20;
  border:2px solid var(--glassLine);border-radius:12px;
  background:rgba(48,72,78,.48);
  box-shadow:0 12px 28px rgba(18,36,40,.20),inset 0 0 0 1px rgba(255,255,255,.07);
  color:#d7f7fb;display:flex;align-items:center;justify-content:center;
  font-size:26px;letter-spacing:.5px;
  backdrop-filter:blur(15px) saturate(118%);
  -webkit-backdrop-filter:blur(15px) saturate(118%);
}
#info{
  position:absolute;left:1291px;top:274px;width:500px;height:auto;min-height:0;z-index:20;
  border:2px solid var(--glassLine);border-radius:12px;
  background:rgba(48,72,78,.48);
  box-shadow:0 16px 36px rgba(18,35,39,.22),inset 0 0 0 1px rgba(255,255,255,.06);
  color:#c9eff5;padding:58px 28px;font-size:17px;line-height:1.55;
  backdrop-filter:blur(16px) saturate(118%);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
  overflow:visible;
}
#info p{margin:0 0 36px}#info p:last-child{margin-bottom:0}#info .lead{font-size:17px;text-transform:uppercase}

/* MENU — PURE VECTOR. PERFECT SVG CIRCLE BACKGROUND. NO BACKGROUND IMAGE. NO MORPH. */
#menu{
  position:absolute;
  left:830px;
  top:820px;
  width:260px;
  height:200px;
  z-index:30;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  overflow:visible;
}
#menuBackgroundClip{
  position:absolute;
  left:20px;
  top:52px;
  width:220px;
  height:168px;
  overflow:hidden;
  pointer-events:none;
}
#menuBackgroundVector{
  position:absolute;
  left:0;
  top:-52px;
  width:220px;
  height:220px;
  overflow:visible;
  pointer-events:none;
}
#menuBackgroundVector circle{
  fill:rgba(192,199,219,.86);
}
#menuLogo{
  position:absolute;
  left:50%;
  top:90px;
  width:162px;
  height:162px;
  transform:translate(-50%,-28%);
  pointer-events:none;
}
#menuLogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .10s linear}
#menuLogo .logo-open{opacity:1}
#menuLogo .logo-close{opacity:0}
#menu:hover #menuLogo .logo-open,#menu:focus-visible #menuLogo .logo-open{opacity:0}
#menu:hover #menuLogo .logo-close,#menu:focus-visible #menuLogo .logo-close{opacity:1}

#status{position:absolute;left:18px;bottom:14px;z-index:100;color:#dff7ff;font:12px/1.3 monospace;opacity:.0;pointer-events:none}
@media(max-width:700px){#infoTitle{left:1030px;top:670px;width:680px}#info{left:1030px;top:752px;width:680px;height:auto;min-height:0;padding:30px}#price{left:160px;top:120px}#menu{top:820px}}