/* ============================================================
   跑車盛宴 · 科技競速 · 深藍紫 + 霓虹  —  Design System
   Deep indigo/violet surfaces · violet-blue structure ·
   magenta-pink energy · warm accent only on primary CTA & key headings
   ============================================================ */

:root{
  /* ---- purple-blue surfaces ---- */
  --ink-000:#000000;
  --ink-900:#0a0626;
  --ink-850:#0e0930;
  --ink-800:#150d3c;
  --ink-750:#1d1450;
  --ink-700:#281b64;
  --ink-line:rgba(150,128,255,.30);

  /* ---- violet / blue structure ---- */
  --vio-300:#b39dff;
  --vio-500:#7c4dff;
  --vio-700:#5326c4;
  --vio-grad:linear-gradient(180deg,#9a73ff 0%,#6a3de0 55%,#4a23b0 100%);
  --blu-400:#5b8cff;
  --cyan-400:#46d6e6;

  /* ---- warm accent (orange-amber): selected top-tab + primary CTA + key headings ---- */
  --gold-hi:#ffe9b0;
  --gold-100:#e7dcff;      /* repurposed → lavender label text */
  --gold-300:#c4b5f0;      /* repurposed → soft lavender */
  --gold-500:#f5a623;
  --gold-700:#d9791a;
  --gold-900:#5e3f13;
  --gold-grad:linear-gradient(180deg,#ffe87a 0%,#ffd24a 46%,#f5a81e 100%);
  --gold-grad-soft:linear-gradient(180deg,#ffdf6a,#f5a81e);
  --gold-text:linear-gradient(180deg,#fff3c8 0%,#ffd66e 58%,#f5b224 100%);
  --gold-glow:0 0 16px rgba(255,190,50,.36);

  /* ---- magenta-pink energy: progress / numbers / highlights ---- */
  --red-hi:#ff7ed4;
  --red-500:#e0359c;
  --red-600:#c2268a;
  --red-800:#8c156a;
  --red-900:#5c0d47;
  --red-grad:linear-gradient(168deg,#ff8ad4 0%,#e0359c 50%,#a01c78 100%);
  --red-glow:0 0 22px rgba(224,53,156,.42);

  --txt:#f1ecff;
  --txt-dim:#b9aee6;
  --txt-mute:#7d72ad;

  --font-cjk:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-disp:"Saira Condensed","Saira",sans-serif;

  --shadow-panel:0 10px 30px rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.4);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:#050314;
  font-family:var(--font-cjk);
  color:var(--txt);
  display:flex;justify-content:center;align-items:center;
  min-height:100vh;
}

/* ============= PHONE FRAME ============= */
.stage{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;width:100%;
  padding:28px 0;
  background:
    radial-gradient(120% 80% at 50% -10%, #2a1c66 0%, #120a34 55%, #060312 100%);
}
.phone{
  position:relative;width:390px;height:844px;
  border-radius:46px;
  background:#0a0726;
  padding:8px;
  box-shadow:
    0 0 0 2px #18123a,
    0 0 0 11px #0a0820,
    0 0 0 12px #2a2150,
    0 40px 90px rgba(0,0,0,.75);
}
.screen{
  position:relative;width:100%;height:100%;
  border-radius:38px;overflow:hidden;
  background:
    radial-gradient(140% 90% at 50% -8%, #241a5e 0%, #150d3e 46%, #0a0622 100%);
}
.screen::before{ /* tech grid */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(120,150,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,150,255,.05) 1px, transparent 1px);
  background-size:38px 38px;
  opacity:.7;
  mask-image:radial-gradient(120% 90% at 50% 10%, #000 30%, transparent 95%);
}
.screen-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;z-index:1;}
.screen-scroll::-webkit-scrollbar{width:0;}

/* ============= STATUS BAR ============= */
.statusbar{
  position:relative;z-index:5;height:44px;display:flex;align-items:center;
  justify-content:space-between;padding:0 26px 0 30px;
  font-family:var(--font-disp);font-weight:600;color:#f1ecff;font-size:15px;
  letter-spacing:.5px;
}
.statusbar .sb-r{display:flex;align-items:center;gap:6px;}
.sb-bars{display:flex;align-items:flex-end;gap:2px;height:11px;}
.sb-bars i{width:3px;background:#f1ecff;border-radius:1px;}
.sb-batt{width:24px;height:12px;border:1.4px solid #f1ecff;border-radius:3px;position:relative;padding:1.5px;}
.sb-batt::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:6px;background:#f1ecff;border-radius:0 1px 1px 0;}
.sb-batt i{display:block;height:100%;width:72%;background:#f1ecff;border-radius:1px;}

/* ============= TEXT HELPERS ============= */
.gold-text{
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.disp{font-family:var(--font-disp);}
.upper{text-transform:uppercase;letter-spacing:.18em;}

/* ============= VIOLET FRAME (was gold) ============= */
.gframe{
  position:relative;border-radius:14px;
  background:var(--vio-grad);
  padding:2px;
  box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(200,180,255,.5);
}
.gframe-in{
  border-radius:12px;
  background:linear-gradient(180deg,#1d1450,#120c34);
  box-shadow:inset 0 1px 0 rgba(180,160,255,.1), inset 0 -8px 20px rgba(0,0,0,.45);
}

/* ============= PANEL ============= */
.panel{
  position:relative;border-radius:16px;
  background:linear-gradient(180deg,#1e1452 0%,#130b34 100%);
  border:1px solid var(--ink-line);
  box-shadow:var(--shadow-panel), inset 0 1px 0 rgba(180,160,255,.08);
}
.panel-head{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 0;position:relative;
}
.panel-head .ph-title{
  font-weight:900;font-size:17px;letter-spacing:.06em;
}
.hr-gold{height:1px;background:linear-gradient(90deg,transparent,rgba(150,128,255,.5),transparent);}

/* prize-pool emphasis variant (pink edges) */
.panel-red{
  border-color:rgba(224,53,156,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(224,53,156,.12),
             inset 0 1px 0 rgba(180,160,255,.06);
}
.panel-red::before,.panel-red::after{
  content:"";position:absolute;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:var(--red-grad);box-shadow:var(--red-glow);
}
.panel-red::before{left:0;}
.panel-red::after{right:0;}

/* ============= BUTTONS ============= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:none;cursor:pointer;font-family:var(--font-cjk);font-weight:900;
  border-radius:12px;line-height:1;user-select:none;position:relative;
  transition:transform .08s ease, filter .15s ease;white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.985);}
.btn-lg{height:54px;font-size:19px;padding:0 22px;}
.btn-md{height:44px;font-size:16px;padding:0 18px;}
.btn-sm{height:34px;font-size:13.5px;padding:0 14px;border-radius:9px;}

/* PRIMARY — warm amber CTA (the one eye-catching action) */
.btn-red{
  color:#4a2c06;
  background:var(--gold-grad);
  box-shadow:
    0 0 0 1.5px #7a4a10,
    inset 0 1.5px 0 rgba(255,250,224,.8),
    inset 0 -9px 16px rgba(150,90,20,.35),
    0 6px 16px rgba(245,140,30,.35),
    var(--gold-glow);
  text-shadow:0 1px 0 rgba(255,240,190,.45);
}
.btn-red:hover{filter:brightness(1.06);}

/* SECONDARY — soft yellow (flatter than primary) */
.btn-gold{
  color:#4a2c06;
  background:var(--gold-grad);
  box-shadow:
    0 0 0 1.5px #7a4a10,
    inset 0 1.5px 0 rgba(255,250,224,.8),
    inset 0 -9px 16px rgba(150,90,20,.3),
    0 5px 12px rgba(245,160,30,.28);
  text-shadow:0 1px 0 rgba(255,240,190,.45);
}
.btn-gold:hover{filter:brightness(1.05);}

/* TERTIARY — violet outline */
.btn-ghost{
  color:var(--vio-300);
  background:linear-gradient(180deg,rgba(60,44,120,.55),rgba(24,16,56,.6));
  box-shadow:inset 0 0 0 1.4px rgba(150,128,255,.55), inset 0 1px 0 rgba(190,170,255,.12);
}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.4px rgba(179,157,255,.9), inset 0 1px 0 rgba(190,170,255,.2);}

/* disabled */
.btn-off{
  color:#6b6294 !important;
  background:linear-gradient(180deg,#241c4e,#150e34) !important;
  box-shadow:inset 0 0 0 1.4px rgba(120,108,180,.25), inset 0 -6px 12px rgba(0,0,0,.4) !important;
  text-shadow:none !important;cursor:not-allowed;
}
.btn-off:active{transform:none;}

/* ============= PROGRESS (magenta-pink) ============= */
.prog{
  position:relative;height:13px;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#0a0726,#181048);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(150,128,255,.2);
}
.prog>i{
  display:block;height:100%;border-radius:8px;
  background:linear-gradient(180deg,#ff9ddd,#e0359c 55%,#a01c78);
  box-shadow:0 0 10px rgba(224,53,156,.6), inset 0 1px 0 rgba(255,210,240,.6);
  position:relative;transition:width .5s cubic-bezier(.3,.8,.3,1);
}
.prog>i::after{
  content:"";position:absolute;inset:0;border-radius:8px;
  background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  background-size:200% 100%;animation:sheen 2.2s linear infinite;
}
@keyframes sheen{from{background-position:200% 0;}to{background-position:-100% 0;}}

/* ============= COIN / TICKET (stay gold — currency) ============= */
.coin{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.12em;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,#e9bf57 45%,#a9761f 100%);
  box-shadow:inset 0 0 0 1.5px rgba(120,80,20,.5), inset 0 -2px 3px rgba(120,80,20,.5);
  position:relative;}
.coin::after{content:"$";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-disp);font-weight:700;font-size:.62em;color:#7a4f12;}

/* ============= CHIPS / TAGS ============= */
.tag{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;white-space:nowrap;
  font-family:var(--font-disp);font-weight:700;font-size:12px;letter-spacing:.04em;
}
.tag-gold{background:var(--gold-grad-soft);color:#4a2c06;box-shadow:inset 0 1px 0 rgba(255,250,224,.7);}
.tag-dark{background:rgba(14,9,40,.7);color:var(--vio-300);box-shadow:inset 0 0 0 1px rgba(150,128,255,.4);}

/* ============= MISC ============= */
.fade-in{animation:fadeIn .35s ease;}
@keyframes fadeIn{from{transform:translateY(10px);}to{transform:none;}}
.pop-in{animation:popIn .3s cubic-bezier(.2,1.3,.4,1);}
@keyframes popIn{from{transform:scale(.9);}to{transform:scale(1);}}

/* ============= HEADER / KV ============= */
.appbar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:2px 16px 0;}
.appbar .ab-side{width:54px;display:flex;align-items:center;}
.iconbtn{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#241a54,#140d36);box-shadow:inset 0 0 0 1.2px rgba(150,128,255,.45);
  color:var(--vio-300);cursor:pointer;border:none;}
.kv-wrap{display:flex;flex-direction:column;align-items:center;gap:1px;}
.kv-title{
  font-family:var(--font-cjk);font-weight:900;font-size:26px;letter-spacing:.04em;
  transform:skewX(-7deg);line-height:1;
  background:linear-gradient(180deg,#ffffff 0%,#cfe6ff 36%,#7eb3ff 64%,#4a73e8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 #2a1c6a) drop-shadow(0 2px 7px rgba(90,120,255,.5));
}
.kv-sub{font-family:var(--font-disp);font-weight:600;font-size:9.5px;letter-spacing:.34em;
  color:var(--cyan-400);text-transform:uppercase;margin-top:1px;}
.count-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:9px;white-space:nowrap;
  font-family:var(--font-disp);font-weight:700;font-size:13px;color:var(--vio-300);
  background:linear-gradient(180deg,rgba(50,36,108,.85),rgba(18,12,46,.85));
  box-shadow:inset 0 0 0 1.2px rgba(150,128,255,.4);}
.count-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--red-500);box-shadow:var(--red-glow);}

/* compact coin chip in header */
.coin-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 7px 4px 8px;border-radius:16px;white-space:nowrap;
  background:linear-gradient(180deg,#241a54,#130c34);box-shadow:inset 0 0 0 1.1px rgba(150,128,255,.4);
  font-family:var(--font-disp);font-weight:700;font-size:12.5px;color:#ffe0a0;}
.coin-chip .cc-add{width:16px;height:16px;border-radius:50%;background:var(--gold-grad);color:#4a2c06;
  font-weight:900;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;}

/* coin balance bar */
.wallet{display:flex;align-items:center;gap:8px;padding:6px 16px 0;justify-content:center;}
.wallet .wbox{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;border-radius:20px;
  background:linear-gradient(180deg,#241a54,#130c34);box-shadow:inset 0 0 0 1.2px rgba(150,128,255,.42);
  font-family:var(--font-disp);font-weight:700;font-size:15px;color:#ffe0a0;}
.wallet .wadd{width:20px;height:20px;border-radius:50%;background:var(--gold-grad);color:#4a2c06;
  font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;margin-left:2px;
  box-shadow:inset 0 1px 0 rgba(255,250,224,.7);}

/* ============= TOP TABS ============= */
.toptab{flex:1;border:none;cursor:pointer;border-radius:13px;padding:9px 4px 8px;
  display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;
  background:linear-gradient(180deg,#1d1450,#120c34);
  box-shadow:inset 0 0 0 1.2px rgba(150,128,255,.3), inset 0 1px 0 rgba(180,160,255,.05);
  transition:transform .12s ease;}
.toptab .tt-zh{font-weight:900;font-size:16px;color:var(--txt-dim);}
.toptab .tt-en{font-size:8px;color:var(--txt-mute);font-weight:600;}
.toptab.on{
  background:var(--gold-grad);transform:translateY(-2px) scale(1.04);
  box-shadow:0 0 0 1.5px #7a4a10, inset 0 1.5px 0 rgba(255,250,224,.85),
    inset 0 -8px 14px rgba(150,90,20,.3), 0 8px 18px rgba(0,0,0,.5), var(--gold-glow);}
.toptab.on .tt-zh{color:#4a2c06;}
.toptab.on .tt-en{color:#8a5410;}

/* ============= SUB TABS (selected = violet, ranks below top tabs) ============= */
.subtab{border:none;cursor:pointer;border-radius:10px;padding:7px 18px;font-weight:700;font-size:14px;
  color:var(--vio-300);background:linear-gradient(180deg,#1c1348,#120c34);
  box-shadow:inset 0 0 0 1.1px rgba(150,128,255,.32);}
.subtab.on{color:#4a2c06;background:var(--gold-grad);
  box-shadow:0 0 0 1.2px #7a4a10, inset 0 1.2px 0 rgba(255,250,224,.8),var(--gold-glow);}

/* ============= MARQUEE ============= */
.marquee{margin:10px 14px 0;height:30px;border-radius:9px;overflow:hidden;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(124,77,255,.32),rgba(20,12,52,.6));
  box-shadow:inset 0 0 0 1px rgba(150,128,255,.32);}
.marquee .mq-ico{flex:none;padding:0 8px 0 10px;color:var(--red-hi);font-size:13px;}
.marquee .mq-track{white-space:nowrap;animation:mq 16s linear infinite;font-size:12.5px;color:var(--vio-300);}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============= HERO STAGE ============= */
.hero{position:relative;margin:14px;border-radius:16px;overflow:hidden;height:240px;
  background:radial-gradient(120% 90% at 50% 24%,#2a1e6e 0%,#160e44 55%,#0c0828 100%);
  border:1px solid var(--ink-line);box-shadow:var(--shadow-panel);}
.hero .halo{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:240px;height:60px;
  border-radius:50%;background:radial-gradient(50% 100% at 50% 50%,rgba(120,150,255,.4),transparent 70%);
  box-shadow:0 0 40px rgba(110,140,255,.35);}
.hero .ring{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:200px;height:46px;
  border-radius:50%;border:2px solid rgba(120,150,255,.5);box-shadow:0 0 18px rgba(120,150,255,.4),inset 0 0 14px rgba(120,150,255,.25);}
.hero .glow-red{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 40%,rgba(124,77,255,.22),transparent 70%);pointer-events:none;}

/* ============= GIFT GRID ============= */
.grid16{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.gcell{position:relative;border-radius:9px;aspect-ratio:1/1;padding:5px 4px 4px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;
  background:linear-gradient(180deg,#1f1654,#130c36);
  box-shadow:inset 0 0 0 1px rgba(150,128,255,.22), inset 0 1px 0 rgba(180,160,255,.05);}
.gcell .gc-ico{flex:1;display:flex;align-items:center;justify-content:center;font-size:24px;}
.gcell .gc-val{font-family:var(--font-disp);font-weight:700;font-size:11px;color:#ffe0a0;
  display:flex;align-items:center;gap:2px;}
.gcell.hot{box-shadow:0 0 0 1.6px #ffd06a, 0 0 16px rgba(255,180,70,.7);transform:scale(1.04);z-index:2;
  background:linear-gradient(180deg,#3a2c5e,#211448);}
.gcell .gc-name{font-size:8.5px;color:var(--txt-mute);}

/* ============= TREASURE RAIL ============= */
.rail{display:flex;flex-direction:column;gap:6px;width:62px;}
.tbox{position:relative;border-radius:9px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(180deg,#1c1448,#0f0a2e);box-shadow:inset 0 0 0 1px rgba(150,128,255,.2);color:var(--txt-mute);}
.tbox .tb-lv{font-family:var(--font-disp);font-weight:700;font-size:10px;}
.tbox.lit{background:var(--gold-grad);color:#4a2c06;box-shadow:0 0 14px rgba(255,180,70,.6),inset 0 1px 0 rgba(255,250,224,.7);animation:throb 1.4s ease-in-out infinite;}
.tbox.opened{opacity:.45;}
.tbox.dead{opacity:.3;}
@keyframes throb{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}

/* ============= ACTION ROW ============= */
.actrow{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.actbtn{border:none;cursor:pointer;border-radius:11px;padding:9px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-weight:900;font-size:14px;}
.actbtn .ab-cost{font-family:var(--font-disp);font-weight:700;font-size:11px;display:flex;align-items:center;gap:3px;}
.act-refresh{background:linear-gradient(180deg,#241a54,#140d36);color:var(--vio-300);box-shadow:inset 0 0 0 1.2px rgba(150,128,255,.45);}
.act-go{color:#4a2c06;background:var(--gold-grad);box-shadow:0 0 0 1.4px #7a4a10,inset 0 1.5px 0 rgba(255,250,224,.6),inset 0 -8px 14px rgba(150,90,20,.3);}
.act-go .ab-cost{color:#6a3e06;}

/* ============= 保底 PANEL ============= */
.guar-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt-dim);padding:6px 0;}
.guar-cap{flex:none;width:78px;text-align:center;font-family:var(--font-disp);font-weight:700;font-size:11px;
  padding:4px 6px;border-radius:6px;color:#fff;}

/* ============= BET POSITIONS (金币盘) ============= */
.betgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.betcell{position:relative;border-radius:12px;padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  background:linear-gradient(180deg,#1d1450,#120c34);box-shadow:inset 0 0 0 1.2px rgba(150,128,255,.3);transition:transform .1s ease;}
.betcell:active{transform:scale(.97);}
.betcell.on{box-shadow:0 0 0 1.6px var(--vio-500),0 0 16px rgba(124,77,255,.5);background:linear-gradient(180deg,#2c2068,#16104a);}
.betcell.win{box-shadow:0 0 0 2px #e0359c,0 0 20px rgba(224,53,156,.6);}
.betcell .bc-num{font-family:var(--font-disp);font-weight:700;font-size:40px;line-height:.9;
  background:linear-gradient(180deg,#fff6d6,#ffd24a 68%,#f0a81e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.betcell .bc-odd{position:absolute;top:7px;right:8px;font-family:var(--font-disp);font-weight:700;font-size:12px;color:var(--cyan-400);}
.betcell .bc-tag{font-size:9px;color:var(--txt-mute);letter-spacing:.1em;}
.betcell .bc-amt{font-family:var(--font-disp);font-weight:700;font-size:15px;color:#fff;}

/* dice */
.dice-row{display:flex;gap:14px;justify-content:center;}
.die{width:58px;height:58px;border-radius:13px;background:linear-gradient(180deg,#fbf7ff,#dfd2f4);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.85),inset 0 -6px 10px rgba(110,90,170,.3),0 6px 12px rgba(0,0,0,.5);
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:9px;}
.die.roll{animation:diceRoll .5s linear infinite;}
@keyframes diceRoll{0%{transform:rotate(0) scale(1);}25%{transform:rotate(8deg) scale(1.06);}50%{transform:rotate(-6deg) scale(.96);}75%{transform:rotate(5deg) scale(1.04);}100%{transform:rotate(0) scale(1);}}
.pip{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7c4dff,#4a23b0);align-self:center;justify-self:center;box-shadow:inset 0 -1px 1px rgba(0,0,0,.35);}

/* ============= REWARD CARD (奖池 / 3选1) ============= */
.rcard{position:relative;}
.rcard-art{position:relative;border-radius:11px;aspect-ratio:1/1;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#2a1e6a,#140d3a);display:flex;align-items:center;justify-content:center;font-size:34px;}
.rcard-tag{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);}
.rcard-name{text-align:center;font-size:12.5px;font-weight:700;margin-top:6px;color:var(--txt);}

/* task card */
.task{display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;
  background:linear-gradient(180deg,#1c1448,#120c34);box-shadow:inset 0 0 0 1px rgba(150,128,255,.22);}
.task-ic{width:52px;height:52px;flex:none;border-radius:10px;background:radial-gradient(120% 100% at 50% 0%,#2a1e6a,#140d3a);
  display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;box-shadow:inset 0 0 0 1px rgba(150,128,255,.3);}
.task-ic .ti-time{position:absolute;left:0;bottom:0;right:0;font-family:var(--font-disp);font-size:8px;font-weight:700;
  background:rgba(124,77,255,.85);color:#fff;text-align:center;border-radius:0 0 9px 9px;padding:1px 0;}

/* refit color swatch */
.swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(0,0,0,.3);}
.swatch.on{box-shadow:0 0 0 2px #0a0726,0 0 0 4px var(--vio-500);}
.scene-chip{padding:8px 14px;border-radius:9px;cursor:pointer;font-weight:700;font-size:13px;
  color:var(--vio-300);background:linear-gradient(180deg,#1c1348,#120c34);box-shadow:inset 0 0 0 1.1px rgba(150,128,255,.3);}
.scene-chip.on{color:#fff;background:var(--vio-grad);box-shadow:0 0 16px rgba(124,77,255,.4);}

/* ============= MODAL ============= */
.modal-mask{position:absolute;inset:0;z-index:50;background:rgba(6,4,18,.78);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;}
.modal{width:100%;max-width:330px;border-radius:20px;position:relative;
  background:linear-gradient(180deg,#231852,#130c34);
  box-shadow:0 0 0 1.5px rgba(150,128,255,.5),0 30px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(180,160,255,.1);}
.modal-x{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(14,9,40,.7);color:var(--vio-300);box-shadow:inset 0 0 0 1px rgba(150,128,255,.4);font-size:15px;}
.modal-title{text-align:center;font-weight:900;font-size:19px;padding:20px 20px 6px;}

/* toast */
.toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);z-index:80;
  background:rgba(14,9,40,.94);color:var(--vio-300);padding:10px 18px;border-radius:12px;font-size:13.5px;font-weight:500;
  box-shadow:0 0 0 1px rgba(150,128,255,.4),0 10px 24px rgba(0,0,0,.6);white-space:nowrap;animation:popIn .25s ease;}

/* rules */
.rule-sec{margin:0 16px 16px;}
.rule-h{display:flex;align-items:center;gap:8px;font-weight:900;font-size:15px;color:var(--txt);margin-bottom:6px;}
.rule-p{font-size:12.5px;line-height:1.7;color:var(--txt-dim);text-wrap:pretty;}

/* footer */
.foot{text-align:center;font-size:11px;color:var(--txt-mute);line-height:1.7;padding:18px 24px 26px;}

/* placeholder car stage */
.art-ph{
  border:1.5px dashed rgba(150,128,255,.5);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--txt-mute);font-size:12px;letter-spacing:.08em;
  background:repeating-linear-gradient(135deg,rgba(150,128,255,.04) 0 8px,transparent 8px 16px);
}

/* =====================================================================
   MOTION LAYER — 参考竞品活动页动效移植（只加动画，不改风格/布局）
   ===================================================================== */

/* 1) 启动页：速度线流动 + 白闪转场 + 跑车冲屏 + 标题霓虹呼吸 + CTA 脉冲 */
.speedlines{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(115deg,
    transparent 0 46px, rgba(140,180,255,.13) 46px 49px,
    transparent 49px 120px, rgba(255,200,90,.10) 120px 122px);
  background-size:260% 100%;
  animation:scfSpeed 1.6s linear infinite;}
@keyframes scfSpeed{from{background-position:0 0;}to{background-position:-520px 0;}}

.splash-flash{position:absolute;inset:0;z-index:5;pointer-events:none;background:#fff;
  opacity:0;animation:scfFlash .7s ease-out;}
@keyframes scfFlash{0%{opacity:.9;}100%{opacity:0;}}

.splash-car{animation:scfDashIn .85s cubic-bezier(.16,.84,.3,1) backwards,
                     scfFloat 3.2s ease-in-out 1s infinite;}
@keyframes scfDashIn{
  0%{transform:translateX(-130%) skewX(-6deg);filter:blur(6px);opacity:0;}
  62%{transform:translateX(6%) skewX(-2deg);filter:blur(0);opacity:1;}
  100%{transform:translateX(0) skewX(0);}}

.splash-title{animation:scfNeon 2.6s ease-in-out infinite;}
@keyframes scfNeon{
  0%,100%{filter:drop-shadow(0 2px 0 #2a1c6a) drop-shadow(0 4px 14px rgba(90,120,255,.55));}
  50%{filter:drop-shadow(0 2px 0 #2a1c6a) drop-shadow(0 4px 22px rgba(120,160,255,.95));}}

/* 2) CTA 呼吸脉冲（红色大按钮 = 主行动点） */
.btn-red.btn-lg{animation:scfPulse 1.8s ease-in-out infinite;}
@keyframes scfPulse{
  0%,100%{box-shadow:0 0 0 1.4px #ff8b86,inset 0 1.5px 0 rgba(255,210,200,.65),0 6px 18px rgba(226,35,32,.45);}
  50%{box-shadow:0 0 0 1.4px #ffb0ab,inset 0 1.5px 0 rgba(255,210,200,.65),0 6px 30px rgba(255,80,70,.85);}}
.actbtn.act-go{animation:scfGoPulse 2s ease-in-out infinite;}
@keyframes scfGoPulse{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.16);}}

/* 3) 内容入场 stagger（tab 切换时面板错落上滑，对应竞品分层入场） */
.fade-in>*{animation:scfRise .46s cubic-bezier(.22,.9,.36,1) backwards;}
.fade-in>*:nth-child(1){animation-delay:.02s;}
.fade-in>*:nth-child(2){animation-delay:.08s;}
.fade-in>*:nth-child(3){animation-delay:.14s;}
.fade-in>*:nth-child(4){animation-delay:.20s;}
.fade-in>*:nth-child(5){animation-delay:.26s;}
.fade-in>*:nth-child(6){animation-delay:.32s;}
.fade-in>*:nth-child(7){animation-delay:.38s;}
.fade-in>*:nth-child(n+8){animation-delay:.44s;}
@keyframes scfRise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* 4) 主界面 hero 跑车悬浮 + 光环呼吸 */
.car-float{animation:scfFloat 3.4s ease-in-out infinite;}
@keyframes scfFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.hero .halo{animation:scfHalo 3.4s ease-in-out infinite;}
@keyframes scfHalo{0%,100%{opacity:.8;}50%{opacity:1;filter:brightness(1.25);}}

/* 5) 点亮宝箱金光呼吸（竞品可领取项强提示） */
.tbox.lit{animation:throb 1.6s ease-in-out infinite, scfLitGlow 1.6s ease-in-out infinite;}
@keyframes scfLitGlow{
  0%,100%{box-shadow:0 0 0 1.4px #f6dd93,0 0 10px rgba(246,221,147,.35);}
  50%{box-shadow:0 0 0 1.6px #ffe9ae,0 0 22px rgba(246,221,147,.85);}}

/* 6) 命中/获奖格胜利闪烁 */
.gcell.win,.betcell.win{animation:scfWinFlash .45s ease-in-out 4;}
@keyframes scfWinFlash{
  0%,100%{filter:brightness(1);box-shadow:0 0 0 1.4px #f6dd93;}
  50%{filter:brightness(1.7);box-shadow:0 0 0 2px #ffe9ae,0 0 26px rgba(246,221,147,.95);}}

/* 7) 开奖弹窗：遮罩淡入 + 面板弹性上弹（覆盖原 popIn 为竞品式 bounce） */
.modal-mask{animation:scfMaskIn .22s ease;}
@keyframes scfMaskIn{from{opacity:0;}to{opacity:1;}}
.pop-in{animation:scfBounceUp .42s cubic-bezier(.18,1.25,.4,1);}
@keyframes scfBounceUp{
  0%{transform:translateY(34px) scale(.88);opacity:0;}
  70%{transform:translateY(-4px) scale(1.02);opacity:1;}
  100%{transform:translateY(0) scale(1);}}

/* 8) 结果列表逐行入场（开奖结果项错落滑入） */
.row-in{animation:scfRowIn .4s cubic-bezier(.22,.9,.36,1) backwards;}
@keyframes scfRowIn{from{opacity:0;transform:translateX(-12px);}to{opacity:1;transform:none;}}

/* 9) 骰子揭晓 pop（定格时回弹放大） */
.die.reveal{animation:scfDicePop .55s cubic-bezier(.2,1.5,.4,1);}
@keyframes scfDicePop{0%{transform:scale(.7);}55%{transform:scale(1.14);}100%{transform:scale(1);}}

/* 10) 金币余额变动 tick（数字弹跳提示真实扣费/入账） */
.coin-tick{display:inline-block;animation:scfCoinTick .45s cubic-bezier(.2,1.3,.4,1);}
@keyframes scfCoinTick{0%{transform:scale(1.35);color:#ffe9ae;}100%{transform:scale(1);}}

/* 11) toast 上滑入场 */
.toast{animation:scfToastIn .28s cubic-bezier(.2,1.1,.4,1);}
@keyframes scfToastIn{from{opacity:0;transform:translate(-50%,14px);}to{opacity:1;transform:translate(-50%,0);}}

/* 动效可达性：用户系统设置减少动效时全部停用 */
@media (prefers-reduced-motion: reduce){
  .speedlines,.splash-flash,.splash-car,.splash-title,.btn-red.btn-lg,.actbtn.act-go,
  .fade-in>*,.car-float,.hero .halo,.tbox.lit,.gcell.win,.betcell.win,
  .modal-mask,.pop-in,.row-in,.die.reveal,.coin-tick,.toast{animation:none !important;}}