/* ============================================================
   pixvenn — designer blind-box boutique
   Design system & site styles
   Clean near-white canvas · Morandi dusty blue + champagne accent
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:#FFFCF7;
  --surface:#FFFFFF;
  --surface-2:#FFF1E4;
  --ink:#17131A;
  --ink-2:#493F4A;
  --muted:#7A6E7C;
  --muted-2:#96899A;
  --line:#F2E6DE;
  --line-2:#FBF2EC;

  /* primary pop — juicy candy pink (buttons / highlights / key labels) */
  --accent:#2E8FA0;
  --accent-ink:#1B6373;
  --accent-soft:#DCF2F5;
  --accent-soft-2:#EEF9FA;

  /* secondary pop — warm mango orange */
  --brand:#F5A03C;
  --brand-ink:#8B5210;
  --brand-soft:#FFEBD2;

  /* large light blocks (kept pale so big areas stay airy) */
  --sky:#7FC7EE;     --sky-ink:#1B6A92;    --sky-soft:#DEF1FC;
  --butter:#FFDE7A;  --butter-ink:#7E5C0C; --butter-soft:#FFF4CE;
  --lime:#C6DA4E;    --lime-ink:#566A0C;   --lime-soft:#F0F7CF;
  --teal:#4FC3B4;    --teal-ink:#1B7268;   --teal-soft:#DBF5F1;
  --taro:#D9C2EE;    --taro-ink:#6B4E8E;   --taro-soft:#F3ECFB;

  /* category tints — pink / sky / lime / butter */
  --c-plush:#F585AC;
  --c-box:#7FC7EE;
  --c-fig:#C6DA4E;
  --c-sq:#FFD86B;

  --star:#F2A93B;
  --ok:#2C8FB8;
  --warn:#8B6BB5;

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:32px;
  --pill:999px;

  --shadow-xs:0 1px 2px rgba(20,26,34,.04);
  --shadow-sm:0 2px 10px rgba(20,26,34,.05);
  --shadow:0 10px 30px rgba(20,26,34,.07);
  --shadow-lg:0 24px 60px rgba(20,26,34,.10);

  --maxw:1240px;
  --gut:clamp(20px,4vw,56px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,.14,.2,1);
  --t-fast:.28s var(--ease);
  --t:.45s var(--ease);
  --t-slow:.8s var(--ease);

  --font:'Plus Jakarta Sans','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.62;font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent-soft);color:var(--ink)}

