/* ===== gaming-rgb · 电竞 RGB ===== */
:root{
  --bg:#0a0a0f; --card:#121219; --card2:#181822;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --ink:#f0f1f8; --sub:#9a9ab0; --dim:#5d5d76; --c:#00e5ff; --m:#ff3df0;
  --disp:"Arial","Helvetica Neue","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --sans:-apple-system,"Segoe UI","PingFang SC",sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  --maxw:1000px; --clip:12px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#eef0f5; --card:#ffffff; --card2:#f3f4f9;
    --line:rgba(20,20,40,.1); --line2:rgba(20,20,40,.18);
    --ink:#10101e; --sub:#55556e; --dim:#9595ad; --c:#0098c2; --m:#c91fb0;
    color-scheme:light;
  }
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;min-height:100vh;position:relative;
  padding:0 clamp(14px,4vw,34px) calc(40px + env(safe-area-inset-bottom));}
a{color:inherit;text-decoration:none;}
::selection{background:var(--m);color:#fff;}
kbd{font-family:var(--mono);font-size:11.5px;background:var(--card2);border:1px solid var(--line2);border-radius:4px;padding:1px 6px;color:var(--c);}
.clip{clip-path:polygon(var(--clip) 0,100% 0,100% calc(100% - var(--clip)),calc(100% - var(--clip)) 100%,0 100%,0 var(--clip));}

.carbon{position:fixed;inset:0;z-index:-1;opacity:.5;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 4px),
  radial-gradient(70% 50% at 50% 0%,color-mix(in srgb,var(--c) 12%,transparent),transparent),var(--bg);}

@keyframes rgbspin{to{filter:hue-rotate(360deg);}}

/* hud / announcement */
.hud{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:14px;font-family:var(--mono);
  padding:calc(12px + env(safe-area-inset-top)) 0 12px;border-bottom:1px solid var(--line2);}
.hud-tag{background:var(--m);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:3px 9px;flex:none;}
.hud p{flex:1;font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hud-clk{font-size:12.5px;color:var(--c);flex:none;}

/* bar / header */
.bar{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0;}
.gamer{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(18px,4vw,24px);letter-spacing:-.01em;text-transform:uppercase;}
.gamer-hex{width:18px;height:20px;background:linear-gradient(135deg,var(--c),var(--m));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);flex:none;}
.rgbtn{position:relative;font-family:var(--mono);font-size:12px;font-weight:700;background:var(--card);border:1px solid var(--line2);color:var(--ink);padding:8px 16px;cursor:pointer;transition:.18s;}
.rgbtn:hover{border-color:var(--c);color:var(--c);box-shadow:0 0 16px -4px var(--c);}

/* main */
main{max-width:var(--maxw);margin:0 auto;}
section{margin-top:clamp(28px,5vw,48px);}

.hero{text-align:center;padding-top:clamp(16px,4vw,30px);}
.rank{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--c);margin-bottom:16px;}
.hero h1{font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(40px,12vw,96px);line-height:.92;letter-spacing:-.03em;text-transform:uppercase;word-break:break-word;
  background:linear-gradient(120deg,var(--c),var(--m));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px color-mix(in srgb,var(--m) 30%,transparent);}
.hero-p{max-width:560px;margin:18px auto 0;color:var(--sub);font-size:clamp(14.5px,2.6vw,17px);}

