/* Root & layout */
:root{
  --bg:#0a0b0d; --bg2:#0f1217;
  --text:#eef2f7; --muted:#98a4b8;
  --gold1:#ffe59a; --gold2:#f4c45a; --gold3:#c9952e;
  --cyan:#62e4ff;
  --gap:18px; --visible:5;
  --icon-w:66.55px; --icon-h:85.52px; --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 12% 10%, rgba(21,32,50,0.31) 0%, transparent 60%),
    radial-gradient(1000px 700px at 88% 88%, rgba(19,51,59,0.30) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed;
  /* inset:-200vh -200vw; */ /* 为避免编辑器告警，使用四边写法 */
  top:-200vh; right:-200vw; bottom:-200vh; left:-200vw;
  background:
    linear-gradient(to right, rgba(255,255,255,0.0625) 1px, transparent 1px) 0 0/42px 42px,
    linear-gradient(to bottom, rgba(255,255,255,0.0625) 1px, transparent 1px) 0 0/42px 42px;
  mix-blend-mode:overlay; opacity:.28;
  transform:perspective(740px) rotateX(58deg) translateY(42vh);
  animation:gridMove 22s linear infinite; pointer-events:none;
}
@keyframes gridMove{to{transform:perspective(740px) rotateX(58deg) translateY(0)}}

