/* ============ 幸运大转盘 · cj.zblgzg.top ============ */
:root{
  --bg0:#120826; --bg1:#1d0f3d; --bg2:#2a1259;
  --gold:#ffd76a; --gold2:#ffb340;
  --pink:#ff5d8f; --cyan:#57e8ff; --violet:#b983ff;
  --text:#fff; --muted:#b9a8e6;
  --card:#221141; --line:rgba(255,255,255,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(1200px 800px at 50% 18%,var(--bg2) 0%,var(--bg1) 45%,var(--bg0) 100%);
  color:var(--text);overflow:hidden;-webkit-user-select:none;user-select:none;
}
canvas{display:block}

#bg{position:fixed;inset:0;z-index:0}
#fx{position:fixed;inset:0;z-index:60;pointer-events:none}

.stage{position:relative;z-index:10;height:100dvh;display:flex;flex-direction:column;align-items:center;
  padding:clamp(8px,2vh,26px) 12px 0;gap:clamp(6px,1.2vh,14px)}

/* ---------- 标题 ---------- */
.brand{text-align:center;line-height:1.15}
.brand h1{
  font-size:clamp(26px,5.2vmin,56px);font-weight:900;letter-spacing:6px;
  background:linear-gradient(180deg,#fff6d8 0%,var(--gold) 38%,#ff9f45 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,196,86,.55)) drop-shadow(0 2px 0 rgba(80,30,0,.35));
  animation:titlePulse 2.6s ease-in-out infinite;
}
.brand .sub{margin-top:4px;color:var(--muted);font-size:clamp(12px,1.9vmin,17px);letter-spacing:2px}
@keyframes titlePulse{0%,100%{filter:drop-shadow(0 0 10px rgba(255,196,86,.45))}50%{filter:drop-shadow(0 0 22px rgba(255,214,106,.85))}}

/* ---------- 姓名行 ---------- */
.namerow{display:flex;gap:8px;align-items:center}
.namerow input{
  width:min(46vw,260px);padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.08);color:#fff;font-size:14px;outline:none;text-align:center;
  transition:border-color .2s, box-shadow .2s;letter-spacing:1px;
}
.namerow input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,215,106,.18)}
.namerow input::placeholder{color:rgba(255,255,255,.4)}
.namerow.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

/* ---------- 转盘舞台 ---------- */
.wheelwrap{position:relative;width:min(74vmin,640px);max-width:92vw;aspect-ratio:1/1;flex:0 1 auto}
#wheel{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 18px 50px rgba(0,0,0,.55))}
/* conic 光环（转动时加速旋转） */
.glowring{position:absolute;inset:-4.5%;border-radius:50%;pointer-events:none;opacity:.5;
  background:conic-gradient(from 0deg,transparent 0 8%,rgba(87,232,255,.9) 12%,transparent 18% 33%,rgba(255,215,106,.95) 38%,transparent 44% 58%,rgba(255,93,143,.9) 63%,transparent 69% 83%,rgba(185,131,255,.9) 88%,transparent 94%);
  -webkit-mask:radial-gradient(closest-side,transparent 92.5%,#000 93% 100%);
  mask:radial-gradient(closest-side,transparent 92.5%,#000 93% 100%);
  animation:ringSpin 7s linear infinite;filter:blur(1px) saturate(1.4)}
.glowring.fast{animation-duration:1.6s;opacity:.95}
@keyframes ringSpin{to{transform:rotate(360deg)}}

/* 中心按钮 */
.hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:23%;aspect-ratio:1/1;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 34% 28%,#fff3c9 0%,var(--gold) 26%,var(--gold2) 55%,#d97b13 100%);
  box-shadow:0 0 0 6px rgba(255,215,106,.22),0 0 34px rgba(255,180,64,.65),inset 0 -6px 14px rgba(140,60,0,.45),inset 0 6px 12px rgba(255,255,255,.55);
  font-size:clamp(14px,2.6vmin,24px);font-weight:900;color:#6b2d00;letter-spacing:3px;text-indent:3px;
  transition:transform .16s, filter .2s;animation:hubPulse 2.2s ease-in-out infinite;
}
.hub:not(:disabled):hover{transform:translate(-50%,-50%) scale(1.07);filter:brightness(1.08)}
.hub:not(:disabled):active{transform:translate(-50%,-50%) scale(.96)}
.hub:disabled{cursor:not-allowed;filter:grayscale(.15) brightness(.94)}
@keyframes hubPulse{0%,100%{box-shadow:0 0 0 6px rgba(255,215,106,.18),0 0 26px rgba(255,180,64,.5),inset 0 -6px 14px rgba(140,60,0,.45),inset 0 6px 12px rgba(255,255,255,.55)}
  50%{box-shadow:0 0 0 11px rgba(255,215,106,.10),0 0 46px rgba(255,190,70,.85),inset 0 -6px 14px rgba(140,60,0,.45),inset 0 6px 12px rgba(255,255,255,.55)}}
.hub .two{display:block;font-size:.72em;font-weight:800;letter-spacing:5px;text-indent:5px;margin-top:2px}

/* ---------- 底部滚动条 ---------- */
.meta-line{color:rgba(255,255,255,.52);font-size:clamp(11px,1.7vmin,13.5px);text-align:center;line-height:1.5;padding:0 10px}
.meta-line b{color:var(--gold)}
.meta-line .sep{margin:0 9px;opacity:.45}
.ticker{position:fixed;left:0;right:0;bottom:34px;z-index:20;height:40px;overflow:hidden;
  background:linear-gradient(90deg,rgba(255,215,106,.0),rgba(255,215,106,.12) 12%,rgba(255,215,106,.12) 88%,rgba(255,215,106,0));
  border-top:1px solid rgba(255,215,106,.25);border-bottom:1px solid rgba(255,215,106,.25);display:flex;align-items:center}
.tk-inner{display:flex;gap:38px;white-space:nowrap;padding-left:100%;animation:tk 26s linear infinite;font-size:15px}
.tk-inner span{color:#ffe9b0}
.tk-inner b{color:var(--gold);margin:0 2px}
.tk-inner i{color:var(--muted);font-style:normal;margin-left:6px;font-size:13px}
@keyframes tk{to{transform:translateX(-100%)}}
.ticker:empty{display:none}

/* ---------- 页脚 ---------- */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:20;height:34px;display:flex;align-items:center;justify-content:center;
  gap:14px;font-size:12px;color:rgba(255,255,255,.42)}
.foot a{color:rgba(255,255,255,.55);text-decoration:none}
.foot a:hover{color:var(--gold)}

/* 右上角控制 */
.ctrl{position:fixed;right:14px;top:12px;z-index:30;display:flex;gap:8px}
.ctrl button{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--line);cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;font-size:18px;line-height:1;backdrop-filter:blur(6px);
  transition:background .2s, transform .12s;
}
.ctrl button:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}

