/* ============ Base ============ */
*{box-sizing:border-box}
:root{
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --gold-1:#fff3c4;--gold-2:#ffe08a;--gold-3:#d9a441;
  --ink:#1b1206;
  font-family:"Rubik",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html,body{margin:0;min-height:100%;background:#b58c4d}
body{
  min-height:100vh;overflow-x:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 85% 12%,#f3df8f 0,transparent 70%),
    radial-gradient(ellipse 55% 60% at 8% 78%,#7a4c22b0 0,transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%,#6b4219aa 0,transparent 70%),
    linear-gradient(115deg,#b4843f,#d8b66c 52%,#a5743a);
}
/* film grain */
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* slow drifting light — transform only, GPU friendly */
.bg-glow{position:fixed;inset:-20%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 30% 30%,#fff6c955 0,transparent 35%),radial-gradient(circle at 70% 60%,#ffd77a33 0,transparent 40%);
  animation:drift 18s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{to{transform:translate3d(6%,4%,0) scale(1.05)}}

button{font:inherit}
.hidden{display:none!important}

.demo-ribbon{position:fixed;z-index:30;right:12px;top:10px;background:#171717d9;border:1px solid #ffffff40;border-radius:20px;
  padding:6px 11px;font-size:9px;font-weight:800;letter-spacing:1px;color:#ffe59a;backdrop-filter:blur(6px)}

/* ============ Layout ============ */
.store{width:min(100%,1120px);margin:auto;min-height:100vh;padding:26px 30px 120px;position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:12px;margin:0 0 38px;animation:fadeDown .7s var(--ease-out) backwards}
.brand-mark{width:40px;height:40px;border:2px solid #fff7d0;border-radius:50%;display:grid;place-items:center;color:#ffe38a;font-size:22px;
  background:radial-gradient(circle at 35% 30%,#ffffff30,#00000018);box-shadow:0 3px 10px #5a3a1650,inset 0 0 8px #fff4c040}
.brand-name{font-size:27px;font-weight:900;font-style:italic;letter-spacing:-.5px;text-shadow:0 2px 6px #60421f99}
.brand-caption{font-size:10px;font-weight:700;margin-top:1px;color:#fff2d2;letter-spacing:.6px}
.content{width:min(100%,900px);margin:0 auto;text-align:center}
h1{font-size:clamp(19px,3vw,28px);font-weight:900;margin:0 0 20px;letter-spacing:-.2px;text-shadow:0 2px 8px #805a2b99;
  animation:fadeDown .7s .05s var(--ease-out) backwards}

/* ============ Search ============ */
.search{position:relative;display:flex;width:min(480px,100%);height:52px;margin:auto;border-radius:30px;overflow:hidden;background:#fff;
  box-shadow:0 6px 18px #65451f55,0 0 0 0 #ffe36a00;transition:box-shadow .25s var(--ease-out),transform .25s var(--ease-out);
  animation:fadeDown .7s .1s var(--ease-out) backwards}
.search:focus-within{box-shadow:0 8px 24px #65451f66,0 0 0 4px #ffe36a88;transform:translateY(-1px)}
.search-icon{position:absolute;left:17px;top:50%;width:18px;height:18px;translate:0 -50%;fill:none;stroke:#9a8a72;stroke-width:2.4;stroke-linecap:round;pointer-events:none}
.search input{min-width:0;flex:1;border:0;background:transparent;color:#221a10;padding:0 14px 0 44px;font:500 15px/1 inherit;font-family:inherit;outline:none}
.search input::placeholder{color:#a99a83}
.search button{border:0;margin:5px;border-radius:24px;background:linear-gradient(180deg,#ffe75a,#ffcf14);color:#14100a;padding:0 24px;
  font-weight:900;font-size:15px;cursor:pointer;box-shadow:inset 0 -2px 0 #00000022,0 2px 6px #b8860b55;
  transition:transform .15s var(--ease-out),filter .15s,box-shadow .15s}
.search button:hover{filter:brightness(1.05);transform:translateY(-1px)}
.search button:active{transform:translateY(1px) scale(.97);box-shadow:inset 0 2px 3px #00000025}

.hint{font-size:13px;font-weight:800;margin:18px 0 40px;color:#fff9df;text-shadow:0 1px 3px #6f4a20;min-height:16px;
  transition:color .3s,opacity .25s,transform .25s var(--ease-out)}
.hint.swap{opacity:0;transform:translateY(-4px)}
.hint.ok{color:#eaffd9}
.hint.err{color:#ffe1d6;animation:shake .4s}
@keyframes shake{20%,60%{translate:-5px 0}40%,80%{translate:5px 0}}

/* ============ Cards ============ */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{
  --rx:0deg;--ry:0deg;--mx:50%;--my:30%;
  position:relative;isolation:isolate;height:360px;min-width:0;border:0;border-radius:18px;padding:26px 12px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;color:#fff;cursor:pointer;overflow:hidden;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow:0 10px 22px #4a2e1055,inset 0 1px 0 #ffffff40,inset 0 -2px 0 #00000025;
  transition:transform .5s var(--ease-out),translate .35s var(--ease-out),box-shadow .35s var(--ease-out),filter .35s;
  animation:rise .7s calc(.18s + var(--i) * .09s) var(--ease-out) backwards;
  -webkit-tap-highlight-color:transparent;
}
.card.tracking{transition:transform .12s linear,translate .35s var(--ease-out),box-shadow .35s var(--ease-out),filter .35s}
/* inner sheen + border ring */
.card:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#ffffff26,transparent 38%,#00000026);}
.card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px #ffffff2a;transition:box-shadow .35s var(--ease-out)}
.card-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--mx) var(--my),#ffffffd0 0,#ffffff00 45%);transition:opacity .35s}
.card:hover{translate:0 -6px;filter:brightness(1.06) saturate(1.05);box-shadow:0 22px 38px #4a2e1066,inset 0 1px 0 #ffffff50,inset 0 -2px 0 #00000025}
.card:hover .card-shine{opacity:1}
.card:active{translate:0 -2px;transition-duration:.12s}
.card:focus-visible{outline:3px solid #fff6c0;outline-offset:3px}

.card.active{translate:0 -4px;box-shadow:0 0 0 3px #ffe7a4,0 0 28px 4px #ffe28a80,0 18px 34px #4a2e1066}
.card.active:after{box-shadow:inset 0 0 0 1.5px #fff8d8aa}
.check{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;z-index:3;
  background:linear-gradient(180deg,#fff7cf,#ffd650);box-shadow:0 2px 6px #00000040;
  scale:0;opacity:0;transition:scale .35s var(--ease-spring),opacity .2s}
.check:before{content:"";position:absolute;left:8.5px;top:5px;width:5px;height:10px;border:solid #5b3a0a;border-width:0 2.5px 2.5px 0;rotate:45deg}
.card.active .check{scale:1;opacity:1}

.card strong{position:relative;z-index:1;font-size:clamp(13px,1.7vw,18px);line-height:1.2;font-weight:900;letter-spacing:.3px;
  text-shadow:0 2px 6px #3a200a66}
.violet{background:linear-gradient(150deg,#4b0e8c,#8137a2 52%,#5e2475)}
.bronze{background:linear-gradient(150deg,#8f5a1b,#c99540 50%,#7a4b1a)}
.orange{background:linear-gradient(150deg,#9e440d,#e08a2e 54%,#9a4513)}

/* ============ Artwork ============ */
.visual{position:relative;z-index:1;height:200px;width:100%;display:flex;align-items:center;justify-content:center}
.halo{position:absolute;left:50%;top:50%;width:78%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,#fff6c766 0,#ffe28a22 40%,transparent 70%);animation:pulse 4.5s ease-in-out infinite}
.violet .halo{background:radial-gradient(circle,#d6b8ff66 0,#b48cff22 40%,transparent 70%)}
@keyframes pulse{50%{scale:1.08;opacity:.75}}

.visual img{display:block;user-select:none;-webkit-user-drag:none}
.combo .vb{display:block;width:82%;animation:float 5s ease-in-out infinite;will-change:translate}
.combo .vb img{width:100%;height:auto;filter:drop-shadow(0 10px 10px #1a0f0566) drop-shadow(0 2px 2px #1a0f0540)}
.combo .token-mini{position:absolute;right:2%;bottom:4%;width:36%;height:auto;
  filter:drop-shadow(0 6px 8px #1a0f0580);animation:float 5s -2.5s ease-in-out infinite,spinSoft 14s linear infinite;will-change:translate,rotate}
.combo .plus{position:absolute;right:33%;bottom:24%;z-index:2;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:19px;line-height:1;color:#5b3a0a;background:linear-gradient(180deg,#fffbe6,#ffd650);box-shadow:0 3px 8px #00000050}
.solo .token-art{width:min(88%,215px);height:auto;filter:drop-shadow(0 14px 14px #3a200a70);animation:float 5s ease-in-out infinite;will-change:translate}
@keyframes float{50%{translate:0 -7px}}
@keyframes spinSoft{0%,100%{rotate:-6deg}50%{rotate:6deg}}

.price{position:relative;z-index:1;font-size:15px;font-weight:900;padding:6px 14px;border-radius:20px;background:#00000030;
  box-shadow:inset 0 0 0 1px #ffffff2a;text-shadow:0 1px 3px #3a200a80;transition:background .3s,color .3s}
.card.active .price{background:#fff3c4;color:#3a240a;text-shadow:none}

/* ============ Bottom bar ============ */
.bottom-price{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;justify-content:center;gap:22px;margin:30px auto 0;
  background:#5e3b14c4;border:1px solid #fff4c040;border-radius:16px;padding:14px 14px 14px 20px;max-width:540px;
  backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:0 14px 32px #3a220a55,inset 0 1px 0 #ffffff25;animation:rise .7s .5s var(--ease-out) backwards}
.bottom-price span{flex:1;text-align:left;font-size:13px;font-weight:800;transition:opacity .2s,transform .2s var(--ease-out)}
.bottom-price span.swap{opacity:0;transform:translateY(4px)}
.bottom-price b{font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.bottom-price button,#done{border:0;border-radius:10px;background:linear-gradient(180deg,#3cbaf5,#1f93d6);color:#fff;font-weight:900;
  padding:13px 26px;cursor:pointer;box-shadow:0 4px 12px #0b5f9466,inset 0 1px 0 #ffffff50;
  transition:transform .15s var(--ease-out),filter .15s,box-shadow .2s}
.bottom-price button:hover,#done:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 8px 18px #0b5f9477,inset 0 1px 0 #ffffff50}
.bottom-price button:active,#done:active{transform:translateY(1px) scale(.97)}

/* ============ Dialog ============ */
.veil{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:#000000a0;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .28s var(--ease-out)}
.veil[hidden]{display:none}
.veil.open{opacity:1}
.dialog{width:min(100%,360px);min-height:170px;background:#1d1e24;border:1px solid #30313a;border-radius:12px;box-shadow:0 20px 60px #000a;
  text-align:center;padding:31px 25px 22px;transform:translateY(14px) scale(.96);transition:transform .35s var(--ease-out)}
.veil.open .dialog{transform:none}
.step{animation:stepIn .35s var(--ease-out)}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}}
.spinner{height:26px;width:26px;border-radius:50%;border:2.5px solid #2e5960;border-top-color:#40bce9;margin:0 auto 14px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dialog h2{font-size:14px;margin:0 0 5px;font-weight:800}
.dialog p{font-size:10px;color:#a7a8af;margin:0}
.success-check{width:30px;height:30px;border-radius:50%;border:1px solid #278f67;color:#54d89b;background:#173d30;display:grid;place-items:center;
  margin:0 auto 12px;font-size:15px;animation:pop .45s var(--ease-spring)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.dialog .success-sub{margin:0 0 17px}
.receipt{border:1px solid #30313a;border-radius:6px;padding:7px 10px;margin:0 0 13px;text-align:left}
.receipt div{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #34353d;font-size:10px}
.receipt div:last-child{border:0}
.receipt span{color:#9b9da6}.receipt b{font-weight:700}
#done{width:100%;padding:10px;font-size:12px}
.dialog .demo-note{margin-top:11px;font-size:9px;color:#d7b96d;letter-spacing:.5px}

/* ============ Entrances ============ */
@keyframes rise{from{opacity:0;translate:0 26px}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-10px)}}

/* ============ Responsive ============ */
@media(max-width:600px){
  .store{padding:22px 14px 110px}
  .brand{margin-bottom:28px}.brand-name{font-size:23px}
  .search{height:48px}.search button{padding:0 16px;font-size:13px}.search input{font-size:14px}
  .cards{gap:9px}
  .card{height:268px;padding:26px 6px 13px;border-radius:13px}
  .card strong{font-size:clamp(9px,2.6vw,13px)}
  .visual{height:150px}
  .combo .vb{width:100%;margin-top:-18px}
  .combo .token-mini{width:46%;right:-2%;bottom:10%}
  .combo .plus{width:20px;height:20px;font-size:15px;right:40%;bottom:24%}
  .demo-ribbon{left:50%;right:auto;translate:-50% 0;top:8px;white-space:nowrap}
  .store{padding-top:46px}
  .price{font-size:11px;padding:4px 9px}
  .check{width:16px;height:16px;top:6px;right:6px}.check:before{left:5.5px;top:2.5px;width:4px;height:8px;border-width:0 2px 2px 0}
  .hint{margin-bottom:30px}
  .bottom-price{gap:12px;padding:11px 11px 11px 14px;bottom:10px}
  .bottom-price span{font-size:10px}.bottom-price b{font-size:15px}
  .bottom-price button{padding:11px 15px;font-size:12px}
}
@media(max-width:360px){
  .cards{grid-template-columns:1fr;max-width:260px;margin:auto}
  .card{height:290px}.card strong{font-size:14px}.visual{height:175px}.price{font-size:13px}
}

/* Respect users who prefer less motion */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .bg-glow{display:none}
}