/* ---------- typography ---------- */
.h-display{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.04;letter-spacing:-.03em;font-weight:600}
h1,.h1{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:-.025em;font-weight:600}
h2,.h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.14;letter-spacing:-.02em;font-weight:600}
h3,.h3{font-size:1.22rem;line-height:1.3;letter-spacing:-.01em;font-weight:600}
.lead{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--ink-2);font-weight:400;line-height:1.7}
.muted{color:var(--muted)}
.tiny{font-size:.78rem;letter-spacing:.02em}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);font-weight:700}
.serif-num{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap-wide{max-width:1480px;margin:0 auto;padding:0 var(--gut)}
section{position:relative}
.sec{padding:clamp(56px,9vw,120px) 0}
.sec-sm{padding:clamp(36px,5vw,64px) 0}
.stack>*+*{margin-top:var(--s,16px)}
.row{display:flex;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between;gap:24px}
.grid{display:grid;gap:clamp(16px,2.4vw,30px)}
.center{text-align:center}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* section head */
.sec-head{max-width:660px}
.sec-head.center{margin:0 auto}
.sec-head .eyebrow{display:block;margin-bottom:14px}
.sec-head h2+.lead{margin-top:14px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:var(--pill);font-weight:600;font-size:.95rem;
  letter-spacing:.005em;transition:transform var(--t),background var(--t),color var(--t),box-shadow var(--t),border-color var(--t);
  white-space:nowrap;border:1px solid transparent;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:linear-gradient(135deg,#F7DA84,#E0A63C);color:#4A3208;box-shadow:0 8px 20px rgba(224,166,60,.34)}
.btn-primary:hover{background:linear-gradient(135deg,#F3CF6C,#D69A2E);transform:translateY(-2px);box-shadow:0 14px 30px rgba(224,166,60,.44)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface);border-color:var(--muted-2);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-lg{padding:17px 34px;font-size:1rem}
.btn-block{width:100%}
.btn-sm{padding:10px 18px;font-size:.85rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color var(--t),gap var(--t)}
.link-arrow:hover{border-color:var(--ink);gap:12px}

/* ---------- pills / tags ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--pill);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--surface-2);color:var(--ink-2)}
.tag-sale{background:var(--brand-soft);color:var(--brand-ink)}
.tag-live{background:var(--sky-soft);color:var(--sky-ink)}
.tag-pre{background:var(--taro-soft);color:var(--taro-ink)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- announce bar ---------- */
.announce{
  background:#0E0C12;color:#FFFFFF;text-align:center;
  font-size:.78rem;letter-spacing:.06em;padding:9px 16px;font-weight:500;
}
.announce b{font-weight:700;color:#fff}
.announce .ann-track{display:flex;gap:42px;justify-content:center;flex-wrap:wrap}
.announce span{opacity:.9}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:70;background:#121016;border-bottom:1px solid #241E28;transition:box-shadow var(--t)}
.site-header.scrolled{box-shadow:0 8px 26px rgba(10,8,12,.22)}
.nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(10px,2vw,30px);height:76px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.28rem;letter-spacing:-.02em;color:#FFF}
.brand .mark{width:30px;height:30px;border-radius:11px;background:linear-gradient(145deg,#A9D4E4,#5FB4C4);display:grid;place-items:center;box-shadow:0 6px 16px rgba(227,63,118,.45)}
.brand .mark svg{width:17px;height:17px;color:#FFF}
.brand small{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:#9C8F9E;font-weight:600;display:block;margin-top:-4px}
.nav-links{display:flex;align-items:center;justify-content:center;gap:2px;min-width:0}
.nav-links a{padding:9px 14px;border-radius:var(--pill);font-size:.9rem;font-weight:500;color:#C7BBC9;white-space:nowrap;transition:background var(--t),color var(--t),transform var(--t)}
.nav-links a:hover{background:#241E28;color:#FFF}
.nav-links a.active{color:#FFF;font-weight:700}
.nav-links a.active::after{content:"";display:block;height:2px;width:16px;background:var(--accent);border-radius:2px;margin:3px auto -3px}
.nav-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.icon-btn{width:42px;height:42px;border-radius:var(--pill);display:grid;place-items:center;color:#C7BBC9;position:relative;transition:background var(--t),color var(--t),transform var(--t)}
.icon-btn:hover{background:#241E28;color:#FFF;transform:translateY(-1px)}
.icon-btn svg{width:20px;height:20px}
.cart-count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:.66rem;font-weight:700;display:grid;place-items:center;line-height:1;transform:scale(0);transition:transform var(--t)}
.cart-count.on{transform:scale(1)}
.nav-burger{display:none}
@media(max-width:940px){
  .nav-links{position:fixed;inset:76px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:2px;padding:14px var(--gut) 22px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:all var(--t)}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:14px 12px;font-size:1.02rem}
  .nav-burger{display:grid}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-canvas{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 80% at 50% 8%,transparent 40%,rgba(255,252,247,.6) 100%)}
.hero-inner{min-height:min(88vh,860px);display:flex;flex-direction:column;justify-content:center;padding:clamp(70px,11vw,140px) 0 clamp(60px,9vw,110px)}
.hero h1{max-width:15ch}
.hero .lead{max-width:52ch;margin-top:22px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.hero-meta{display:flex;gap:clamp(20px,4vw,52px);margin-top:clamp(40px,6vw,72px);flex-wrap:wrap}
.hero-meta div{max-width:180px}
.hero-meta strong{display:block;font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.hero-meta span{font-size:.82rem;color:var(--muted)}
.hero-float{position:absolute;right:var(--gut);bottom:8%;width:min(340px,38vw);opacity:0;transform:translateY(24px);animation:rise 1.4s var(--ease) 1s forwards;pointer-events:none}
@media(max-width:940px){.hero-float{position:static;width:min(300px,70vw);margin-top:40px}}

/* light fluid blobs for non-canvas fallback */
.fluid{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-2;pointer-events:none}
.f1{width:46vw;height:46vw;background:#DFF3F7;top:-14%;left:-8%;animation:drift1 26s var(--ease-soft) infinite}
.f2{width:40vw;height:40vw;background:#DEF1FC;top:6%;right:-10%;animation:drift2 32s var(--ease-soft) infinite}
.f3{width:44vw;height:44vw;background:#FFF4CE;bottom:-24%;left:32%;animation:drift3 38s var(--ease-soft) infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vw) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,6vw) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-5vw) scale(1.1)}}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- reveal on scroll (only when JS is running) ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}.js .reveal.d4{transition-delay:.32s}

/* ---------- category rail ---------- */
.cat-rail{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x proximity;scrollbar-width:none}
.cat-rail::-webkit-scrollbar{display:none}
.cat-chip{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:10px;padding:11px 20px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:.9rem;color:var(--ink-2);transition:all var(--t)}
.cat-chip .swatch{width:16px;height:16px;border-radius:50%}
.cat-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.cat-chip.active{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}

/* ---------- carousel ---------- */
.carousel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.carousel-head p{color:var(--muted);font-size:.95rem;margin-top:8px;max-width:46ch}
.rail-nav{display:flex;gap:10px}
.rail-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;transition:all var(--t)}
.rail-btn:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.rail-btn svg{width:18px;height:18px}
.rail-btn:disabled{opacity:.35;transform:none;cursor:not-allowed}
.rail-viewport{overflow:hidden;margin:0 calc(-1 * var(--gut));padding:0 var(--gut)}
.rail-track{display:flex;gap:clamp(16px,1.8vw,26px);transition:transform .7s var(--ease);will-change:transform}
.rail-track>*{flex:0 0 calc((100% - 3 * clamp(16px,1.8vw,26px)) / 4);min-width:0}
@media(max-width:1080px){.rail-track>*{flex-basis:calc((100% - 2 * clamp(16px,1.8vw,26px)) / 3)}}
@media(max-width:760px){.rail-track>*{flex-basis:calc((100% - clamp(16px,1.8vw,26px)) / 2)}}
@media(max-width:460px){.rail-track>*{flex-basis:82%}}

/* ---------- product card ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line-2)}
.card-media{position:relative;aspect-ratio:1/1;background:var(--surface-2);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card-media img{transform:scale(1.045)}
.card-badges{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.card-fav{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.86);backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--ink-2);transition:all var(--t)}
.card-fav:hover{color:var(--accent);transform:scale(1.06)}
.card-fav.on{color:var(--accent)}
.card-fav svg{width:18px;height:18px}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-title{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;line-height:1.28}
.card-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.chip-mini{font-size:.72rem;color:var(--muted);background:var(--surface-2);padding:3px 10px;border-radius:var(--pill)}
.price-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.price{font-size:1.16rem;font-weight:700;letter-spacing:-.01em}
.price-cmp{font-size:.88rem;color:var(--muted-2);text-decoration:line-through}
.price-save{font-size:.72rem;font-weight:700;color:var(--brand-ink);background:var(--brand-soft);padding:2px 9px;border-radius:var(--pill)}
.card-actions{display:flex;gap:9px;margin-top:14px}
.card-actions .btn{flex:1;padding:12px 14px;font-size:.88rem}
.stars{display:inline-flex;align-items:center;gap:2px;color:var(--star);font-size:.86rem;line-height:1}
.stars-track{position:relative;display:inline-block;color:#F2E6DE;letter-spacing:2px;line-height:1;white-space:nowrap}
.stars-fill{position:absolute;top:0;left:0;bottom:0;overflow:hidden;white-space:nowrap;color:var(--star)}
.stars .num{color:var(--ink-2);font-weight:600;letter-spacing:0;margin-left:6px;font-size:.84rem}
.stars .cnt{color:var(--muted);font-weight:400;margin-left:4px;font-size:.8rem}

/* ---------- trust badges ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
.trust{display:flex;gap:13px;align-items:flex-start;padding:16px 17px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.trust .ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;color:var(--accent-ink)}
.trust .ic svg{width:19px;height:19px}
.trust b{display:block;font-size:.86rem;font-weight:600;line-height:1.3}
.trust span{font-size:.78rem;color:var(--muted);line-height:1.4;display:block;margin-top:2px}
.trust.trust-inline{border:0;background:transparent;padding:0}

/* ---------- panels / feature rows ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,38px)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.split.rev .split-media{order:2}
@media(max-width:900px){.split.rev .split-media{order:0}}
.split-media{border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.feat-list{display:flex;flex-direction:column;gap:22px;margin-top:30px}
.feat{display:flex;gap:16px}
.feat .n{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.82rem;font-weight:700;color:var(--accent-ink);background:var(--surface)}
.feat b{display:block;font-weight:600;letter-spacing:-.01em}
.feat p{color:var(--muted);font-size:.92rem;margin-top:3px}

/* ---------- marquee strip ---------- */
.strip{display:flex;gap:56px;overflow:hidden;white-space:nowrap;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--accent-soft-2)}
.strip .track{display:flex;gap:56px;animation:marq 34s linear infinite}
.strip span{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;display:inline-flex;align-items:center;gap:14px}
.strip span::after{content:"◆";font-size:.5rem;color:var(--accent)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- product detail ---------- */
.crumbs{font-size:.82rem;color:var(--muted);display:flex;gap:8px;align-items:center;padding:22px 0}
.crumbs a:hover{color:var(--ink)}
.pd{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.5vw,72px);align-items:start}
@media(max-width:920px){.pd{grid-template-columns:1fr}}
.gallery-main{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);aspect-ratio:1/1;position:relative}
.gallery-main img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gallery-main:hover img{transform:scale(1.05)}
.gallery-thumbs{display:flex;gap:12px;margin-top:14px}
.gallery-thumbs button{width:76px;height:76px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);transition:border-color var(--t),transform var(--t)}
.gallery-thumbs button:hover{transform:translateY(-2px)}
.gallery-thumbs button.active{border-color:var(--ink)}
.pd-info h1{font-size:clamp(1.7rem,3vw,2.3rem)}
.pd-rating{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:.88rem;color:var(--muted)}
.pd-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:20px 0 4px}
.pd-price .price{font-size:1.85rem}
.pd-desc{color:var(--ink-2);margin-top:16px;font-size:.98rem;line-height:1.72}
.opt-block{margin-top:24px}
.opt-block>label{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:10px}
.opt-row{display:flex;gap:10px;flex-wrap:wrap}
.opt{padding:11px 18px;border:1px solid var(--line);border-radius:var(--pill);font-size:.9rem;font-weight:500;background:var(--surface);transition:all var(--t)}
.opt:hover{border-color:var(--muted-2)}
.opt.active{border-color:var(--ink);background:var(--ink);color:#fff}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);overflow:hidden}
.qty button{width:44px;height:48px;font-size:1.2rem;color:var(--ink-2);transition:background var(--t)}
.qty button:hover{background:var(--surface-2)}
.qty input{width:44px;height:48px;text-align:center;border:0;background:transparent;font-weight:600;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy-row{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.buy-row .btn{flex:1;min-width:180px}
.pd-trust{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.pd-notes{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:.82rem;color:var(--muted)}
.pd-notes span{display:inline-flex;align-items:center;gap:7px}
.pd-notes svg{width:15px;height:15px;color:var(--ok)}

/* accordion */
.acc{margin-top:30px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:20px 4px;display:flex;align-items:center;justify-content:space-between;font-weight:600;letter-spacing:-.01em}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{position:relative;width:14px;height:14px;flex:0 0 auto}
.acc summary .pm::before,.acc summary .pm::after{content:"";position:absolute;background:var(--ink-2);border-radius:2px;transition:transform var(--t)}
.acc summary .pm::before{left:6px;top:0;width:2px;height:14px}
.acc summary .pm::after{left:0;top:6px;width:14px;height:2px}
.acc details[open] summary .pm::before{transform:scaleY(0)}
.acc .acc-body{padding:0 4px 22px;color:var(--ink-2);font-size:.94rem;line-height:1.75}
.acc .acc-body p+p{margin-top:12px}

/* ---------- reviews ---------- */
.reviews-head{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end;margin-bottom:34px}
.rating-summary{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.rating-big{font-size:3.4rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.bars{display:flex;flex-direction:column;gap:7px;min-width:220px}
.bar-row{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted)}
.bar-row .track{flex:1;height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.bar-row .fill{height:100%;background:var(--star);border-radius:6px;transition:width 1s var(--ease)}
.review-list{display:grid;gap:18px}
.review{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--surface);transition:box-shadow var(--t)}
.review:hover{box-shadow:var(--shadow-sm)}
.review-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.reviewer{display:flex;gap:12px;align-items:center}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;font-size:.95rem;letter-spacing:0}
.reviewer b{font-size:.94rem;font-weight:600;display:block}
.reviewer span{font-size:.76rem;color:var(--muted)}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);padding:4px 10px;border-radius:var(--pill)}
.verified svg{width:12px;height:12px}
.review-body{margin-top:14px;color:var(--ink-2);font-size:.94rem;line-height:1.7}
.review-photo{margin-top:14px;width:96px;height:96px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.review-foot{margin-top:14px;display:flex;gap:18px;align-items:center;font-size:.8rem;color:var(--muted)}
.review-foot button{display:inline-flex;gap:6px;align-items:center;color:var(--muted);transition:color var(--t)}
.review-foot button:hover{color:var(--accent-ink)}
.review-foot svg{width:15px;height:15px}
.review.critical{border-left:3px solid var(--warn)}
.review-write{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);margin-top:26px}
.star-input{display:inline-flex;gap:4px}
.star-input button{font-size:1.7rem;line-height:1;color:var(--line);transition:color var(--t),transform var(--t)}
.star-input button.on{color:var(--star)}
.star-input button:hover{transform:scale(1.12)}
.field{margin-top:16px}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:7px;color:var(--ink-2)}
.input,.textarea,.select{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);transition:border-color var(--t),box-shadow var(--t)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.textarea{min-height:120px;resize:vertical;line-height:1.6}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.filter-row .opt{font-size:.84rem;padding:9px 15px}

/* ---------- cart ---------- */
.cart-layout{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(24px,3.5vw,52px);align-items:start}
@media(max-width:920px){.cart-layout{grid-template-columns:1fr}}
.cart-line{display:grid;grid-template-columns:100px 1fr auto;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);align-items:center}
.cart-line .thumb{width:100px;height:100px;border-radius:14px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.cart-line .thumb img{width:100%;height:100%;object-fit:cover}
.cart-line h4{font-size:1rem;font-weight:600}
.cart-line .meta{font-size:.82rem;color:var(--muted);margin-top:3px}
.cart-line .line-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.remove-link{font-size:.8rem;color:var(--muted);border-bottom:1px solid transparent;transition:color var(--t)}
.remove-link:hover{color:var(--accent-ink)}
.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;position:sticky;top:96px}
.summary h3{margin-bottom:18px}
.summary .trust-grid{grid-template-columns:1fr;gap:10px}
.summary .trust{padding:13px 14px}
.sum-row{display:flex;justify-content:space-between;padding:9px 0;font-size:.94rem;color:var(--ink-2)}
.sum-row.total{border-top:1px solid var(--line);margin-top:12px;padding-top:16px;font-size:1.16rem;font-weight:700;color:var(--ink)}
.mini-bar{height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden;margin:10px 0 6px}
.mini-bar .fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--accent));border-radius:8px;transition:width .8s var(--ease)}
.ship-note{font-size:.85rem;color:var(--ink-2);background:var(--accent-soft);border:1px solid #FFCFE0;border-radius:12px;padding:12px 14px;margin-bottom:16px;display:flex;gap:10px;align-items:center}
.ship-note svg{width:17px;height:17px;color:var(--accent-ink);flex:0 0 auto}
.promo-row{display:flex;gap:10px;margin-top:16px}
.empty-state{text-align:center;padding:clamp(50px,8vw,110px) 0}
.empty-state .ic{width:74px;height:74px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;margin:0 auto 20px;color:var(--muted)}
.empty-state .ic svg{width:34px;height:34px}

/* ---------- checkout ---------- */
.checkout-layout{display:grid;grid-template-columns:1.35fr .95fr;gap:clamp(24px,3.5vw,56px);align-items:start}
@media(max-width:920px){.checkout-layout{grid-template-columns:1fr}}
.steps{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 30px}
.step{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--muted);font-weight:500}
.step .c{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.76rem;font-weight:700;background:var(--surface)}
.step.done .c{background:var(--ok);color:#fff;border-color:var(--ok)}
.step.done{color:var(--ink-2)}
.step.active{color:var(--ink)}
.step.active .c{background:var(--ink);color:#fff;border-color:var(--ink)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.field-2{grid-template-columns:1fr}}
.pay-methods{display:grid;gap:12px;margin-top:8px}
.pay-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;transition:border-color var(--t),background var(--t)}
.pay-opt:hover{border-color:var(--muted-2)}
.pay-opt.active{border-color:var(--ink);background:var(--bg)}
.pay-opt .radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--muted-2);flex:0 0 auto;display:grid;place-items:center;transition:border-color var(--t)}
.pay-opt.active .radio{border-color:var(--accent);border-width:5px}
.pay-opt .pname{font-weight:600;font-size:.94rem}
.pay-opt .pdesc{font-size:.78rem;color:var(--muted)}
.pay-logos{display:flex;gap:7px;margin-left:auto;align-items:center}
.pay-logos span{height:24px;padding:0 9px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;font-size:.6rem;font-weight:700;letter-spacing:.03em;color:var(--ink-2);background:#fff}
.bundle-list{display:grid;gap:12px}
.bundle{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:border-color var(--t)}
.bundle:hover{border-color:var(--muted-2)}
.bundle .b-img{width:62px;height:62px;border-radius:12px;overflow:hidden;background:var(--surface-2);flex:0 0 auto;border:1px solid var(--line)}
.bundle .b-img img{width:100%;height:100%;object-fit:cover}
.bundle b{font-size:.9rem;font-weight:600;display:block;line-height:1.3}
.bundle .price{font-size:.92rem;margin-top:3px}
.bundle .btn{margin-left:auto;flex:0 0 auto}

/* ---------- loyalty ---------- */
.member-hero{background:linear-gradient(160deg,#FFEAF2 0%,#FFFCF7 60%);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(26px,4vw,54px);position:relative;overflow:hidden}
.member-hero::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--brand-soft),transparent 70%);opacity:.8}
.points-card{display:flex;gap:clamp(24px,4vw,60px);align-items:center;flex-wrap:wrap;position:relative;z-index:1}
.points-num{font-size:clamp(2.6rem,5vw,3.8rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.tier-track{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px;position:relative}
@media(max-width:760px){.tier-track{grid-template-columns:1fr}}
.tier{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:var(--surface);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.tier.current{border-color:var(--accent);box-shadow:0 12px 32px rgba(227,63,118,.22)}
.tier .badge{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:var(--pill);background:var(--surface-2);color:var(--ink-2);margin-bottom:14px}
.tier.current .badge{background:var(--accent-soft);color:var(--accent-ink)}
.tier h3{margin-bottom:6px}
.tier .req{font-size:.82rem;color:var(--muted);margin-bottom:16px}
.tier ul{display:grid;gap:10px}
.tier li{display:flex;gap:9px;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.tier li svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:var(--ok)}
.earn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.earn-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.earn-grid{grid-template-columns:1fr}}
.earn{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:var(--surface);transition:transform var(--t),box-shadow var(--t)}
.earn:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.earn .ic{width:44px;height:44px;border-radius:13px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;margin-bottom:16px}
.earn .ic svg{width:22px;height:22px}
.earn b{font-size:1.02rem;font-weight:600;display:block}
.earn p{font-size:.88rem;color:var(--muted);margin-top:6px;line-height:1.55}
.earn .pts{margin-top:14px;font-size:.82rem;font-weight:700;color:var(--accent-ink);letter-spacing:.02em}
.redeem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.redeem-grid{grid-template-columns:1fr}}
.redeem{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:var(--surface);display:flex;flex-direction:column;gap:12px;transition:transform var(--t),box-shadow var(--t)}
.redeem:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.redeem .cost{font-size:.8rem;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);padding:5px 12px;border-radius:var(--pill);align-self:flex-start}
.redeem h3{font-size:1.12rem}
.redeem p{font-size:.9rem;color:var(--muted);line-height:1.6;flex:1}
.redeem .btn{margin-top:6px}
.set-progress{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.set-slot{width:52px;height:52px;border-radius:13px;border:1px dashed var(--line);display:grid;place-items:center;font-size:.8rem;color:var(--muted-2);background:var(--surface);transition:all var(--t)}
.set-slot.have{border-style:solid;border-color:#7EC4CF;background:#DFF3F7;color:var(--accent-ink);font-weight:700}
.set-slot.hidden-slot{border-style:dashed;border-color:var(--accent);color:var(--accent-ink)}
.streak{display:flex;gap:9px;flex-wrap:wrap}
.day{width:46px;height:46px;border-radius:13px;border:1px solid var(--line);display:grid;place-items:center;font-size:.8rem;font-weight:600;background:var(--surface);color:var(--muted);transition:all var(--t)}
.day.done{background:var(--ink);color:#fff;border-color:var(--ink)}
.day.today{border-color:var(--accent);color:var(--accent-ink)}
.checkin-btn{dock}

/* ---------- blind box machine ---------- */
.machine{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:900px){.machine{grid-template-columns:1fr}}
.machine-stage{border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(165deg,#F7F4EF,#FBF9F6);min-height:440px;display:grid;place-items:center;padding:36px;position:relative;overflow:hidden}
.machine-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 40%,rgba(255,255,255,.9),transparent 70%);pointer-events:none}
.capsule{width:min(240px,60%);aspect-ratio:1;position:relative;z-index:1;transition:transform .4s var(--ease)}
.capsule.shaking{animation:shake 1.5s var(--ease-soft) infinite}
@keyframes shake{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-9deg) translateY(-6px)}40%{transform:rotate(8deg) translateY(-10px)}60%{transform:rotate(-6deg) translateY(-4px)}80%{transform:rotate(5deg) translateY(-8px)}}
.capsule.opening{animation:pop .9s var(--ease) forwards}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.14) rotate(6deg)}70%{transform:scale(.94)}100%{transform:scale(1)}}
.reveal-card{text-align:center;animation:rise .8s var(--ease) both}
.reveal-card .thumb{width:min(220px,70%);margin:0 auto 18px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.machine-panel{display:flex;flex-direction:column;gap:18px}
.series-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.series-opt{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);cursor:pointer;transition:all var(--t)}
.series-opt:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.series-opt.active{border-color:var(--ink);box-shadow:var(--shadow-sm)}
.series-opt img{width:100%;aspect-ratio:16/10;object-fit:cover}
.series-opt .cap{padding:11px 13px;font-size:.86rem;font-weight:600}
.series-opt .cap span{display:block;font-size:.74rem;color:var(--muted);font-weight:400;margin-top:2px}
.odds{display:grid;gap:10px}
.odds-row{display:flex;align-items:center;gap:12px;font-size:.86rem}
.odds-row .lbl{width:104px;flex:0 0 auto;color:var(--ink-2)}
.odds-row .track{flex:1;height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.odds-row .fill{height:100%;border-radius:6px;background:var(--muted-2)}
.odds-row.secret .fill{background:linear-gradient(90deg,var(--c-plush),var(--brand))}
.odds-row .pc{width:42px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.pull-log{border-top:1px solid var(--line);padding-top:16px;margin-top:6px}
.pull-log .item{display:flex;justify-content:space-between;font-size:.84rem;padding:7px 0;color:var(--ink-2)}
.pull-log .item span:last-child{color:var(--muted)}
.badge-rare{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--pill);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(120deg,var(--accent-soft),var(--sky-soft));color:var(--accent-ink)}
.badge-normal{background:var(--surface-2);color:var(--ink-2)}

/* ---------- footer ---------- */
.site-footer{margin-top:clamp(60px,9vw,120px);border-top:1px solid var(--line);background:linear-gradient(180deg,#FFF3E6,#FFE9F1)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px);padding:clamp(46px,7vw,86px) 0 42px}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}
.foot-col h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:16px}
.foot-col a{display:block;padding:5px 0;font-size:.92rem;color:var(--ink-2);transition:color var(--t),padding var(--t)}
.foot-col a:hover{color:var(--accent-ink);padding-left:4px}
.foot-brand p{color:var(--muted);font-size:.92rem;max-width:34ch;margin-top:16px;line-height:1.65}
.newsletter{display:flex;gap:8px;margin-top:18px;max-width:340px}
.newsletter .input{flex:1}
.foot-bottom{border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;font-size:.82rem;color:var(--muted)}
.foot-pay{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.foot-pay span{height:26px;padding:0 10px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;font-size:.62rem;font-weight:700;letter-spacing:.04em;background:#fff;color:var(--ink-2)}
.foot-badges{display:flex;gap:18px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.foot-badges span{display:inline-flex;gap:7px;align-items:center}
.foot-badges svg{width:14px;height:14px;color:var(--ok)}

/* ---------- misc ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);background:var(--ink);color:#fff;padding:14px 22px;border-radius:var(--pill);font-size:.9rem;font-weight:500;box-shadow:var(--shadow-lg);z-index:200;transition:transform .5s var(--ease);display:flex;align-items:center;gap:10px;max-width:90vw}
.toast.on{transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;color:#FFDE7A}
.scrim{position:fixed;inset:0;background:rgba(20,26,34,.42);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity var(--t);z-index:150}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,92vw);background:var(--bg);z-index:160;transform:translateX(102%);transition:transform .5s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.drawer.on{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.drawer-body{flex:1;overflow-y:auto;padding:8px 24px}
.drawer-foot{padding:22px 24px;border-top:1px solid var(--line);background:var(--surface)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:300}
.skip-link:focus{left:0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}

/* ============================================================
   Home hero — full-screen video carousel + assurance bar
   ============================================================ */
.hero-video{position:relative;height:min(100svh,940px);min-height:560px;overflow:hidden;isolation:isolate;background:var(--bg)}
.hero-video:focus-visible{outline:2px solid var(--accent);outline-offset:-5px}
.hero-video .hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hv-track{position:absolute;inset:0;z-index:1}
.hv-slide{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.045);transition:opacity 1.15s var(--ease),transform 2.4s var(--ease);will-change:opacity,transform}
.hv-slide.is-active{opacity:1;transform:scale(1)}
.hv-media{width:100%;height:100%;object-fit:cover;display:block;background:var(--bg)}
.hv-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(to top,rgba(255,252,247,.97) 0%,rgba(255,252,247,.82) 16%,rgba(255,252,247,.30) 42%,rgba(255,252,247,0) 66%),
  linear-gradient(to right,rgba(255,252,247,.74) 0%,rgba(255,252,247,0) 44%)}
.hv-content{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-bottom:clamp(38px,6vw,78px)}
.hv-copy{max-width:min(620px,56vw)}
.hv-title{font-size:clamp(1.85rem,3.4vw,2.85rem);line-height:1.1;letter-spacing:-.025em;font-weight:600;margin-top:14px}
.hv-lead{max-width:46ch;margin-top:14px}
.hv-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hv-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:transform var(--t),background var(--t),box-shadow var(--t)}
.hv-arrow svg{width:18px;height:18px}
.hv-arrow:hover{background:#fff;box-shadow:var(--shadow);transform:translateY(-50%) scale(1.06)}
.hv-prev{left:clamp(12px,2.4vw,30px)}
.hv-next{right:clamp(12px,2.4vw,30px)}
.hv-dots{position:absolute;left:0;right:0;bottom:clamp(16px,2.4vw,30px);z-index:4;display:flex;gap:9px;justify-content:center}
.hv-dot{width:9px;height:9px;border-radius:var(--pill);background:rgba(20,26,34,.2);transition:width .5s var(--ease),background .5s var(--ease)}
.hv-dot:hover{background:rgba(20,26,34,.4)}
.hv-dot.on{width:28px;background:var(--accent)}

.assure{background:var(--accent-soft-2);border-bottom:1px solid var(--line)}
.assure-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.assure-item{display:flex;align-items:center;gap:13px;padding:20px clamp(12px,1.8vw,26px);border-left:1px solid var(--line);min-width:0}
.assure-item:first-child{border-left:0}
.assure-item .ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center}
.assure-item .ic svg{width:19px;height:19px}
.assure-item b{display:block;font-size:.88rem;font-weight:600;line-height:1.28}
.assure-item span{font-size:.76rem;color:var(--muted);line-height:1.35;display:block;margin-top:2px}

@media(max-width:900px){
  .assure-list{grid-template-columns:1fr 1fr}
  .assure-item{border-top:1px solid var(--line)}
  .assure-item:nth-child(-n+2){border-top:0}
  .assure-item:nth-child(odd){border-left:0}
}
@media(max-width:780px){
  .hero-video{height:min(88svh,740px);min-height:480px}
  .hv-copy{max-width:100%}
  .hv-arrow{display:none}
  .hv-content{padding-bottom:58px}
}
@media(max-width:520px){
  .assure-list{grid-template-columns:1fr}
  .assure-item{border-left:0;border-top:1px solid var(--line)}
  .assure-item:first-child{border-top:0}
}
@media(prefers-reduced-motion:reduce){
  .hv-slide{transition:opacity .3s linear;transform:none}
}

/* ============================================================
   Homepage rails — bestseller showcase (loop) + 5-up product rail
   ============================================================ */
.rail-track.rail-loop{
  --g:clamp(14px,1.7vw,24px);
  gap:0;align-items:stretch;
  animation:railScroll var(--rail-dur,72s) linear infinite;will-change:transform}
.rail-track.rail-loop > *{flex:0 0 calc((100% - 4.5 * var(--g)) / 4.5);min-width:0;margin-right:var(--g)}
.rail-viewport:hover .rail-track.rail-loop,.rail-viewport:focus-within .rail-track.rail-loop{animation-play-state:paused}
@keyframes railScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.shot-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.shot-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--accent)}
.shot-media{position:relative;aspect-ratio:1/1;background:var(--surface-2);overflow:hidden}
.shot-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.shot-card:hover .shot-media img{transform:scale(1.05)}
.shot-body{padding:17px 18px 21px}
.shot-body h3{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.shot-body p{margin-top:7px;font-size:.88rem;color:var(--muted);line-height:1.52}
@media(max-width:1080px){.rail-track.rail-loop > *{flex-basis:calc((100% - 3.5 * var(--g)) / 3.5)}}
@media(max-width:760px){.rail-track.rail-loop > *{flex-basis:calc((100% - 2.6 * var(--g)) / 2.6)}}
@media(max-width:480px){.rail-track.rail-loop > *{flex-basis:78%}}

.rail-track.rail-loop.rail-5{--g:clamp(12px,1.4vw,20px)}
.rail-track.rail-5 > *{flex:0 0 calc((100% - 5 * var(--g)) / 5)}
.rail-5 .card-body{padding:14px 15px 16px;gap:6px}
.rail-5 .card-title{font-size:.95rem}
.rail-5 .card-title+.stars,.rail-5 .stars{font-size:.78rem}
.rail-5 .price{font-size:1.05rem}
.rail-5 .card-actions{flex-direction:column;gap:8px;margin-top:12px}
.rail-5 .card-actions .btn{width:100%;padding:10px 12px;font-size:.82rem}
.rail-5 .card-badges{top:10px;left:10px;gap:5px}
.rail-5 .tag{font-size:.64rem;padding:4px 9px}
@media(max-width:1180px){.rail-track.rail-5 > *{flex-basis:calc((100% - 4 * var(--g)) / 4)}}
@media(max-width:900px){.rail-track.rail-5 > *{flex-basis:calc((100% - 3 * var(--g)) / 3)}}
@media(max-width:640px){.rail-track.rail-5 > *{flex-basis:calc((100% - 2 * var(--g)) / 2)}}

/* review rail — every card exactly the same size */
.rail-track.rail-loop.rail-reviews{--g:clamp(14px,1.8vw,24px)}
.rail-track.rail-loop.rail-reviews > *{flex:0 0 calc((100% - 3.5 * var(--g)) / 3.5)}
.rail-reviews .review{height:100%;min-height:300px;display:flex;flex-direction:column;box-sizing:border-box}
.rail-reviews .review-body{flex:1}
.rail-reviews .review-foot{margin-top:auto}
@media(max-width:1080px){.rail-track.rail-loop.rail-reviews > *{flex-basis:calc((100% - 2.5 * var(--g)) / 2.5)}}
@media(max-width:760px){.rail-track.rail-loop.rail-reviews > *{flex-basis:calc((100% - 1.6 * var(--g)) / 1.6)}}

/* ---------- nav region / currency / search control ---------- */
.nav-tools .ctry-ctl{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 6px 0 12px;
  border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--ink-2);
  transition:border-color var(--t),box-shadow var(--t)}
.nav-tools .ctry-ctl:hover{border-color:var(--accent);box-shadow:var(--shadow-xs)}
.ctry-part{display:inline-flex;align-items:center;gap:7px;padding:0 4px;border-radius:10px;font-size:.78rem;
  font-weight:700;letter-spacing:.04em;color:var(--ink-2);transition:color var(--t),background var(--t)}
.ctry-part:hover{color:var(--accent-ink)}
.ctry-ctl .flag{display:block;width:20px;height:14px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(36,31,36,.10)}
.ctry-ctl .flag svg{display:block;width:20px;height:14px}
.ctry-ctl .sep{width:1px;height:16px;background:var(--line);flex:0 0 auto}
.ctry-ctl .chev{width:9px;height:9px;color:var(--muted-2)}
.ctry-ctl .ctl-btn{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2);
  transition:background var(--t),color var(--t)}
.ctry-ctl .ctl-btn:hover{background:var(--accent-soft);color:var(--accent-ink)}
.ctry-ctl .ctl-btn svg{width:16px;height:16px}
@media(max-width:1180px){
  .nav-links a{padding:8px 10px;font-size:.85rem}
  .nav-tools .ctry-ctl{padding:0 4px 0 9px;gap:6px}
  .ctry-ctl .cc{display:none}
}
@media(max-width:940px){
  .nav{grid-template-columns:auto auto;justify-content:space-between}
  .nav-tools .ctry-ctl{height:38px}
}
@media(max-width:520px){ .ctry-ctl .cur{display:none} }

/* ============================================================
   Bold dopamine additions — tints, candy nav, rails, vending machine
   ============================================================ */

/* large light colour blocks */
.tint-pink{background:var(--accent-soft)}
.tint-sky{background:var(--sky-soft)}
.tint-butter{background:var(--butter-soft)}
.tint-lime{background:var(--lime-soft)}
.tint-teal{background:var(--teal-soft)}
.tint-cream{background:var(--surface-2)}

/* cute "candy" nav item (the loyalty / surprise-box entry) */
.nav-links a.candy{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(120deg,#FBE7B0,#F3C55C 55%,#E0A63C);color:#4A3208;font-weight:800;padding:8px 16px;border-radius:var(--pill);box-shadow:0 4px 0 rgba(0,0,0,.22);letter-spacing:.01em}
.nav-links a.candy svg{width:15px;height:15px}
.nav-links a.candy:hover{transform:translateY(-1px);box-shadow:0 6px 0 rgba(0,0,0,.2);color:#3E0A22}
.nav-links a.candy.active{color:#3E0A22}
.nav-links a.candy::after{display:none}

/* header control on the black bar */
.nav-tools .ctry-ctl{background:#1C1721;border-color:#2E2634}
.nav-tools .ctry-ctl:hover{border-color:var(--accent);box-shadow:none}
.ctry-part{color:#CFC4D0}
.ctry-part:hover{color:#FFF}
.ctry-ctl .sep{background:#2E2634}
.ctry-ctl .chev{color:#8C8090}
.ctry-ctl .ctl-btn{color:#CFC4D0}
.ctry-ctl .ctl-btn:hover{background:#2A2230;color:#FFF}

/* reviews + wide rails */
.rail-track.rail-reviews > *{flex:0 0 clamp(268px,27vw,364px);min-width:0}
.rail-track.rail-reviews .review{height:100%}
@media(max-width:760px){.rail-track.rail-reviews > *{flex-basis:82%}}

/* ============================================================
   SURPRISE BOX — candy vending machine
   ============================================================ */
.candy-hero{position:relative;overflow:hidden;border-radius:40px;padding:clamp(26px,4.4vw,56px);
  background:
    radial-gradient(120% 90% at 12% 0%,#EEF9FA 0%,rgba(238,249,250,0) 58%),
    radial-gradient(110% 90% at 88% 10%,#DEF1FC 0%,rgba(222,241,252,0) 60%),
    radial-gradient(120% 100% at 50% 118%,#FFF4CE 0%,rgba(255,244,206,0) 62%),
    #FFFFFF;
  border:1px solid var(--line);box-shadow:0 22px 60px rgba(23,19,26,.07)}
.candy-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%)}

/* frosted candy blobs */
.candy-blob{position:absolute;border-radius:50%;filter:blur(34px);opacity:.62;pointer-events:none}
.cb1{width:190px;height:190px;background:#FFC9DE;left:-40px;top:-30px;animation:floatSlow 13s var(--ease-soft) infinite}
.cb2{width:150px;height:150px;background:#BFE6FA;right:6%;top:-24px;animation:floatSlow 17s var(--ease-soft) infinite reverse}
.cb3{width:170px;height:170px;background:#FFE6A1;right:-30px;bottom:-40px;animation:floatSlow 21s var(--ease-soft) infinite}
.cb4{width:130px;height:130px;background:#C9F0E9;left:14%;bottom:-46px;animation:floatSlow 15s var(--ease-soft) infinite reverse}
@keyframes floatSlow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14px,-18px) scale(1.09)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(227,63,118,.28)}50%{box-shadow:0 0 0 18px rgba(227,63,118,0)}}
@keyframes shimmer{0%{background-position:-220% 0}100%{background-position:220% 0}}
@keyframes popIn{0%{transform:scale(.86);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes riseIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* machine shell */
.machine-shell{border-radius:36px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 26px 70px rgba(23,19,26,.09);padding:clamp(20px,3vw,34px);position:relative;overflow:hidden}
.machine-shell.premium{background:
  radial-gradient(90% 70% at 50% 0%,#FFF0F6 0%,rgba(255,240,246,0) 60%),
  radial-gradient(90% 70% at 100% 100%,#FFF4CE 0%,rgba(255,244,206,0) 55%),#FFFFFF;
  border:2px solid #FFD9E7}
.shell-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.shell-title{display:flex;align-items:center;gap:13px}
.shell-badge{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;flex:0 0 auto}
.shell-badge svg{width:23px;height:23px}
.badge-points{background:linear-gradient(140deg,#FFEFC4,#EFC155);color:#5A3E08}
.badge-paid{background:linear-gradient(140deg,#BFE6FA,#7FC7EE);color:#0E4A68}
.shell-title h3{font-size:1.3rem;letter-spacing:-.01em}
.shell-title p{font-size:.84rem;color:var(--muted);margin-top:3px}
.pill-stat{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:var(--pill);
  background:var(--surface-2);font-size:.82rem;font-weight:700;color:var(--ink-2)}
.pill-stat b{color:var(--accent-ink);font-size:.95rem}

/* stage + capsule */
.stage{position:relative;border-radius:30px;min-height:300px;display:grid;place-items:center;
  background:linear-gradient(165deg,#FFF6FA,#F7FBFF 60%,#FFFBF0);border:1px solid var(--line);overflow:hidden}
.stage::after{content:"";position:absolute;inset:0;background:radial-gradient(58% 46% at 50% 40%,rgba(255,255,255,.9),transparent 72%);pointer-events:none}
.candy-capsule{width:min(216px,52%);aspect-ratio:1;position:relative;z-index:1;transition:transform .5s var(--ease);cursor:pointer;
  animation:glowPulse 4.5s var(--ease-soft) infinite}
.candy-capsule svg{width:100%;height:100%;display:block;filter:drop-shadow(0 16px 26px rgba(23,19,26,.14))}
.candy-capsule:hover{transform:translateY(-6px) scale(1.02)}
.candy-capsule.shaking{animation:shake .5s var(--ease-soft) infinite}
.candy-capsule.bursting{animation:pop .9s var(--ease) forwards}

/* prize grid */
.prize-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.prize{border-radius:22px;border:1px solid var(--line);background:var(--surface);padding:14px;position:relative;
  transition:transform var(--t),box-shadow var(--t);overflow:hidden}
.prize:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(23,19,26,.08)}
.prize .thumb{border-radius:16px;aspect-ratio:1/1;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;margin-bottom:11px}
.prize .thumb img{width:100%;height:100%;object-fit:cover}
.q-tile{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(150deg,#F7F2EE,#FFF6E4)}
.q-tile span{font-size:2.5rem;font-weight:800;color:#C9B9C6;line-height:1}
.adm-k{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800}
.prize b{display:block;font-size:.9rem;font-weight:700;line-height:1.3}
.prize .sub{font-size:.74rem;color:var(--muted);margin-top:3px}
.prize .left{margin-top:9px;font-size:.76rem;font-weight:700;color:var(--ink-2)}
.prize .left b{display:inline;color:var(--accent-ink)}
.prize.depleted{opacity:.45;filter:grayscale(.5)}

.tiertag{position:absolute;top:10px;left:10px;z-index:2;font-size:.62rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--pill);background:#fff;border:1px solid var(--line)}
.t-1{color:#7A6E7C;background:#F7F2EE}
.t-2{color:#1B6A92;background:#DEF1FC}
.t-3{color:#566A0C;background:#F0F7CF}
.t-4{color:#6B4E8E;background:#F3ECFB}
.t-5{color:#7E5C0C;background:#FFF4CE}
.t-6{color:#1B6373;background:#DCF2F5}
.t-sp{color:#12333C;background:linear-gradient(120deg,#FFDE7A,#7EC4CF)}

/* pool progress */
.pool-bar{margin-top:16px}
.pool-bar .top{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:7px}
.pool-bar .track{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.pool-bar .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#FFDE7A,#7EC4CF,#89ABE3);transition:width .9s var(--ease)}

/* last-call banner */
.last-call{border-radius:26px;padding:18px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(120deg,#FFF4CE,#DFF3F7 55%,#DEF1FC);border:2px dashed #7EC4CF;position:relative;overflow:hidden}
.last-call::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  background-size:220% 100%;animation:shimmer 4.5s linear infinite;pointer-events:none}
.last-call b{font-size:1.02rem}
.last-call p{font-size:.84rem;color:#6B2E45;margin-top:3px}
.last-call .lc-prize{margin-left:auto;display:flex;align-items:center;gap:12px}
.last-call .lc-thumb{width:58px;height:58px;border-radius:17px;overflow:hidden;background:#fff;border:2px solid #fff;box-shadow:0 8px 18px rgba(23,19,26,.12)}
.last-call .lc-thumb img{width:100%;height:100%;object-fit:cover}

/* draw button */
.draw-btn{border:0;border-radius:999px;padding:17px 34px;font-size:1.02rem;font-weight:800;color:#fff;
  background:linear-gradient(120deg,#F7DA84,#E0A63C);color:#4A3208;box-shadow:0 12px 26px rgba(224,166,60,.34);cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),filter var(--t)}
.draw-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 34px rgba(126,196,207,.42)}
.draw-btn:disabled{filter:grayscale(.35);opacity:.6;cursor:not-allowed}
.draw-btn.alt{background:linear-gradient(120deg,#FFD86B,#F5A03C);color:#4A2A05;box-shadow:0 12px 26px rgba(245,160,60,.34)}

/* win overlay */
.win-veil{position:fixed;inset:0;z-index:300;display:none;place-items:center;background:rgba(23,19,26,.46);backdrop-filter:blur(5px);padding:20px}
.win-veil.on{display:grid}
.win-card{width:min(420px,92vw);border-radius:34px;padding:30px 26px 26px;text-align:center;position:relative;
  background:radial-gradient(90% 70% at 50% 0%,#FFFFFF,#FFF6FA);border:2px solid #FFD9E7;
  box-shadow:0 30px 80px rgba(23,19,26,.28);animation:popIn .55s var(--ease) both}
.win-card .w-thumb{width:168px;height:168px;margin:6px auto 16px;border-radius:26px;overflow:hidden;background:var(--surface-2);border:2px solid #fff;box-shadow:0 16px 34px rgba(23,19,26,.14)}
.win-card .w-thumb img{width:100%;height:100%;object-fit:cover}
.win-card h3{font-size:1.5rem}
.win-card p{color:var(--muted);font-size:.9rem;margin-top:8px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:299;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:10px;height:14px;border-radius:3px;opacity:.95;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(112vh) rotate(680deg);opacity:.9}}

/* ============================================================
   ADMIN CONSOLE
   ============================================================ */
.adm{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:24px;margin-bottom:22px}
.adm h3{display:flex;align-items:center;gap:10px;font-size:1.06rem;margin-bottom:6px}
.adm .hint{font-size:.82rem;color:var(--muted);margin-bottom:16px}
.adm-row{display:grid;grid-template-columns:1.6fr .8fr .8fr .8fr .8fr auto;gap:10px;align-items:center;margin-bottom:10px}
@media(max-width:820px){.adm-row{grid-template-columns:1fr 1fr}}
.adm-row .input{padding:10px 12px;font-size:.88rem}
.adm .lbl{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800}
.adm-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.gate{max-width:420px;margin:0 auto;text-align:center;padding:clamp(30px,6vw,54px)}

@media(prefers-reduced-motion:reduce){
  .candy-blob,.candy-capsule,.last-call::before{animation:none!important}
}

@media(max-width:860px){.machine-shell .grid{grid-template-columns:1fr!important}}


/* ============================================================
   SECRET TROVE HUT — one fairy-tale timber cabin.
   Inside: no borders and no rules — only soft tints, glows and air.
   Frame = aged timber. Accents = 天青/极光蓝/清晨蓝/孟菲斯粉 (circled swatches).
   ============================================================ */
.hut{
  --sky:#7EC4CF; --aurora:#78C7D2; --dawn:#89ABE3; --memphis:#FF6B9D;
  --sky-deep:#3E8E9B; --dawn-deep:#4C6EB4; --memphis-deep:#C2416F;
  --sky-tint:#E7F6F8; --dawn-tint:#EBF0FA; --pink-tint:#FFEDF4;
  --cream:#FFFBF3; --cream2:#FBF4E6;
  --wood:#C9A47A; --wood2:#A9773F; --wood3:#8C5C30; --wood-light:#E9D3B4; --wood-line:#7A4E24;
  --ink:#33262B; --muted:#6F6470;
  color:var(--ink);
}
.hut *{box-sizing:border-box}

/* ---------- title block ---------- */
.hut-head{text-align:center;max-width:740px;margin:0 auto}
.hut-title{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.06;letter-spacing:-.03em;font-weight:800;color:var(--ink)}
.hut-title em{font-style:normal;background:linear-gradient(120deg,var(--memphis),var(--sky) 52%,var(--dawn));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hut-sub{margin-top:11px;font-size:clamp(.93rem,1.35vw,1.05rem);color:var(--muted)}
.hut-rules{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:17px}
.hut-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;font-size:.79rem;font-weight:700;
  border:1.5px solid transparent;box-shadow:0 4px 12px rgba(150,130,110,.10)}
.hut-rules .hut-chip:nth-child(4n+1){background:var(--sky-tint);border-color:#A9DEE5;color:#266B76}
.hut-rules .hut-chip:nth-child(4n+2){background:var(--dawn-tint);border-color:#B6C8EC;color:#3E5C9E}
.hut-rules .hut-chip:nth-child(4n+3){background:#FFF3E4;border-color:#E9CFA6;color:#8A5E28}
.hut-rules .hut-chip:nth-child(4n+4){background:#F2EEFC;border-color:#CFC4EE;color:#544A9E}
.hut-note{margin-top:16px;font-size:.81rem;color:var(--muted);max-width:60ch;margin-left:auto;margin-right:auto;line-height:1.75}

/* ============================================================
   THE CABIN
   ============================================================ */
.hut-stage-grid{display:grid;grid-template-columns:minmax(78px,158px) minmax(0,1fr) minmax(120px,214px);
  gap:clamp(22px,3.6vw,60px);align-items:start;justify-items:center;margin-top:clamp(30px,4.6vw,62px)}
.hut-stack{display:flex;flex-direction:column;align-items:center;gap:clamp(34px,5.4vw,80px);width:100%}
@media(max-width:1060px){
  .hut-stage-grid{grid-template-columns:1fr;gap:30px}
  .hut-decor.left{display:none}
  .hut-decor.right .d-art{display:none}
  .hut-decor.right{max-width:440px;margin:0 auto}
}
.hut-decor{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;width:100%}
.hut-decor .d-art{width:100%;max-width:118px;animation:floatSlow 8s var(--ease-soft) infinite}
.hut-decor .d-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 20px rgba(120,140,120,.20))}
.hut-decor.right .d-art{animation-delay:1.4s}
.hut-decor.right{align-self:end}
.hut-decor .d-note{margin:0;font-size:.7rem;line-height:1.6;font-weight:700;color:#7B6E86}
.hut-house{position:relative;display:flex;flex-direction:column;width:100%;max-width:520px;margin:0 auto}
.hut-roof{display:block;position:relative;z-index:3;margin-bottom:-1px}
.hut-roof svg{display:block;width:100%;height:auto}
.hut-shell{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:0 0 64px 64px}
.hut-cabin{position:relative;display:flex;align-items:stretch;z-index:2}

.hut-wall{flex:0 0 auto;width:clamp(26px,3.4vw,44px);position:relative;
  background-image:
    radial-gradient(7px 14px at 50% 20%,rgba(90,58,26,.24),transparent 72%),
    radial-gradient(6px 12px at 50% 62%,rgba(90,58,26,.19),transparent 72%),
    repeating-linear-gradient(180deg,rgba(84,54,24,.20) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(90deg,rgba(255,246,230,.26) 0 2px,transparent 2px 9px),
    linear-gradient(90deg,#C9A47A,#A9773F 42%,#8C5C30 76%,#C7A176);
  box-shadow:inset 0 0 0 1.5px rgba(110,74,34,.55),inset -5px 0 12px rgba(90,58,26,.22),
    inset 5px 0 12px rgba(255,244,226,.30),0 14px 28px rgba(120,88,50,.18)}
.hut-wall.l{border-radius:0 0 0 20px}
.hut-wall.r{border-radius:0 0 20px 0}

.hut-room{flex:1 1 auto;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;
  gap:clamp(7px,1.1vh,11px);padding:clamp(9px,1.5vh,14px) clamp(10px,1.5vw,15px);
  background:linear-gradient(180deg,#FFFDF7 0%,#F3FAFC 46%,#FCF4E8 100%)}
.hut-room::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 46% at 50% 4%,rgba(255,255,255,.94),rgba(255,255,255,0) 76%)}

.hut-base{position:relative;z-index:3;height:clamp(12px,1.5vw,16px);border-radius:0 0 26px 26px;margin-top:-1px;
  background-image:
    repeating-linear-gradient(90deg,rgba(84,54,24,.22) 0 1px,transparent 1px 36px),
    repeating-linear-gradient(180deg,rgba(255,246,230,.22) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,#C9A47A,#A9773F 58%,#8C5C30);
  box-shadow:inset 0 0 0 1.5px rgba(110,74,34,.55),0 16px 30px rgba(120,88,50,.20)}

/* ---------- floating sparkles, just for charm ---------- */
.hut-sparkle{position:absolute;border-radius:50%;pointer-events:none;opacity:.55;animation:floaty 9s var(--ease-soft) infinite}
.hut-sparkle.s1{width:9px;height:9px;background:#A9E4EA;top:13%;left:9%;animation-delay:.2s}
.hut-sparkle.s2{width:6px;height:6px;background:#FFC6DC;top:30%;left:20%;animation-delay:1.4s}
.hut-sparkle.s3{width:11px;height:11px;background:#CFE0F8;top:17%;right:11%;animation-delay:.8s}
.hut-sparkle.s4{width:6px;height:6px;background:#FFD98E;top:44%;right:8%;animation-delay:2.1s}
.hut-sparkle.s5{width:5px;height:5px;background:#A9E4EA;bottom:26%;left:13%;animation-delay:1.1s}
.hut-sparkle.s6{width:8px;height:8px;background:#C6ECEF;bottom:34%;right:15%;animation-delay:1.8s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* ---------- cute corner widgets: stock · progress · last-draw prize ---------- */
.hut-badges{position:relative;z-index:2;width:100%;display:flex;justify-content:center;align-items:flex-start;gap:10px}
.hut-badge{width:100%;border-radius:18px;padding:8px 11px;
  background:linear-gradient(180deg,#FFFFFF,#F2FAFB);box-shadow:0 12px 26px rgba(110,170,180,.15)}
.hut-badge.paid{background:linear-gradient(180deg,#FFFFFF,#F1F5FD);box-shadow:0 12px 26px rgba(120,150,200,.15)}
.hut-badge .bhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hut-badge .bnm{font-size:.74rem;font-weight:800;letter-spacing:-.01em}
.hut-badge .bcost{font-size:.55rem;font-weight:800;padding:2px 8px;border-radius:999px;background:#DCF2F5;color:#1B6373}
.hut-badge.paid .bcost{background:#E2E9F8;color:#2B4A8C}
.hut-badge .bline{display:flex;align-items:center;gap:6px;font-size:.62rem;color:#7A7086;margin-top:3px}
.hut-badge .bline b{color:#3D3346;font-weight:800}
.hut-badge .bline .bbar{flex:1 1 auto;min-width:32px}
.hut-badge .bbar{height:5px;border-radius:999px;background:#EEF4F5;margin-top:0;overflow:hidden}
.hut-badge .bbar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#9FE2E9,#7EC4CF);transition:width .9s var(--ease)}
.hut-badge.paid .bbar span{background:linear-gradient(90deg,#BACDEE,#89ABE3)}
.hut-badge .bspecial{display:flex;align-items:center;gap:5px;margin-top:5px;padding:3px 8px;border-radius:999px;
  background:#FFF3D4;font-size:.57rem;font-weight:800;color:#7A5A16}
.hut-badge .bspecial img{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.hut-badge .bspecial span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- the hero: one big question-mark blind box, 1/12 of the cabin ---------- */
.hut-hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.hut-hero-glow{position:absolute;top:46%;left:50%;width:min(150px,74%);aspect-ratio:1/1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(126,196,207,.34),rgba(126,196,207,0) 68%);
  transform:translate(-50%,-50%);animation:breathe 7.5s var(--ease-soft) infinite}
.hut-hero-box{position:relative;width:min(92px,11vh);animation:floatSlow 7s var(--ease-soft) infinite}
.hut-hero-box svg{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 28px rgba(80,140,150,.22))}
.hut-hero-box.shaking{animation:hutShake .42s var(--ease-soft) infinite}
.hut-hero-cap{position:relative;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  background:#FFFFFF;box-shadow:0 8px 18px rgba(110,170,180,.18);font-size:.62rem;font-weight:800;color:#5A6270}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.82}50%{transform:translate(-50%,-50%) scale(1.09);opacity:1}}

/* ---------- the small prizes, in a gentle wave under the hero ---------- */
.hut-ring{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;
  gap:clamp(9px,1.3vw,15px);padding:0 clamp(2px,1vw,8px)}
.pz{width:clamp(36px,4.4vw,46px);display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:bob 5.4s var(--ease-soft) infinite;animation-delay:var(--d,0s);
  transition:transform .45s var(--ease)}
.hut-ring .pz:nth-child(even){margin-top:9px}
.pz:hover{transform:translateY(-8px) scale(1.06)}
.pz .pic{position:relative;width:100%;aspect-ratio:1/1;border-radius:19px;display:grid;place-items:center;
  background:var(--tint,#EFFAFB);box-shadow:0 9px 18px var(--glow,rgba(110,170,180,.18))}
.pz .pic img,.pz .pic svg{width:76%;height:76%;object-fit:contain;display:block}
.pz .spark{position:absolute;top:-3px;right:-2px;font-size:.72rem;color:#E0A93C;text-shadow:0 0 6px rgba(255,255,255,.9)}
.pz .nm{font-size:.55rem;font-weight:700;line-height:1.22;text-align:center;color:#5B5162;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pz .cnt{font-size:.53rem;font-weight:700;color:#6F6577}
.pz .cnt b{color:#3D3346;font-weight:800}
.pz.depleted{opacity:.4;filter:grayscale(.45)}
.pz.opened{animation:hutOpen 1.05s var(--ease) 1}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-1.2deg)}}
@keyframes hutShake{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-6deg) translateY(-5px)}50%{transform:rotate(5deg) translateY(-9px)}75%{transform:rotate(-3deg) translateY(-3px)}}
@keyframes hutOpen{0%{transform:scale(1)}28%{transform:scale(1.16) rotate(7deg)}58%{transform:scale(.94) rotate(-4deg)}100%{transform:scale(1)}}

/* rarity is told by tint + glow only — never a hard edge */
.pz.t-1{--tint:#EFFAFB;--glow:rgba(80,160,175,.16)}
.pz.t-2{--tint:#EFF4FD;--glow:rgba(110,140,200,.18)}
.pz.t-3{--tint:#FFF1F7;--glow:rgba(214,90,140,.18)}
.pz.t-4{--tint:#F2EFFC;--glow:rgba(130,110,200,.20)}
.pz.t-5{--tint:#EAF8F9;--glow:rgba(70,170,182,.18)}
.pz.t-6{--tint:#FFF6DF;--glow:rgba(206,158,54,.24)}
/* 限定款（tier 6）：小正方形 · 只显图 · 不显文字 —— 用户要求 2026-10-10 */
.pz.t-6{width:clamp(52px,5.6vw,62px)}
.pz.t-6 .nm,.pz.t-6 .cnt{display:none}
.pz.t-6 .pic{border-radius:16px;box-shadow:0 6px 18px -8px rgba(206,158,54,.55)}
.pz.t-6 .pic img,.pz.t-6 .pic svg{width:88%;height:88%}
.hut-promo .it.t-6{border-radius:12px}
.hut-promo .it.t-6 b,.hut-promo .it.t-6 i{display:none}
.hut-promo .it.t-6 .th{width:clamp(34px,4vw,42px)}
.pz.t-7{--tint:#FDF0E4;--glow:rgba(200,132,74,.20)}
.hut-tag{display:inline-flex;align-items:center;gap:5px;font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.92);box-shadow:0 3px 8px rgba(120,100,80,.16)}
.hut .t-1{background:#DBF2F5;color:#1B5F69}
.hut .t-2{background:#DCE6F9;color:#2B4A8C}
.hut .t-3{background:#FFDCE9;color:#B03A65}
.hut .t-4{background:#E7E1FA;color:#544A9E}
.hut .t-5{background:#D9F1F4;color:#1F6C77}
.hut .t-6{background:linear-gradient(120deg,#FFE9A8,#EBC66A);color:#5F4208;border-color:#D9A63C}
.hut .t-7{background:#FAE2CD;color:#8A5220}

/* ---------- two cute buttons, bottom centre of the cabin ---------- */
.hut-unit{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.8vw,20px)}
.hut-unit-head{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;background:#fff;
  box-shadow:0 8px 18px rgba(120,170,180,.15);font-size:.83rem;font-weight:800}
.hut-unit.paid .hut-unit-head{box-shadow:0 8px 18px rgba(120,150,200,.15)}
.hut-unit-head .cost{font-size:.65rem;font-weight:800;padding:3px 10px;border-radius:999px;background:#DCF2F5;color:#1B6373}
.hut-unit.paid .hut-unit-head .cost{background:#E2E9F8;color:#2B4A8C}
.hut-btns{display:flex;justify-content:center;gap:clamp(8px,1.1vw,13px);width:100%;padding:0 clamp(4px,1vw,12px)}
.hut-btns .hut-btn{flex:1 1 0;min-width:0}
@media(max-width:560px){.hut-btns{flex-wrap:wrap}.hut-btns .hut-btn{flex:1 1 100%}}
.hut-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:24px;
  padding:9px 12px;font-size:.74rem;font-weight:800;cursor:pointer;border-radius:16px;
  transition:transform var(--t),box-shadow var(--t),filter var(--t)}
.hut-btn .ic{font-size:.92rem;line-height:1}
.hut-btn.amber{background:linear-gradient(120deg,#FFD166,#F0902E);color:#4A2A05;box-shadow:0 12px 24px rgba(240,144,46,.38)}
.hut-btn.amber:hover:not(:disabled){transform:translateY(-2px) scale(1.02);box-shadow:0 18px 30px rgba(240,144,46,.48)}
.hut-btn.bubble{background:linear-gradient(180deg,rgba(255,253,246,.78),rgba(255,246,228,.44));color:#6B4A20;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9),inset 0 -7px 16px rgba(222,192,150,.28),0 10px 22px rgba(196,166,122,.24);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hut-btn.bubble:hover:not(:disabled){transform:translateY(-2px) scale(1.015);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95),inset 0 -7px 16px rgba(160,200,210,.26),0 16px 28px rgba(120,180,190,.28)}
.hut-btn:disabled{filter:grayscale(.35);opacity:.6;cursor:not-allowed}
@media(max-width:560px){.hut-actions .hut-btn{width:100%}}

/* ---------- last-draw prize, shown inside the result card ---------- */
.hut-special{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:22px;
  border:2px solid #D9A63C;background:linear-gradient(120deg,#FFF8E6,#FFEDB8 52%,#FFF6E8);
  box-shadow:0 12px 22px rgba(206,158,54,.22);overflow:hidden}
.hut-special::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.85) 50%,transparent 66%);
  background-size:220% 100%;animation:shimmer 5.4s linear infinite}
.hut-special .lc{flex:1;min-width:0;position:relative;z-index:1}
.hut-special .lbl{display:inline-flex;align-items:center;gap:6px;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(120deg,#FBDD8C,#EBC66A);color:#5F4208;padding:4px 10px;border-radius:999px}
.hut-special b{display:block;font-size:.96rem;margin-top:6px;line-height:1.3}
.hut-special p{font-size:.74rem;color:#75571C;margin-top:3px;line-height:1.5}
.hut-special .pic{width:54px;height:54px;border-radius:16px;overflow:hidden;background:#fff;flex:0 0 auto;position:relative;z-index:1}
.hut-special .pic img{width:100%;height:100%;object-fit:cover}
.hut-special.warn{animation:glowPulse 3.4s var(--ease-soft) infinite}

/* ---------- result card ---------- */
.hut-unit-tag{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 13px;border-radius:999px;
  background:#fff;box-shadow:0 8px 18px rgba(150,130,110,.14);font-size:.76rem;font-weight:800;color:#4A3F52}
.hut-unit-tag .cost{font-size:.6rem;font-weight:800;padding:2px 8px;border-radius:999px;background:#FFF1CF;color:#7A5A16}
.hut-veil{position:fixed;inset:0;z-index:320;display:none;place-items:center;padding:20px;
  background:rgba(46,36,40,.42);backdrop-filter:blur(7px)}
.hut-veil.on{display:grid}
.hut-card{width:min(430px,93vw);border-radius:32px;padding:24px 22px 22px;text-align:center;position:relative;
  background:radial-gradient(90% 70% at 50% 0%,#FFFFFF,#F7FBFD);border:2px solid #CFE7EC;
  box-shadow:0 30px 74px rgba(60,80,90,.28);animation:popIn .55s var(--ease) both}
.hut-card .pic{width:168px;height:168px;margin:8px auto 16px;border-radius:28px;overflow:hidden;background:#F1FAFB;
  border:3px solid #fff;box-shadow:0 16px 32px rgba(110,170,180,.20)}
.hut-card .pic img,.hut-card .pic svg{width:100%;height:100%;object-fit:contain;padding:6%}
.hut-card h3{font-size:1.36rem}
.hut-card p{color:var(--muted);font-size:.89rem;margin-top:8px;line-height:1.6}
.hut-card .flag{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:8px 14px;border-radius:999px;font-size:.78rem;font-weight:800}
.hut-card .flag.normal{background:#DBF2F5;color:#1B5F69;border:1px solid #B7E2E8}
.hut-card .flag.rare{background:linear-gradient(120deg,#FFE9A8,#EBC66A);color:#5F4208}
.hut-card .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.hut-card .multi{display:flex;justify-content:center;align-items:flex-start;gap:clamp(5px,.9vw,9px);margin-top:16px}
.hut-card .mc{width:min(56px,14vw);display:flex;flex-direction:column;align-items:center;gap:4px;
  animation:popIn .55s var(--ease) both;animation-delay:var(--d,0s)}
.hut-card .mcp{width:100%;aspect-ratio:1/1;border-radius:15px;background:#FBF6EE;display:grid;place-items:center;overflow:hidden}
.hut-card .mcp img,.hut-card .mcp svg{width:74%;height:74%;object-fit:contain}
.hut-card .mc b{font-size:.55rem;line-height:1.2;font-weight:700;text-align:center}
.hut-card .mc .hut-tag{font-size:.48rem;padding:2px 6px}
.hut-card.grand{border-color:#EFCB72;box-shadow:0 0 0 3px rgba(232,183,74,.55),0 0 66px rgba(232,183,74,.45),0 30px 74px rgba(60,80,90,.26)}
.hut-card .fw{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,224,140,.95),rgba(255,224,140,0) 70%);animation:fwOut 1.25s var(--ease) forwards}
@keyframes fwOut{0%{transform:translate(-50%,-50%) scale(.3);opacity:.95}100%{transform:translate(-50%,-50%) scale(30);opacity:0}}

/* ---------- simplified entry machine on the home page ---------- */
.hut-mini{position:relative;max-width:520px;margin:0 auto}
.hut-mini-roof{height:clamp(38px,5.4vw,58px);clip-path:polygon(0% 100%,50% 0%,100% 100%);
  background-image:
    repeating-linear-gradient(180deg,rgba(84,54,24,.20) 0 1px,transparent 1px 13px),
    repeating-linear-gradient(90deg,rgba(255,246,230,.20) 0 2px,transparent 2px 16px),
    linear-gradient(180deg,#C9A47A,#A9773F 58%,#8C5C30)}
.hut-mini-eave{height:clamp(11px,1.4vw,15px);border-radius:4px;margin-top:-2px;
  background-image:repeating-linear-gradient(180deg,rgba(84,54,24,.20) 0 1px,transparent 1px 8px),
    linear-gradient(90deg,#C9A47A,#A9773F 46%,#8C5C30);
  box-shadow:inset 0 0 0 1.5px rgba(110,74,34,.5),0 6px 14px rgba(120,88,50,.18)}
.hut-mini-cabin{display:flex;align-items:stretch;margin-top:-1px}
.hut-mini-wall{flex:0 0 auto;width:clamp(18px,2.4vw,30px);
  background-image:repeating-linear-gradient(180deg,rgba(84,54,24,.18) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(255,246,230,.22) 0 2px,transparent 2px 9px),
    linear-gradient(90deg,#C9A47A,#A9773F 48%,#8C5C30);
  box-shadow:inset 0 0 0 1.5px rgba(110,74,34,.5)}
.hut-mini-room{flex:1;min-width:0;padding:clamp(16px,2.4vw,26px) clamp(12px,1.8vw,20px);display:grid;place-items:center;
  background:linear-gradient(180deg,#FFFCEF,#F5F9FC 62%,#EFF6F8)}
.hut-mini-base{height:clamp(13px,1.6vw,18px);border-radius:0 0 22px 22px;margin-top:-1px;
  background-image:repeating-linear-gradient(90deg,rgba(84,54,24,.22) 0 1px,transparent 1px 34px),
    linear-gradient(180deg,#C9A47A,#A9773F 58%,#8C5C30);
  box-shadow:inset 0 0 0 1.5px rgba(110,74,34,.5),0 12px 22px rgba(120,88,50,.18)}

/* home buttons: neither pink nor pure white */
.hut-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:24px;
  padding:15px 28px;font-size:.98rem;font-weight:800;cursor:pointer;text-decoration:none;
  transition:transform var(--t),box-shadow var(--t)}
.hut-cta.primary{background:linear-gradient(120deg,#F7DA84,#E0A63C);color:#4A3208;box-shadow:0 14px 28px rgba(224,166,60,.34)}
.hut-cta.primary:hover{transform:translateY(-2px);box-shadow:0 20px 34px rgba(224,166,60,.44)}
.hut-cta.soft{background:#F3E5D2;color:#7A5528;box-shadow:0 10px 22px rgba(150,110,64,.18)}
.hut-cta.soft:hover{transform:translateY(-2px);background:#EFDCC4}

/* ---------- admin on the hut page ---------- */
.hut .adm{background:#fff;border-radius:24px;border-color:#EFE1CE}
.hut .adm-row{grid-template-columns:1.5fr .5fr .5fr .5fr 1.3fr .5fr auto}
@media(max-width:900px){.hut .adm-row{grid-template-columns:1fr 1fr}}
@media(max-width:840px){
  .hut-badges{flex-direction:column;align-items:stretch}
  .hut-badge{width:100%}
  .hut-hero-box{width:min(192px,44vw)}
  .hut-ring{max-width:430px}
}
@media(prefers-reduced-motion:reduce){
  .pz,.hut-hero-box,.hut-hero-glow,.hut-sparkle,.hut-special::before{animation:none!important}
}

/* ============================================================
   HUT v8 — de-emphasised stats, promo strip, live feed
   ============================================================ */
/* top line: two stubby bars + tiny meta, deliberately quiet */
.hut-topline{position:relative;z-index:2;width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hut-stats-mini{display:flex;flex-direction:column;gap:5px;width:clamp(74px,24%,112px)}
.hut-bar2{height:6px;border-radius:999px;background:#EFE9E0;overflow:hidden}
.hut-bar2 span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#FFD166,#F0902E);transition:width .9s var(--ease)}
.hut-bar2.alt span{background:linear-gradient(90deg,#9BD3BC,#7EC4CF)}
.hut-stat-chip{display:inline-flex;align-items:center;gap:5px;margin-top:2px;padding:3px 8px;border-radius:999px;
  background:#FFF3D4;font-size:.53rem;font-weight:800;color:#7A5A16;max-width:100%}
.hut-stat-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hut-meta{font-size:.55rem;font-weight:700;color:#776D81;letter-spacing:.02em;white-space:nowrap;text-align:right}

/* promo banner: a flat strip of collectibles / limited pieces, no borders */
.hut-promo{position:relative;z-index:1;width:75%;border-radius:18px;overflow:hidden;height:clamp(48px,6.6vh,62px);
  display:flex;align-items:center;
  background:linear-gradient(120deg,#FFF8E8,#FDF0E4 55%,#F6F3EC);box-shadow:0 10px 22px rgba(190,160,120,.16)}
.hut-promo .track{display:inline-flex;align-items:center;gap:clamp(10px,1.4vw,16px);padding-left:14px;
  animation:railScroll var(--rail-dur,26s) linear infinite;will-change:transform}
.hut-promo .track:hover{animation-play-state:paused}
.hut-promo .it{display:flex;align-items:center;gap:7px;flex:0 0 auto;
  animation:bob 5.2s var(--ease-soft) infinite;animation-delay:var(--d,0s)}
.hut-promo .it .th{width:clamp(28px,3.4vw,36px);aspect-ratio:1/1;border-radius:11px;overflow:hidden;display:grid;place-items:center;
  background:var(--tint,#FFF4DE);box-shadow:0 6px 14px var(--glow,rgba(200,160,100,.18))}
.hut-promo .it .th img,.hut-promo .it .th svg{width:78%;height:78%;object-fit:contain}
.hut-promo .it b{font-size:.58rem;font-weight:800;white-space:nowrap;color:#5B5162}
.hut-promo .it i{font-size:.5rem;font-weight:800;font-style:normal;padding:2px 6px;border-radius:999px;background:#FFF1CF;color:#7A5A16}

/* live feed, bottom-right outside the machine */
.hut-ticker{position:relative;width:100%;max-width:196px;height:clamp(150px,21vh,186px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 76%,transparent 100%)}
.hut-ticker .roll{display:flex;flex-direction:column;gap:9px;animation:tickRoll var(--tdur,30s) linear infinite;will-change:transform}
.hut-ticker:hover .roll{animation-play-state:paused}
.hut-ticker .tk{display:flex;align-items:center;gap:7px;font-size:.6rem;line-height:1.35;color:#6E6480;font-weight:600;white-space:nowrap}
.hut-ticker .tk img{width:17px;height:17px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.hut-ticker .tk b{color:#4A3F52;font-weight:800}
.hut-ticker .tk em{font-style:normal;color:#A79CB2;font-weight:700}
@keyframes tickRoll{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* the top cabin is fancier, the lower one calmer */
.hut-unit.points .hut-room{background:linear-gradient(180deg,#FFFCF8 0%,#F4F7FD 44%,#FBF2E9 100%)}
.hut-unit.paid .hut-room{background:linear-gradient(180deg,#FFFDF8 0%,#F7F5EF 100%)}
.hut-unit.paid .hut-hero-glow{opacity:.55}
.hut-moon{position:absolute;top:10px;right:12px;width:26px;z-index:1;opacity:.9;pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(220,190,110,.45))}
.hut-moon svg{width:100%;height:auto;display:block}
.hut-unit.paid .hut-hero-cap{background:#FBF8F2;color:#7A7186}

/* ornate timber frame: candy-stripe trim, gold inner line, bauble studs */
.hut-wall{overflow:hidden;box-shadow:inset 0 0 0 1.5px rgba(110,74,34,.55),
  inset 0 0 0 4px rgba(243,197,92,.28),inset -5px 0 12px rgba(90,58,26,.22),
  inset 5px 0 12px rgba(255,244,226,.30),0 14px 28px rgba(120,88,50,.18)}
.hut-wall::after{content:"";position:absolute;top:0;bottom:0;width:7px;
  background:repeating-linear-gradient(180deg,#FFF6E4 0 11px,#F3C55C 11px 22px);opacity:.9}
.hut-wall.l::after{right:0}
.hut-wall.r::after{left:0}
.hut-wall .wd{position:absolute;left:50%;width:64%;aspect-ratio:1/1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,#FFF7E6 0 28%,#F3C55C 29% 60%,#E0A63C 61% 100%);
  box-shadow:0 2px 5px rgba(120,86,40,.35)}
.hut-wall .wd:nth-of-type(1){top:8%}
.hut-wall .wd:nth-of-type(2){top:33%}
.hut-wall .wd:nth-of-type(3){top:58%}
.hut-wall .wd:nth-of-type(4){top:83%}
.hut-base::after{content:"";position:absolute;inset:0 auto auto 0;left:0;right:0;height:9px;
  background:repeating-linear-gradient(90deg,#FFF6E4 0 12px,transparent 12px 24px);opacity:.55}

/* ============================================================
   铂金黄主题 · 支付区 · 抽盒机外观优化
   2026-10-09 —— 本段只做视觉（配色 / 圆角 / 阴影），
   不新增、不删除、不改动任何 HTML 结构与 JS 逻辑。
   ============================================================ */
:root{
  --plat:#E4D2A4;          /* 铂金黄 */
  --plat-hi:#F1E6C8;       /* 铂金黄高光 */
  --plat-line:#CBB27C;     /* 铂金描边 */
  --navy:#16294B;          /* 深蓝（按钮字色） */
}

/* ---- 铂金黄主按钮：铂金底 + 深蓝字 ---- */
.btn-plat{
  background:linear-gradient(180deg,var(--plat-hi) 0%,var(--plat) 100%);
  color:var(--navy);
  border:1px solid var(--plat-line);
  box-shadow:0 6px 16px rgba(203,178,124,.30);
  font-weight:700;
}
.btn-plat:hover{filter:brightness(1.04);transform:translateY(-1px)}
.btn-plat:active{transform:translateY(0)}
.btn-plat:disabled{opacity:.55;cursor:not-allowed;filter:none;transform:none}

/* ---- 支付区外框 ---- */
.pay-frame{
  margin-top:16px;padding:16px;border:1px solid var(--plat-line);border-radius:18px;
  background:linear-gradient(180deg,#FFFDF8,#FBF6EA);
}
.pay-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px;border-radius:12px;border:1px solid var(--plat-line);
  background:linear-gradient(180deg,var(--plat-hi),var(--plat));color:var(--navy);
}
.pay-head b{font-size:.94rem;letter-spacing:.01em}
.pay-note{font-size:.74rem;opacity:.75}
.pay-wallets{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 12px}
.pay-wallets span{
  font-size:.66rem;font-weight:800;letter-spacing:.04em;
  padding:4px 8px;border-radius:6px;color:#fff;line-height:1;
}
.w-paypal{background:#003087}
.w-visa{background:#1A1F71}
.w-mc{background:#EB001B}
.w-amex{background:#006FCF}
.w-apple{background:#111}
.w-gpay{background:#fff;color:#1F1F1F !important;border:1px solid #DADCE0}
.pp-buttons{min-height:48px;margin-bottom:10px}
.pay-skeleton{height:48px;border-radius:24px;
  background:linear-gradient(90deg,#F6F1E4,#EEE4CE,#F6F1E4);background-size:200% 100%;
  animation:paysk 1.3s linear infinite}
@keyframes paysk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---- 后台口令提示行 ---- */
.hintline{margin:0;font-size:.85rem;color:#7A7186;min-height:1em}
.hintline.warn{color:#9C5A72}

/* ---- 抽盒机外观优化：只换皮，不动骨 ---- */
.hut-house{border-radius:22px}
.hut-shell{border-radius:20px;box-shadow:0 18px 40px rgba(120,88,50,.16)}
.hut-room{border-radius:18px}
.hut-btn,.hut-btn.amber,.hut-btn.bubble{
  background:linear-gradient(180deg,var(--plat-hi) 0%,var(--plat) 100%);
  color:var(--navy);
  border:1px solid var(--plat-line);
  box-shadow:0 6px 16px rgba(203,178,124,.32);
}
.hut-btn:hover,.hut-btn.amber:hover,.hut-btn.bubble:hover{filter:brightness(1.05)}
.hut-btn[disabled]{opacity:.5}
.machine-shell{border:1px solid var(--plat-line);border-radius:22px;
  background:linear-gradient(180deg,#FFFDF8,#FAF4E8)}
.pz{border-radius:16px}
.hut-promo .it{border-radius:14px}
.hut-ticker{border-radius:14px}
.hut-unit-tag{border-radius:999px}

/* ============================================================
   法务页（Privacy / Terms）· 2026-10-19
   只新增排版样式，不改动任何既有类；配色全部取自现有变量。
   ============================================================ */
.legal-hero{padding-bottom:0}
.legal-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0}
.legal-hero .lead{max-width:62ch;margin-top:16px}
.legal-meta-line{margin-top:18px;font-size:.8rem;color:var(--muted);letter-spacing:.02em}
.legal-grid{display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.legal-toc{position:sticky;top:96px;font-size:.86rem;border-left:2px solid var(--line);padding-left:18px}
.legal-toc b{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.legal-toc a{display:block;padding:5px 0;color:var(--muted);line-height:1.4}
.legal-toc a:hover{color:var(--accent-ink)}
.legal-body{max-width:76ch;min-width:0}
.legal-body h2{font-size:clamp(1.16rem,1.9vw,1.44rem);letter-spacing:-.01em;margin:46px 0 12px;scroll-margin-top:110px}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:1rem;margin:24px 0 8px}
.legal-body p{margin:0 0 14px;color:var(--ink-2);line-height:1.78}
.legal-body ul{margin:0 0 16px;padding-left:20px;color:var(--ink-2);line-height:1.78}
.legal-body li{margin-bottom:8px}
.legal-body a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.legal-body strong{color:var(--ink)}
.legal-callout{background:#FBF6EA;border:1px solid #E8DCC0;border-radius:14px;padding:16px 20px;margin:0 0 20px}
.legal-callout p:last-child{margin-bottom:0}
.legal-table{width:100%;border-collapse:collapse;font-size:.92rem;margin:0 0 22px;display:table}
.legal-table th,.legal-table td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.6;color:var(--ink-2)}
.legal-table th{font-weight:600;color:var(--ink);background:#FBF6EA;font-size:.86rem;letter-spacing:.02em}
.legal-table tr:last-child td{border-bottom:0}
.legal-foot{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.foot-copy{display:flex;flex-direction:column;gap:8px}
.foot-legal{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.foot-legal a{color:var(--muted)}
.foot-legal a:hover{color:var(--accent-ink)}
@media (max-width:900px){
  .legal-grid{grid-template-columns:1fr}
  .legal-toc{position:static;border-left:0;border-top:1px solid var(--line);padding:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
  .legal-toc b{width:100%;margin-bottom:2px}
  .legal-toc a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
  .legal-table{font-size:.86rem}
  .legal-table th,.legal-table td{padding:9px 10px}
}