/* ---------- 登录 / 用户菜单 ---------- */
.ctrl button.on{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#5b2500;border-color:transparent}
.user-menu{position:fixed;right:14px;top:60px;z-index:78;display:none;flex-direction:column;min-width:170px;
  border-radius:14px;background:linear-gradient(160deg,#2c1657,#1a0c38);border:1px solid rgba(255,215,106,.45);
  box-shadow:0 16px 40px rgba(0,0,0,.55);overflow:hidden;padding:6px}
.user-menu.show{display:flex}
.user-menu .um-name{padding:9px 12px;font-size:13px;color:var(--gold);border-bottom:1px dashed rgba(255,255,255,.12);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.user-menu a{display:block;padding:9px 12px;border-radius:9px;color:#fff;text-decoration:none;font-size:14px;cursor:pointer}
.user-menu a:hover{background:rgba(255,255,255,.1)}
.login-ov{position:fixed;inset:0;z-index:82;display:none;align-items:center;justify-content:center;
  background:radial-gradient(700px 500px at 50% 40%,rgba(60,25,120,.5),rgba(8,3,20,.8));backdrop-filter:blur(3px)}
.login-ov.show{display:flex}
.login-panel{width:min(90vw,380px);border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,#2c1657,#1a0c38);border:2px solid rgba(255,215,106,.55);
  box-shadow:0 26px 80px rgba(0,0,0,.65);animation:cardIn .32s cubic-bezier(.2,1.3,.4,1) both}
.login-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid rgba(255,215,106,.28)}
.login-head h3{font-size:16px;color:var(--gold);letter-spacing:3px}
.login-body{padding:14px 16px 18px}
.login-hint{color:var(--muted);font-size:12.5px;line-height:1.8;margin-bottom:12px}
.login-hint b{color:var(--gold)}
.login-body input{width:100%;padding:12px;border-radius:11px;border:1px solid var(--line);background:rgba(0,0,0,.25);
  color:#fff;font-size:14.5px;margin-bottom:10px;outline:none}
.login-body input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,215,106,.16)}
.btn-login{width:100%;padding:12px;border-radius:12px;border:none;cursor:pointer;font-size:15.5px;font-weight:800;
  letter-spacing:6px;text-indent:6px;color:#5b2500;background:linear-gradient(180deg,#ffe9a8,var(--gold) 45%,var(--gold2));
  box-shadow:0 8px 24px rgba(255,180,64,.4),inset 0 2px 0 rgba(255,255,255,.7);transition:transform .14s,filter .2s}
.btn-login:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-login:disabled{opacity:.6;cursor:not-allowed}

/* ---------- 中奖名单弹层 ---------- */
.win-ov{position:fixed;inset:0;z-index:75;display:none;align-items:center;justify-content:center;
  background:radial-gradient(700px 500px at 50% 40%,rgba(60,25,120,.5),rgba(8,3,20,.78));backdrop-filter:blur(3px)}
.win-ov.show{display:flex}
.win-panel{width:min(92vw,660px);max-height:80vh;display:flex;flex-direction:column;border-radius:20px;
  background:linear-gradient(160deg,#2c1657 0%,#1a0c38 60%,#140827 100%);
  border:2px solid rgba(255,215,106,.55);box-shadow:0 26px 80px rgba(0,0,0,.65),0 0 50px rgba(255,190,70,.18) inset;
  animation:cardIn .32s cubic-bezier(.2,1.3,.4,1) both;overflow:hidden}
.win-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,215,106,.28)}
.win-head h3{font-size:17px;color:var(--gold);letter-spacing:3px;font-weight:800}
.win-close{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.08);
  color:#fff;font-size:18px;cursor:pointer;line-height:1}
.win-close:hover{background:rgba(255,255,255,.18)}
.win-meta{padding:9px 18px 4px;color:var(--muted);font-size:12.5px}
.win-meta b{color:var(--gold)}
.win-list{overflow-y:auto;padding:4px 12px 14px}
.win-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px dashed rgba(255,255,255,.09);font-size:14px}
.win-row:last-child{border-bottom:none}
.win-row .idx{width:34px;text-align:right;color:var(--muted);font-size:12.5px;flex:none}
.win-row .time{width:98px;color:var(--muted);font-size:12.5px;font-family:ui-monospace,Consolas,monospace;flex:none}
.win-row .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-row .prize{color:var(--gold);font-weight:700;white-space:nowrap}
.win-row.top .prize{color:#fff3c9;text-shadow:0 0 12px rgba(255,200,80,.75)}
.win-row.top .who{color:#ffe9b0}
.win-empty{padding:28px 10px;text-align:center;color:var(--muted);font-size:13.5px}
.ticker{cursor:pointer}

/* ---------- 闪光 / 震屏 ---------- */
.flash{position:fixed;inset:0;z-index:70;pointer-events:none;background:#fff;opacity:0;transition:opacity .5s}
.flash.go{opacity:.88;transition:opacity .06s}
.shake{animation:shake8 .4s}
@keyframes shake8{0%,100%{transform:translate(0,0)}15%{transform:translate(-8px,4px)}30%{transform:translate(7px,-5px)}45%{transform:translate(-6px,-3px)}60%{transform:translate(5px,4px)}75%{transform:translate(-3px,2px)}}
.shake-wrap{position:relative;z-index:10}
body.shaking{animation:shake8 .42s}

/* ---------- 中奖卡 ---------- */
.card-ov{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:radial-gradient(700px 500px at 50% 45%,rgba(60,25,120,.55),rgba(8,3,20,.82));backdrop-filter:blur(3px)}
.card-ov.show{display:flex}
.prize-card{position:relative;width:min(88vw,520px);border-radius:26px;padding:34px 30px 26px;text-align:center;
  background:linear-gradient(160deg,#3a1f6e 0%,#241046 55%,#180a33 100%);
  border:2px solid rgba(255,215,106,.75);
  box-shadow:0 0 0 8px rgba(255,215,106,.10),0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(255,190,70,.35) inset;
  animation:cardIn .62s cubic-bezier(.2,1.4,.4,1) both;
}
.prize-card::before{content:"";position:absolute;inset:-70px;z-index:-1;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,215,106,.32),transparent 25%,rgba(87,232,255,.28) 50%,transparent 75%,rgba(255,93,143,.30));
  animation:ringSpin 6s linear infinite;filter:blur(26px)}
@keyframes cardIn{from{transform:perspective(1000px) rotateY(72deg) scale(.55);opacity:0}
  to{transform:perspective(1000px) rotateY(0) scale(1);opacity:1}}
.prize-card .cong{color:var(--gold);font-size:clamp(16px,2.4vmin,20px);letter-spacing:4px}
.prize-card .who{font-size:clamp(17px,2.6vmin,22px);margin-top:8px;color:#fff}
.prize-card .pname{
  margin:16px 0 6px;font-size:clamp(34px,7.4vmin,64px);font-weight:900;letter-spacing:6px;
  background:linear-gradient(180deg,#fff6d8,var(--gold) 45%,#ff9f45);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,196,86,.65));
}
.prize-card .medal{font-size:clamp(40px,8vmin,64px);line-height:1;animation:medalPop .8s .15s both cubic-bezier(.2,1.6,.4,1)}
@keyframes medalPop{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}
.prize-card .tip{margin-top:12px;color:var(--muted);font-size:13.5px;line-height:1.7}
.prize-card .go{
  margin-top:20px;width:100%;padding:14px;border-radius:14px;border:none;cursor:pointer;
  font-size:17px;font-weight:800;letter-spacing:6px;text-indent:6px;color:#5b2500;
  background:linear-gradient(180deg,#ffe9a8,var(--gold) 45%,var(--gold2));
  box-shadow:0 8px 24px rgba(255,180,64,.4),inset 0 2px 0 rgba(255,255,255,.7);
  transition:transform .14s, filter .2s;
}
.prize-card .go:hover{transform:translateY(-2px);filter:brightness(1.06)}
.prize-card .go:active{transform:translateY(0) scale(.98)}

/* ---------- toast ---------- */
#toastbox{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{padding:10px 20px;border-radius:12px;background:rgba(20,10,40,.92);border:1px solid var(--line);
  font-size:14px;box-shadow:0 8px 30px rgba(0,0,0,.5);animation:toastIn .25s both}
.toast.err{border-color:rgba(255,93,143,.6);color:#ffd3e2}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ======================= 管理后台 ======================= */
.adm{max-width:1100px;margin:0 auto;padding:22px 16px 60px;overflow-y:auto;height:100dvh}
body.admbody{overflow:auto}
.adm h1{font-size:22px;letter-spacing:2px;margin-bottom:4px;color:var(--gold)}
.adm .sub2{color:var(--muted);font-size:13px;margin-bottom:16px}
.adm-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.adm-tabs button{padding:9px 18px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-size:14px}
.adm-tabs button.on{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#5b2500;font-weight:800;border-color:transparent}
.panel{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}
.panel h3{font-size:15px;margin-bottom:10px;color:#ffe9b0;letter-spacing:1px}
.hint{color:var(--muted);font-size:12.5px;line-height:1.8}
table.adm-tb{width:100%;border-collapse:collapse;font-size:13.5px}
.adm-tb th{color:var(--muted);font-weight:600;text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:12.5px}
.adm-tb td{padding:6px 6px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:middle}
.adm-tb input[type=text],.adm-tb input[type=number]{width:100%;min-width:56px;padding:7px 9px;border-radius:8px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:#fff;font-size:13.5px}
.adm-tb input[type=color]{width:34px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:transparent;cursor:pointer}
.adm-tb .mid{text-align:center}
.adm-tb .prob{color:var(--cyan);font-weight:700;white-space:nowrap}
.adm-tb .off{opacity:.45}
.btnx{padding:7px 13px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:13px;white-space:nowrap}
.btnx:hover{background:rgba(255,255,255,.16)}
.btnx.gold{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#5b2500;font-weight:800;border-color:transparent}
.btnx.danger{border-color:rgba(255,93,143,.5);color:#ffb9ce}
.btnx.mini{padding:3px 9px;font-size:12px;border-radius:7px}
.btnx:disabled{opacity:.45;cursor:not-allowed}
.row-flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.field input[type=text],.field input[type=number],.field input[type=password]{width:100%;max-width:420px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:#fff;font-size:14px}
.switch{display:flex;align-items:center;gap:8px;margin:9px 0;font-size:14px;cursor:pointer}
.switch input{width:18px;height:18px;accent-color:var(--gold2);cursor:pointer}
.adm .stat-line{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:10px}
.adm .stat-line b{color:var(--gold)}
.tag-ok{color:#7ee2a8}.tag-no{color:#ffb340}
.login-box{max-width:360px;margin:14vh auto 0;text-align:center}
.login-box .panel{padding:26px 24px}
.login-box h1{margin-bottom:16px}
.login-box input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:#fff;font-size:15px;margin-bottom:12px}
.linklike{color:var(--cyan);cursor:pointer;text-decoration:underline;font-size:13px}
@media (max-width:640px){
  .stage{gap:8px}
  .brand h1{letter-spacing:3px}
  .ticker{bottom:30px;height:34px}
  .adm-tb{font-size:12.5px}
  .adm{padding:14px 10px 60px}
}
@media (prefers-reduced-motion:reduce){
  .glowring,.hub,.brand h1,.prize-card::before{animation:none!important}
}