@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Space+Grotesk:wght@500;700&display=swap');
:root{--bg:#0E1017;--hdr:#12151D;--card:#171A23;--card2:#1F2330;--tx:#EEF0F5;--tx2:#C3C8D4;--mut:#A3AABB;--red:#FF6A5C;--red-t:#FF8F84;--blue:#4C8DFF;--blue-t:#8DB6FF;--gold:#F4C152;--cyan:#A9C6FF;--green:#7EE2AE;--line:#262B39;--line2:#2C3142;--line3:#3A4052;
  --num:'Space Grotesk','Noto Sans SC',sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.55 'Noto Sans SC',-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh}
a{color:var(--cyan);text-decoration:none}a:hover{color:#D6E4FF}
code,pre{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;font-size:12.5px}
code{background:#0E1017;border:1px solid var(--line);border-radius:5px;padding:0 4px}
pre{background:#0E1017;border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;white-space:pre-wrap;word-break:break-word}

/* ---------- 动画 ---------- */
@keyframes cf-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes cf-row{from{opacity:0;transform:translateX(-10px)}}
@keyframes cf-in{from{opacity:0;transform:scale(.4)}}
@keyframes cf-pop{from{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}}
@keyframes cf-drop{from{opacity:0;transform:translateY(-24px)}60%{opacity:1;transform:translateY(3px)}}
@keyframes cf-fill{from{transform:scaleX(0)}}
@keyframes cf-breathe{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes cf-pulse{0%{box-shadow:0 0 0 0 rgba(126,226,174,.6)}100%{box-shadow:0 0 0 7px rgba(126,226,174,0)}}
@keyframes cf-tick{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
main>section,main>aside,main.single>.card,main.single>.grid2,.plays>.card{animation:cf-rise .55s var(--ease) both}
main>aside{animation-delay:.12s}
main.single>.card:nth-child(2),.plays>.card:nth-child(2){animation-delay:.08s}
main.single>.card:nth-child(3),.plays>.card:nth-child(3){animation-delay:.16s}
main.single>.grid2{animation-delay:.24s}
table.lb tr{animation:cf-row .4s var(--ease) both}
table.lb tr:nth-child(2){animation-delay:.04s}table.lb tr:nth-child(3){animation-delay:.08s}table.lb tr:nth-child(4){animation-delay:.12s}
table.lb tr:nth-child(5){animation-delay:.16s}table.lb tr:nth-child(6){animation-delay:.2s}table.lb tr:nth-child(7){animation-delay:.24s}
table.lb tr:nth-child(8){animation-delay:.28s}table.lb tr:nth-child(9){animation-delay:.32s}table.lb tr:nth-child(n+10){animation-delay:.36s}
.dot.on{animation:cf-pulse 1.6s ease-out infinite}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- 顶栏 ---------- */
header.top{display:flex;align-items:center;gap:14px 24px;padding:12px 24px;flex-wrap:wrap;border-bottom:1px solid var(--line);background:var(--hdr);position:sticky;top:0;z-index:20}
header.top .logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900;letter-spacing:2px;white-space:nowrap;color:var(--tx);text-decoration:none}
header.top .logo svg{flex:none;transition:transform .3s var(--ease)}
header.top .logo:hover svg{transform:rotate(-8deg) scale(1.06)}
header.top .logo span{font-family:var(--num);color:var(--mut);font-weight:500;font-size:12px;letter-spacing:1px}
header.top .search{position:relative;margin-left:auto}
header.top .search input{background:var(--card);color:var(--tx);border:1px solid var(--line2);border-radius:10px;padding:0 12px;height:40px;width:250px;font-size:14px;font-family:inherit;transition:border-color .2s}
header.top .search input:focus{outline:none;border-color:var(--blue)}
header.top .drop{position:absolute;top:110%;left:0;right:0;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:6px;z-index:30;max-height:320px;overflow:auto;animation:cf-rise .2s var(--ease) both}
header.top .drop a{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;color:var(--tx);text-decoration:none}
header.top .drop a:hover{background:var(--card2)}
header.top .pill{font-size:13px;color:var(--mut);white-space:nowrap}
#hdrUser{display:flex;align-items:center;gap:12px;white-space:nowrap}
#hdrUser .me{display:flex;align-items:center;gap:8px;color:var(--tx);text-decoration:none;background:var(--card2);border-radius:22px;padding:4px 14px 4px 4px;transition:background .2s}
#hdrUser .me:hover{background:#262B39}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#55607a;margin:0 6px;vertical-align:middle}.dot.on{background:#5BD69A}
.av{border-radius:50%;vertical-align:middle;object-fit:cover;flex:none}
.av0{display:inline-flex;align-items:center;justify-content:center;background:var(--line2);color:var(--red-t);font-weight:700;font-size:12px}
nav.tabs{display:flex;gap:4px;flex-wrap:wrap}
nav.tabs a{color:var(--mut);padding:9px 14px;border-radius:8px;font-size:15px;text-decoration:none;transition:background .15s,color .15s}
nav.tabs a.active{background:var(--card2);color:var(--tx);font-weight:500}
nav.tabs a:hover{color:var(--tx);background:#1A1E29}

/* ---------- 按钮与输入 ---------- */
button.btn,a.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;background:var(--card2);color:var(--tx);border:1px solid var(--line3);border-radius:10px;padding:0 16px;cursor:pointer;font-size:14px;font-family:inherit;text-decoration:none;transition:transform .15s,filter .15s,background .2s,border-color .2s}
button.btn:hover:not(:disabled),a.btn:hover{transform:translateY(-2px);filter:brightness(1.12);color:var(--tx)}
button.btn:active:not(:disabled){transform:scale(.97)}
button.btn:disabled{opacity:.4;cursor:not-allowed}
button.btn.go,a.btn.go{background:var(--tx);color:#0E1017;border-color:transparent;font-weight:700}
a.btn.go:hover{color:#0E1017}
button.btn.cta{background:var(--red);color:#1A0B09;border:0;font-size:18px;font-weight:900;letter-spacing:2px;min-height:56px;padding:0 32px;border-radius:12px}
button.btn.on{background:#2A2410;border-color:var(--gold);color:var(--tx);font-weight:700}
button.btn.ghost,a.btn.ghost{background:transparent;border:1px solid var(--line3)}
button.btn.small,a.btn.small{min-height:34px;padding:0 12px;font-size:13px}
.inp,select,input[type=text],textarea{background:var(--bg);color:var(--tx);border:1px solid var(--line2);border-radius:10px;padding:0 12px;min-height:40px;font-size:14px;font-family:inherit;transition:border-color .2s}
textarea{padding:8px 12px}
.inp:focus,select:focus,input[type=text]:focus{outline:none;border-color:var(--blue)}
.inp.code{width:120px;text-transform:uppercase;letter-spacing:3px;font-weight:700;font-family:var(--num)}

/* ---------- 布局 ---------- */
main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;padding:28px 24px 48px;max-width:1280px;margin:0 auto}
main.single{display:block;max-width:980px}
main.single.wide{max-width:1240px}
@media(max-width:960px){main{grid-template-columns:1fr;padding:16px 16px 32px;gap:16px}header.top{padding:10px 16px}header.top .search input{width:170px}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:20px}
.card h3{margin:0 0 12px;font-size:14px;color:var(--mut);font-weight:500;letter-spacing:.5px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.card h2{margin:0 0 10px;font-size:20px}
.sub{color:var(--mut);font-size:13px}
.r{color:var(--red-t)}.b{color:var(--blue-t)}.g{color:var(--green)}.gold{color:var(--gold)}
.row{display:flex;gap:8px;align-items:center;margin:10px 0;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid2 .card{margin:0}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* ---------- 大厅 ---------- */
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.modecard{text-align:left;background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;color:var(--tx);cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:4px;transition:transform .15s,border-color .2s,background .2s}
.modecard:hover:not(.off){transform:translateY(-2px)}
.modecard b{font-size:17px}.modecard span{font-size:13px;color:var(--mut);line-height:1.5}
.modecard.on{border-color:var(--blue);background:#172238}
.modecard.off{opacity:.6;cursor:default;border-style:dashed;background:transparent}
.plays{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.plays .card{margin:0;display:flex;flex-direction:column;gap:6px}
.card.play h2{font-size:20px;margin:0}
.card.play.hot{grid-column:1/-1;padding:32px;background:var(--card);position:relative;overflow:hidden}
.card.play.hot h2{font-size:40px;font-weight:900;letter-spacing:1px;line-height:1.15}
.card.play.hot .sub{font-size:15px;color:var(--tx2);max-width:460px}
.card.play.hot .btn{align-self:flex-start;margin-top:12px}
.card.play.hot .hero{position:absolute;right:28px;top:50%;transform:translateY(-50%);width:240px;height:208px;pointer-events:none}
.card.play.hot .hero polygon{stroke:#171A23;stroke-width:3;animation:cf-breathe 4.5s ease-in-out infinite}
.card.play.hot .hero polygon:nth-child(3n){animation-delay:-1.5s}.card.play.hot .hero polygon:nth-child(3n+1){animation-delay:-3s}
@media(max-width:760px){.card.play.hot .hero{display:none}.card.play.hot h2{font-size:32px}}
.card.play.locked .row{opacity:.5;pointer-events:none}
.tierline{display:flex;align-items:center;gap:12px;margin:6px 0}
.big{font-family:var(--num);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.card.rank .bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin:10px 0 6px}
.card.rank .bar i{display:block;height:100%;background:var(--gold);border-radius:4px;transform-origin:left;animation:cf-fill 1s .4s var(--ease) both}
.guestbox{margin-top:12px;padding:12px;border:1px dashed var(--line3);border-radius:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tierbadge{display:inline-block;padding:2px 9px;border-radius:7px;font-size:12px;font-weight:700;white-space:nowrap;background:#2a3550;color:#dfe6f5}
.tierbadge.t0{background:#2E333E;color:#C9D0DC}.tierbadge.t1{background:#2B3039;color:#B9C0CC}.tierbadge.t2{background:#262A31;color:#A8AEB8}
.tierbadge.t3{background:#4A271F;color:#F0A58A}.tierbadge.t4{background:#463A17;color:#F0D27A}.tierbadge.t5{background:#40301C;color:#E5B27A}
.tierbadge.t6{background:#3A404C;color:#E8EEF7}.tierbadge.t7{background:#3B2F12;color:#F4C152}.tierbadge.t8{background:#1F3C42;color:#BDF0FF}
.tierbadge.t9{background:#18294F;color:#8FB6FF}.tierbadge.t10{background:#481428;color:#FF8FB1}.tierbadge.t11{background:#123846;color:#8FF0FF}
.tierbadge.t12{background:#301C50;color:#C7A4FF}.tierbadge.t13{background:#1B402F;color:#8FF0BD}.tierbadge.t14{background:#50300F;color:#FFC27A}
.tierbadge.t15{background:#521212;color:#FF9A8A}.tierbadge.t16{background:#3B1050;color:#E3A4FF}.tierbadge.t17{background:#102A4A;color:#9FD8FF}
.tierbadge.t18{background:#503906;color:#FFE08A}

/* ---------- 主页、表格 ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.stats>div{background:var(--card2);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px;animation:cf-rise .45s var(--ease) both;transition:transform .15s}
.stats>div:hover{transform:translateY(-3px)}
.stats>div:nth-child(2){animation-delay:.05s}.stats>div:nth-child(3){animation-delay:.1s}.stats>div:nth-child(4){animation-delay:.15s}.stats>div:nth-child(n+5){animation-delay:.2s}
.stats b{font-family:var(--num);font-size:20px}
.card.prof{padding:28px}
.card.prof .row{gap:20px}
.card.prof .av{animation:cf-pop .5s var(--ease) both}
.card.prof h2{font-size:28px;font-weight:900}
.who{display:inline-flex;align-items:center;gap:8px;color:var(--tx)}
.res{display:inline-block;min-width:26px;text-align:center;border-radius:7px;font-weight:700;font-size:12px;padding:2px 6px}
.res.win{background:#163A2A;color:var(--green)}.res.loss{background:#3A1A1C;color:#FF9A90}.res.draw{background:var(--line2);color:var(--tx2)}
table.lb{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.lb th{color:var(--mut);font-weight:500;font-size:12px;text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.lb td{padding:10px 8px;border-bottom:1px solid #222634;vertical-align:middle}
table.lb tr{transition:background .15s}
table.lb tr:hover td{background:#1A1E29}
table.lb td b{font-family:var(--num)}
table.lb tr.me-r td{background:#FF6A5C1A}table.lb tr.me-b td{background:#4C8DFF1A}
table.lb tr.retired td{opacity:.55}
table.lb td.num,table.lb th.num{text-align:right}
.tbl-wrap{overflow-x:auto}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:5px;border:1px solid var(--line3);color:var(--mut);margin-left:4px;white-space:nowrap}
.tag.off{border-color:#5F4B10;color:var(--gold)}
.tag.hm{border-color:#1F5A3E;color:var(--green)}

/* ---------- 房间 ---------- */
.card.room{text-align:center;padding:32px}
.code-big{font-family:var(--num);font-size:84px;font-weight:700;letter-spacing:16px;padding-left:16px;line-height:1.1;text-align:center;margin:16px 0 20px;color:var(--tx);animation:cf-drop .55s var(--ease) both}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:24px 0}
.slot{display:flex;align-items:center;gap:12px;background:var(--card2);border:1px solid var(--line2);border-radius:16px;padding:18px;text-align:left;animation:cf-rise .5s .2s var(--ease) both}
.slot:first-child{border-top:3px solid var(--red)}.slot:nth-child(2){border-top:3px solid var(--blue);animation-delay:.3s}
.slot.empty{justify-content:center;color:var(--mut);border:2px dashed var(--line2);background:transparent;min-height:86px;animation:cf-rise .5s .3s var(--ease) both,cf-breathe 2s 1s ease-in-out infinite}

/* ---------- 对局 ---------- */
.boardwrap{position:relative;background:var(--hdr);border-radius:18px;padding:12px;border:1px solid var(--line)}
.status{min-height:30px;padding:4px 8px 8px;font-size:15px}
.status b.r{color:var(--red-t)}.status b.b{color:var(--blue-t)}
svg.board{width:100%;height:auto;display:block;max-height:calc(100vh - 150px)}
.cell .base{stroke:#0E1017;stroke-width:2.4;stroke-linejoin:round;transition:fill .35s}
@keyframes cf-fade{from{opacity:0}}
svg.board .cell{animation:cf-fade .45s var(--ease) both;animation-delay:var(--d,0s)}
svg.board .cell .base{animation:cf-in .45s var(--ease) both;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:center}
.cell.ok{cursor:pointer}.cell.ok .base{stroke:#8E95A8;stroke-width:2.2}.cell.no{cursor:not-allowed}
.cell.ok:hover .base{stroke:#fff;stroke-width:3.2}
.cell.dim .base{opacity:.35}
.ring,.glyph{pointer-events:none}
svg.board .flash .base{animation:cf-in .45s var(--ease) both,pop .8s ease-out;animation-delay:var(--d,0s),0s;transform-box:fill-box;transform-origin:center}
@keyframes pop{0%{transform:scale(1.2);filter:brightness(2)}100%{transform:scale(1);filter:none}}
.cdp{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:6 4;animation:pulse 1.3s infinite ease-in-out;pointer-events:none}
.hl{fill:rgba(244,193,82,.10);stroke:var(--gold);stroke-width:3.2;animation:pulse 1s infinite ease-in-out;pointer-events:none}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
.banner{position:absolute;inset:0;background:rgba(14,16,23,.82);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;border-radius:18px;z-index:5;backdrop-filter:blur(3px);text-align:center;padding:20px;animation:cf-rise .4s var(--ease) both}
.banner[hidden]{display:none}
.banner h2{margin:0;font-size:56px;font-weight:900;animation:cf-pop .7s .15s var(--ease) both}
.banner p{margin:0;color:var(--tx2);font-size:16px;animation:cf-rise .5s .35s var(--ease) both}
.banner p:first-of-type{font-family:var(--num);font-size:40px;font-weight:700;color:var(--tx)}
.banner small{font-size:14px;color:var(--mut);margin-left:6px}
.banner .row{animation:cf-rise .5s .5s var(--ease) both}
.banner .btn{min-height:48px;padding:0 24px;font-size:15px}
.banner .btn.go{background:var(--red);color:#1A0B09;font-weight:900;letter-spacing:1px}
/* 对局双方 */
.pl{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px;background:var(--card2);position:relative;overflow:hidden}
.pl.red{border-top:3px solid var(--red)}.pl.blue{border-top:3px solid var(--blue)}
.pl .nm{font-weight:700;font-size:15px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pl .nm small{color:var(--mut);font-weight:500}
.pl .meta{font-size:12px;color:var(--mut);margin-top:4px;padding-right:96px}
.pl .meta.intro{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:0}
.pl .elo{position:absolute;right:12px;top:9px;text-align:right}
.pl .elo b{font-size:20px;font-variant-numeric:tabular-nums}
.pl .elo div{font-size:11.5px;color:var(--mut)}
.pl .sc{display:flex;align-items:center;gap:10px;margin-top:10px}
.pl .bar{flex:1;height:10px;background:var(--bg);border-radius:5px;overflow:hidden}
.pl .bar i{display:block;height:100%;border-radius:5px;transition:width .6s var(--ease)}
.pl .v{font-family:var(--num);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.pl .en{font-size:12.5px;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:4px}
.delta{display:inline-block;animation:cf-pop .45s 1s var(--ease) both}
.delta.up{color:var(--green)}.delta.down{color:#FF9A90}
#timer{font-family:var(--num)}
#timer.warn{color:#FF9A90;font-weight:700;display:inline-block;animation:cf-tick 1s ease-in-out infinite}
#log,.log{max-height:240px;overflow:auto;font-size:13px;line-height:1.8;font-variant-numeric:tabular-nums}
#log div,.log div{border-bottom:1px solid #222634;padding:2px 0;animation:cf-row .35s var(--ease) both}
.lg{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13px;color:var(--tx2)}
.lg div{display:flex;align-items:center;gap:8px}
.lg svg{width:34px;height:34px;flex:none}
.lg .base{stroke:#0E1017;stroke-width:2.4;stroke-linejoin:round}
details summary{cursor:pointer;color:var(--mut);font-weight:600}
.shapes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
.shapes button{min-width:0;min-height:48px}
.stepbox{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;opacity:.55;transition:opacity .25s,border-color .25s,background .25s}
.stepbox.cur{opacity:1;border-color:var(--gold);background:#1D1B16}
#btnConfirm{width:100%;min-height:52px;background:var(--red);color:#1A0B09;border:0;font-size:16px;font-weight:900;letter-spacing:2px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--card2);color:var(--tx);padding:10px 18px;border-radius:12px;border:1px solid var(--line3);z-index:50;font-size:14px;animation:cf-rise .3s var(--ease) both}
.doc h2{font-size:20px;margin:24px 0 8px}
.doc h3{font-size:16px;margin:16px 0 6px}
.doc li{margin:3px 0}