.container{max-width:1100px;margin:0 auto;padding:56px 18px 96px}
h1.title{
  margin:0 0 10px;text-align:center;font-weight:800;font-size:clamp(30px,6vw,52px);letter-spacing:.6px;
  background:linear-gradient(90deg,var(--gold1),#ffffff,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 26px #62e4ff30;
}
p.subtitle{ text-align:center;color:var(--muted);margin:8px auto 20px;max-width:900px }

/* Card */
.card{
  margin:0 auto 28px;max-width:820px;border-radius:28px;
  background:linear-gradient(180deg, #0f121bfa, #0c0f16f0);
  backdrop-filter: blur(10px);
  box-shadow:0 24px 60px #000a, inset 0 0 0 1px #ffffff10, inset 0 0 60px #62e4ff14;
  padding:30px 26px 26px;
}
.status{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;font-weight:800}
.dot{width:10px;height:10px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 0 #62e4ff80;animation:pulse 1.3s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #62e4ff80}70%{box-shadow:0 0 0 12px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}

.ring-wrap{ width:320px; height:320px; margin:0 auto 10px; position:relative; display:grid; place-items:center; }
.ring{ position:absolute; top:0; right:0; bottom:0; left:0; transform:rotate(-90deg); }
.ring circle.bg{ stroke:#1a2134; opacity:.95 }
.ring circle.fg{ stroke:url(#goldGrad); stroke-linecap:round; transition:stroke-dashoffset .35s linear; }
.ring circle.halo{ stroke:#ffe9a3; stroke-width:28; opacity:0; filter:blur(8px) drop-shadow(0 0 10px #f4c45a); }
.halo.spark{ animation:ringFlash .5s ease-out forwards }
@keyframes ringFlash{ 0%{opacity:.75} 100%{opacity:0} }

.ring-center-img{
  width:130px;height:130px;border-radius:24px;overflow:hidden;background:#0b0f17;
  display:grid;place-items:center;box-shadow:0 10px 20px #000a, inset 0 0 0 1px #20263a; position:relative;
}
.ring-center-img img{width:100%;height:100%;object-fit:contain;display:block}

.time-under{
  margin-top:12px;text-align:center;font-family:Orbitron,monospace;font-size:36px;font-weight:700;letter-spacing:1.4px;color:#fff;
  text-shadow:0 0 14px #62e4ff33, 0 0 8px #f4c45a22;
}
.hint{text-align:center;color:#b9c2cf;font-size:12px;margin-top:6px}

.cta-wrap{text-align:center;margin-top:16px}
.cta{
  display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:18px;font-weight:900;letter-spacing:.35px;text-decoration:none;color:#0b0d12;
  background:linear-gradient(90deg,#fff0b0,var(--gold2),#62e4ff,var(--gold3));
  background-size:240% 100%;
  box-shadow:0 14px 32px #06121c, inset 0 -2px 0 #00000040;
  transition:transform .18s, background-position .6s, box-shadow .18s;
}
.cta:hover{ transform:translateY(-1px); background-position:100% 0; box-shadow:0 18px 44px #06121c }

/* Marquee */
.grand{ margin-top:30px; }
.grand-viewport{ overflow:hidden; border-radius:24px; }
.roller{ position:relative; width:100% }
.strip{ position:absolute; top:0; left:0; display:flex; gap:var(--gap); padding:8px; will-change:transform; transform:translate3d(0,0,0) }
.item{ flex:0 0 calc((100% - var(--gap) * 4) / var(--visible)); display:flex; flex-direction:column; align-items:center; gap:8px }
.icon{
  width:var(--icon-w); height:var(--icon-h); border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg,#121826,#0c111a);
  box-shadow: 0 10px 22px #000c, inset 0 0 0 1px #283146, inset 0 0 30px #62e4ff12, 0 0 0 1px #1b243b80;
}
.img{ width:100%; height:100%; object-fit:cover; display:block }
.meta{ text-align:center; line-height:1.25 }
.who{ color:#9ff0ac; font-weight:800; font-size:12px }
.win{ color:#cbd5e1; font-size:11px; opacity:.9 }
.amt{ color:#f4c45a; font-weight:800; font-size:12px }

/* Modal */
.modal{ position:fixed; top:0; right:0; bottom:0; left:0; background:#0008; display:none; place-items:center; z-index:1000; }
.modal.show{ display:grid; }
.modal-card{
  width:min(520px, 92vw); border-radius:18px; padding:22px;
  background:linear-gradient(180deg,#0f121b,#0c0f17); color:#eef2f7;
  box-shadow:0 24px 60px #000c, inset 0 0 0 1px #ffffff12;
}
.modal-title{ font-weight:800; margin:0 0 12px; display:flex; justify-content:space-between; align-items:center }
.modal-close{ background:#1b2234; color:#fff; border:0; border-radius:10px; padding:6px 10px; cursor:pointer }
.code-chip{ display:flex; gap:10px; align-items:center; margin:8px 0 12px; }
.code-box{
  flex:1; text-align:center; padding:12px 14px; border-radius:12px; background:#0b0f17;
  border:1px solid #263149; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:18px; font-weight:800; letter-spacing:.6px;
  user-select:all; cursor:pointer;
}
.copy-btn{ padding:12px 14px; border-radius:12px; border:1px solid #263149; background:#fff0b0; color:#0b0d12; font-weight:900; cursor:pointer }
.copy-btn.ok{ background:#23c55e; color:#fff }
.small{ color:#9aa8bd; font-size:13px }
.inbox-text p{ color:#eef2f7 }
.inbox-steps{ margin:12px 0 10px; padding-left:18px; color:#d7dbe4; line-height:1.6 }
.inbox-steps li+li{ margin-top:6px }
.inbox-note{ margin:8px 0 10px; color:#9aa8bd; font-size:13px }
.guide-wrap{ margin-top:10px; display:grid; place-items:center }
.guide-img{
  width:100%; height:auto; max-height:360px; object-fit:contain;
  border-radius:14px; background:#0b0f17;
  border:1px solid #263149; box-shadow:0 10px 24px #000a, inset 0 0 0 1px #ffffff10;
}

/* Center ticker */
.center-ticker{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  white-space:nowrap; line-height:1; display:inline-block;
  font-family:Orbitron, ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight:900; font-size:30px; letter-spacing:1px;
  color:#ffe59a; text-shadow:0 0 18px rgba(244,196,90,.45), 0 0 8px rgba(98,228,255,.35);
  pointer-events:none; will-change:transform,opacity;
}
.center-ticker.bump{ animation:amtBump .18s ease-out }
@keyframes amtBump{
  0%{ transform:translate(-50%,-50%) scale(1) }
  50%{ transform:translate(-50%,-50%) scale(1.06) }
  100%{ transform:translate(-50%,-50%) scale(1) }
}