:root{
  --bg:#f7f8fa; --panel:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --line:#e5e7eb; --accent:#7c3aed; --accent2:#0ea5e9; --good:#16a34a; --bad:#dc2626;
  --gold:#b45309;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;}
header{background:linear-gradient(90deg,#4c1d95,#7c3aed);color:#fff;padding:12px 18px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
header h1{font-size:17px;margin:0;font-weight:700;letter-spacing:.5px;}
.stats{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;}
.stats b{color:#fde68a;}
nav{display:flex;gap:6px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;}
nav button{border:1px solid var(--line);background:#fff;color:var(--ink);padding:7px 14px;
  border-radius:8px;cursor:pointer;font-size:13px;}
nav button.active{background:var(--accent);color:#fff;border-color:var(--accent);}
main{padding:18px;max-width:1100px;margin:0 auto;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px;}
.card h2{margin:0 0 12px;font-size:15px;border-left:4px solid var(--accent);padding-left:8px;}
.grid{display:grid;gap:12px;}
.cols2{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.item{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fcfcfd;}
.item h3{margin:0 0 6px;font-size:14px;}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:#ede9fe;color:#6d28d9;margin:2px 2px 0 0;}
.tag.b{background:#fee2e2;color:#b91c1c;}
.tag.g{background:#dcfce7;color:#15803d;}
.tag.gold{background:#fef3c7;color:#b45309;}
.muted{color:var(--muted);font-size:12px;}
button.act{background:var(--accent);color:#fff;border:none;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px;}
button.act.alt{background:var(--accent2);}
button.act.ghost{background:#fff;color:var(--accent);border:1px solid var(--accent);}
button.act:disabled{background:#cbd5e1;cursor:not-allowed;}
input,select{padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{border:1px solid var(--line);padding:6px 8px;text-align:left;}
th{background:#f3f4f6;}
.pos{color:var(--good);} .neg{color:var(--bad);}
.log{max-height:220px;overflow:auto;font-size:12.5px;line-height:1.6;border:1px dashed var(--line);padding:10px;border-radius:8px;background:#fafafa;}
.log div{padding:2px 0;border-bottom:1px dotted #eee;}
.mask{position:fixed;inset:0;background:rgba(17,24,39,.45);display:none;align-items:center;justify-content:center;z-index:50;}
.mask.show{display:flex;}
.modal{background:#fff;border-radius:14px;padding:20px;width:min(680px,94vw);max-height:90vh;overflow:auto;}
.modal h3{margin-top:0;}
.close{float:right;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;}
.bar{height:8px;background:#eee;border-radius:6px;overflow:hidden;margin-top:4px;}
.bar > i{display:block;height:100%;background:var(--accent);}
.banner{padding:10px 14px;border-radius:10px;margin-bottom:14px;font-size:13px;}
.banner.win{background:#dcfce7;color:#166534;} .banner.lose{background:#fee2e2;color:#991b1b;}
.region-h{font-size:12px;color:#6d28d9;font-weight:700;letter-spacing:1px;margin:2px 0;}
.env{background:#f5f3ff;border:1px solid #ede9fe;border-radius:10px;padding:8px 12px;font-size:12.5px;margin-bottom:12px;}
/* 用户栏 */
.userbox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.uchip{font-size:12.5px;background:rgba(255,255,255,.16);padding:4px 10px;border-radius:20px;}
.uchip.warn{background:#fef3c7;color:#92400e;}
.ubtn{padding:4px 12px;font-size:12.5px;}
.banner.guest{background:#fffbeb;border:1px solid #fde68a;color:#92400e;}
.quest-done{opacity:.55;}
.quest-now{border-color:var(--accent);box-shadow:0 0 0 2px #ede9fe;}
#stageOverlay{position:fixed;inset:0;background:rgba(15,10,30,.93);display:none;
  flex-direction:column;align-items:center;justify-content:center;z-index:60;color:#fff;}
#stageOverlay.show{display:flex;}
.stage{width:min(560px,86vw);height:300px;position:relative;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#2a1b4a,#0f0a1e);box-shadow:0 0 40px rgba(124,58,237,.55);}
.curtain{position:absolute;top:0;height:100%;width:50%;z-index:5;
  background:repeating-linear-gradient(90deg,#7f1d1d,#991b1b 14px,#7f1d1d 28px);
  transition:transform 1.1s cubic-bezier(.6,0,.3,1);}
.curtain.l{left:0;} .curtain.r{right:0;}
.stage.open .curtain.l{transform:translateX(-100%);}
.stage.open .curtain.r{transform:translateX(100%);}
.spot{position:absolute;top:-20px;width:150px;height:340px;z-index:3;filter:blur(2px);
  background:radial-gradient(ellipse at top,rgba(253,230,138,.55),transparent 70%);
  transform-origin:top center;animation:sway 2.2s ease-in-out infinite;}
.spot.s1{left:18%;} .spot.s2{left:41%;animation-delay:.4s;} .spot.s3{left:64%;animation-delay:.8s;}
@keyframes sway{0%,100%{transform:rotate(-14deg);}50%{transform:rotate(14deg);}}
.actor{position:absolute;bottom:6px;width:52px;height:118px;background:#111827;z-index:4;
  border-radius:26px 26px 8px 8px;opacity:0;transition:opacity .8s ease .6s;}
.actor.a1{left:23%;} .actor.a2{left:45%;bottom:10px;height:130px;transition-delay:.75s;}
.actor.a3{left:67%;transition-delay:.9s;}
.stage.open .actor{opacity:.95;}
.scorecard{margin-top:18px;text-align:center;opacity:0;transition:opacity .6s ease 1.3s;}
.stage.open .scorecard{opacity:1;}
.scorecard .stars{font-size:30px;color:#fde68a;letter-spacing:4px;}
.scorecard .score{font-size:15px;margin-top:6px;color:#e9d5ff;}

/* ==================== 手机端 H5 适配 ==================== */
@media (max-width:768px){
  header{padding:10px 12px;}
  header h1{font-size:15px;}
  .stats{gap:6px 10px;font-size:12px;width:100%;}
  /* 导航：横向滑动条，不换行 */
  nav{padding:8px 10px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  nav::-webkit-scrollbar{display:none;}
  nav button{flex:0 0 auto;padding:9px 13px;font-size:13px;}
  main{padding:10px;}
  .card{padding:12px;border-radius:10px;margin-bottom:12px;}
  .card h2{font-size:14px;}
  .cols2{grid-template-columns:1fr;}
  /* 宽表格：卡片内横向滑动 */
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
  /* 触控友好 */
  button.act{padding:10px 16px;font-size:14px;}
  input,select{padding:9px 10px;font-size:14px;}
  .modal{width:100vw;max-height:100vh;height:100%;border-radius:0;padding:14px;}
  .mask{align-items:stretch;}
  .log{max-height:180px;font-size:12px;}
  .stage{height:220px;}
  .actor{width:42px;height:96px;}
  .actor.a2{height:106px;}
  .spot{width:110px;height:260px;}
  .scorecard .stars{font-size:24px;}
  .scorecard .score{font-size:13px;}
  .env{font-size:12px;}
}