/* rgb frame / main domain */
.rgbframe{padding:2px;background:conic-gradient(from 0deg,var(--c),var(--m),#ffe24a,var(--c));animation:rgbspin 6s linear infinite;}
.card{background:var(--card);padding:clamp(24px,5vw,38px);}
.card-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);}
.card-key{font-size:11.5px;letter-spacing:.08em;color:var(--dim);}
.card-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--c);}
.card-live i{width:7px;height:7px;border-radius:999px;background:var(--c);box-shadow:0 0 8px var(--c);animation:bb 2.4s infinite;}
@keyframes bb{50%{opacity:.4;}}
.card-domain{font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(24px,7vw,52px);letter-spacing:-.02em;margin:16px 0 24px;word-break:break-all;}
.card-act{display:flex;flex-wrap:wrap;gap:12px;}
.play{font-family:var(--mono);font-size:14px;font-weight:700;padding:13px 26px;cursor:pointer;border:none;transition:.16s;}
.play-go{background:var(--c);color:#06060a;box-shadow:0 0 22px -6px var(--c);}
.play-go:hover{box-shadow:0 0 30px -4px var(--c);transform:translateY(-1px);}
.play-cp{background:transparent;color:var(--ink);border:1px solid var(--line2);}
.play-cp:hover{border-color:var(--m);color:var(--m);}
.card-save{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:12.5px;color:var(--sub);cursor:pointer;}
.card-save:hover{color:var(--c);}

/* zones */
.zone-h{display:flex;align-items:center;gap:13px;font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(19px,4.5vw,30px);letter-spacing:-.02em;margin-bottom:20px;}
.zone-no{font-family:var(--mono);font-style:normal;font-size:13px;color:#06060a;background:var(--c);padding:3px 9px;}

/* slots / backups */
.slots{display:grid;gap:11px;}
.slot{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);padding:14px 18px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:.18s;}
.slot:hover{border-color:var(--c);box-shadow:0 0 22px -12px var(--c);transform:translateX(4px);}
.slot-n{font-family:var(--mono);font-size:13px;color:var(--m);}
.slot-h{flex:1;font-size:clamp(13.5px,3.2vw,16px);word-break:break-all;}
.slot-ok{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--c);}
.slot-ok i{width:6px;height:6px;border-radius:999px;background:var(--c);box-shadow:0 0 6px var(--c);}
.slot-cp{font-family:var(--mono);font-size:12px;background:var(--card2);border:1px solid var(--line2);color:var(--ink);padding:6px 13px;cursor:pointer;transition:.16s;}
.slot-cp:hover{background:var(--c);color:#06060a;border-color:var(--c);}

/* quests / notice */
.quests{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.quest{background:var(--card);border:1px solid var(--line);padding:22px;}
.quest-n{font-family:var(--mono);font-size:13px;color:var(--m);display:block;margin-bottom:10px;}
.quest b{display:block;margin-bottom:7px;}
.quest p{color:var(--sub);font-size:13.5px;}
.quest-pin{margin-top:14px;font-family:var(--mono);background:var(--card2);border:1px solid var(--line2);border-left:4px solid var(--m);padding:14px 18px;color:var(--sub);font-size:12.5px;}
.quest-pin strong{color:var(--c);}

/* links / contact */
.links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.link{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);padding:22px;cursor:pointer;transition:.18s;}
.link:hover{border-color:var(--m);box-shadow:0 0 22px -12px var(--m);}
.link-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dim);}
.link-v{font-size:15px;font-weight:600;word-break:break-all;}

/* footer */
.foot{max-width:var(--maxw);margin:clamp(40px,7vw,64px) auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:20px;border-top:1px solid var(--line2);}
.foot-id{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:14px;}
.foot nav{display:flex;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:12px;}
.foot nav a{color:var(--sub);transition:.16s;}
.foot nav a:hover{color:var(--c);}
.foot small{font-family:var(--mono);color:var(--dim);font-size:12px;width:100%;}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:60;opacity:0;pointer-events:none;display:inline-flex;align-items:center;gap:9px;
  background:var(--card);border:1px solid var(--c);padding:12px 22px;font-size:14px;color:var(--ink);box-shadow:0 0 26px -8px var(--c);transition:.28s cubic-bezier(.2,.8,.2,1);}
.toast span[aria-hidden]{color:var(--c);}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}

/* reveal */
.in{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);}
.in.vis{opacity:1;transform:none;}

@media (max-width:760px){.quests,.links{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .in{opacity:1;transform:none;}.rgbframe{animation:none!important;}
}