:root {
  --bg:#0a0c0e; --panel:#14181c; --panel2:#1b2126; --line:#2c353c;
  --acc:#ff8a00; --acc2:#ffb300; --ok:#3ddc84; --bad:#ff4d4d;
  --txt:#e8ecef; --dim:#8b979e;
  --stencil:"Bahnschrift","DIN Alternate","Microsoft YaHei",sans-serif;
  --mono:Consolas,"JetBrains Mono",ui-monospace,monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  background:var(--bg); color:var(--txt); font-family:var(--stencil);
  background-image:
    repeating-linear-gradient(115deg, rgba(255,138,0,.035) 0 2px, transparent 2px 90px),
    radial-gradient(ellipse at 70% -10%, rgba(255,138,0,.10), transparent 55%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
  overflow:hidden;
}
.scan { position:fixed; inset:0; pointer-events:none; z-index:99;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; }
.hidden { display:none !important; }
.cut { clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.cut-sm { clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.cut-big { clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px)); }

.btn {
  font-family:var(--stencil); font-size:14px; letter-spacing:2px; font-weight:700;
  color:var(--txt); background:var(--panel2); border:1px solid var(--line);
  padding:10px 18px; cursor:pointer; text-transform:uppercase;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition:.15s;
}
.btn:hover { border-color:var(--acc); color:var(--acc2); }
.btn:disabled { opacity:.35; cursor:not-allowed; }
.btn.primary { background:linear-gradient(100deg, var(--acc), #d96f00); color:#14100a; border-color:var(--acc); }
.btn.primary:hover { filter:brightness(1.12); color:#14100a; }
.btn.ghost { background:transparent; }
.btn.wide { width:100%; }

input {
  font-family:var(--stencil); background:#0e1215; border:1px solid var(--line); color:var(--txt);
  padding:10px 12px; font-size:14px; letter-spacing:1px; width:100%;
}
input:focus { outline:none; border-color:var(--acc); }
.code-in { font-family:var(--mono); text-transform:uppercase; letter-spacing:6px; }

/* ---------- 大厅 ---------- */
.screen { height:100%; }
#lobby { display:flex; align-items:center; justify-content:center; }
.lobby-box { width:min(860px, 92vw); text-align:center; }
.emblem { width:86px; margin:0 auto 8px; color:var(--acc); }
.emblem svg { width:100%; }
#lobby h1 { font-size:44px; letter-spacing:10px; font-weight:800; }
#lobby h1 span { display:block; font-size:20px; letter-spacing:14px; color:var(--acc); margin-top:6px; }
.sub { color:var(--dim); letter-spacing:3px; font-size:12px; margin:10px 0 30px; font-family:var(--mono); }
.lobby-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; text-align:left; }
.panel { background:var(--panel); border:1px solid var(--line); padding:22px; display:flex; flex-direction:column; gap:12px; }
.panel h2 { font-size:15px; letter-spacing:4px; color:var(--acc2); border-left:3px solid var(--acc); padding-left:10px; }
.tip { margin-top:22px; color:var(--dim); font-size:12px; letter-spacing:2px; }

/* ---------- 房间 ---------- */
#room { display:flex; flex-direction:column; }
.topbar {
  height:56px; flex:none; display:flex; align-items:center; gap:16px; padding:0 18px;
  background:linear-gradient(90deg, #101418, #14181c 60%, rgba(255,138,0,.10));
  border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:3px; font-size:15px; }
.brand svg { width:24px; color:var(--acc); }
.code-chip { margin-left:auto; background:#0e1215; border:1px solid var(--acc); padding:7px 16px;
  font-size:13px; letter-spacing:2px; color:var(--dim); cursor:pointer; }
.code-chip b { font-family:var(--mono); font-size:17px; letter-spacing:5px; color:var(--acc2); margin-left:6px; }
.phase { font-size:12px; letter-spacing:3px; padding:7px 14px; border:1px solid var(--line); color:var(--dim); }
.phase.run { color:var(--acc2); border-color:var(--acc); }
.phase.done { color:var(--ok); border-color:var(--ok); }

.body { flex:1; display:flex; gap:14px; padding:14px; min-height:0; }
.side { width:264px; flex:none; background:var(--panel); border:1px solid var(--line);
  padding:16px; display:flex; flex-direction:column; gap:12px; }
.side h2 { font-size:14px; letter-spacing:4px; color:var(--acc2); display:flex; justify-content:space-between; }
.side h2 span { color:var(--dim); font-family:var(--mono); letter-spacing:1px; }
#pList { list-style:none; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:6px; }
#pList li {
  display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--line);
  padding:8px 10px; font-size:13px; letter-spacing:1px;
}
#pList li.me { border-color:var(--acc); }
#pList li .pid { font-family:var(--mono); color:var(--dim); font-size:11px; }
#pList li .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pList li .dot { width:8px; height:8px; flex:none; background:var(--bad); transform:rotate(45deg); }
#pList li .dot.on { background:var(--ok); }
#pList li .rdy { font-size:10px; letter-spacing:2px; color:var(--dim); border:1px solid var(--line); padding:2px 6px; }
#pList li .rdy.on { color:var(--ok); border-color:var(--ok); }
.side-act { display:flex; flex-direction:column; gap:8px; }
.side-tip { font-size:11px; color:var(--dim); letter-spacing:1px; line-height:1.7; }
.conn { font-family:var(--mono); font-size:11px; color:var(--ok); letter-spacing:1px; }
.conn.bad { color:var(--bad); }

.stage-wrap { flex:1; background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; min-width:0; }
.stage-head { flex:none; display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; border-bottom:1px solid var(--line); font-size:13px; letter-spacing:3px; color:var(--acc2); }
.stage-note { color:var(--dim); font-size:11px; letter-spacing:1px; }
.stage-scroll { flex:1; overflow:auto; padding:20px; }
#sizer { position:relative; }
.stage { position:relative; transform-origin:top left; }

.match { position:absolute; width:170px; }
.mlabel { color:var(--acc); font-weight:800; font-style:italic; font-size:14px; letter-spacing:1px;
  margin:0 0 4px 2px; font-family:var(--mono); }
.mbox { background:#0f1316; border:1px solid var(--line); }
.mrow { position:relative; height:30px; line-height:30px; padding:0 8px; font-size:13px; letter-spacing:1px;
  color:var(--txt); background:#12171a; white-space:nowrap; overflow:hidden; display:flex; gap:6px; }
.mrow + .mrow { border-top:1px solid var(--acc); }
.mrow.bye { color:#5b666c; font-style:italic; }
.mrow.win { background:rgba(255,138,0,.16); color:var(--acc2); box-shadow:inset 3px 0 0 var(--acc); }
.mrow.lose { opacity:.45; text-decoration:line-through; }
.mrow .rn { flex:1; overflow:hidden; text-overflow:ellipsis; }
.mrow .wbtn {
  flex:none; font-family:var(--stencil); font-size:10px; letter-spacing:1px; font-weight:700;
  background:var(--acc); color:#14100a; border:none; padding:0 8px; margin:5px 0; cursor:pointer;
}
.mrow .wbtn:hover { filter:brightness(1.15); }
.mrow .tick { color:var(--acc); font-weight:800; }
#wires path { stroke:#3a444b; stroke-width:1.5; fill:none; }
#wires path.hot { stroke:var(--acc); }
.champ { position:absolute; color:var(--acc2); font-weight:800; font-size:19px; letter-spacing:3px;
  line-height:1.4; text-shadow:0 0 14px rgba(255,138,0,.45); }
.champ small { display:block; font-size:11px; color:var(--dim); letter-spacing:2px; }

/* ---------- 证书覆盖层 ---------- */
.overlay { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:22px; background:rgba(4,6,8,.9); backdrop-filter:blur(6px); }
.rays { position:absolute; inset:-40%;
  background:repeating-conic-gradient(from 0deg, rgba(255,138,0,.10) 0deg 6deg, transparent 6deg 14deg);
  animation:spin 26s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.cert {
  position:relative; width:min(680px, 92vw); max-height:82vh; overflow:auto;
  background:linear-gradient(160deg, #171c20, #0e1215 70%);
  border:1px solid var(--acc); padding:38px 44px;
  animation:pop .7s cubic-bezier(.2,1.4,.4,1) both;
  box-shadow:0 0 60px rgba(255,138,0,.25), inset 0 0 80px rgba(255,138,0,.05);
}
@keyframes pop { from { transform:scale(.55) rotate(-3deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }
.cert-head { display:flex; align-items:center; gap:14px; color:var(--acc); }
.cert-head svg { width:44px; }
.cert-head b { display:block; font-size:16px; letter-spacing:5px; color:var(--acc2); }
.cert-head span { font-size:11px; letter-spacing:3px; color:var(--dim); }
.cert-title { margin-top:26px; font-size:12px; letter-spacing:6px; color:var(--dim); }
.cert-name {
  font-size:52px; font-weight:800; letter-spacing:6px; color:#fff; margin:6px 0 4px;
  text-shadow:0 0 24px rgba(255,138,0,.6);
}
.cert-ranks { display:flex; gap:26px; margin:2px 0 6px; font-size:14px; letter-spacing:2px; color:var(--dim); }
.cert-ranks b { color:var(--acc2); margin-left:6px; }
.cert-line { height:2px; background:linear-gradient(90deg, var(--acc), transparent); margin:14px 0 18px; }
.cert-sub { font-size:11px; letter-spacing:4px; color:var(--dim); margin-bottom:10px; }
.cert-list { list-style:none; display:flex; flex-direction:column; gap:6px; }
.cert-list li { display:flex; gap:12px; font-size:14px; letter-spacing:1px; border-left:2px solid var(--acc);
  padding:4px 10px; background:rgba(255,138,0,.06); }
.cert-list li b { font-family:var(--mono); color:var(--acc); font-size:12px; min-width:34px; }
.cert-meta { margin-top:20px; display:flex; gap:26px; flex-wrap:wrap; font-size:12px; color:var(--dim); letter-spacing:2px; }
.cert-meta b { color:var(--txt); font-family:var(--mono); }
.cert-no { margin-top:14px; font-family:var(--mono); font-size:11px; color:#5b666c; letter-spacing:2px; }
.cert-stripe { margin-top:18px; height:8px;
  background:repeating-linear-gradient(115deg, var(--acc) 0 12px, #14181c 12px 24px); }

@media (max-width:860px) {
  .lobby-grid { grid-template-columns:1fr; }
  .body { flex-direction:column; }
  .side { width:100%; max-height:220px; }
}