:root{
  --bg:#080c15;--panel:#111827;--panel-2:#151e31;--line:#29334a;
  --gold:#c8a84e;--gold-bright:#f0ce65;--text:#ece5d5;--muted:#7d879e;
  --orange:#e3833d;--cyan:#53c8d4;
  --fire:#ef9920;--water:#09dcea;--earth:#52a217;--air:#e8a419;
  --light:#edd8a3;--shadow:#896dac;--red:#e0544b;
  --p1:var(--cyan);--p2:var(--orange)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font:13px/1.4 'Segoe UI','Microsoft YaHei',system-ui,sans-serif}
body{background-image:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:32px 32px}
button{font-family:inherit}
img{user-select:none}
.loading{display:grid;place-items:center;min-height:100vh;color:var(--gold);
  letter-spacing:3px;font-size:11px}
.site-shell{max-width:1500px;margin:auto;min-height:100vh;padding:0 28px}

/* ---------- topbar ---------- */
.topbar{height:72px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand-lockup{display:flex;align-items:center;gap:12px}
.brand-mark{width:38px;height:38px;border-radius:9px;object-fit:contain}
.brand-lockup strong,.brand-lockup span{display:block}
.brand-lockup strong{font-size:14px;letter-spacing:2px;color:var(--gold-bright)}
.brand-lockup strong em{font-style:normal;color:var(--text)}
.brand-lockup div span{margin-top:2px;color:var(--muted);font-size:9px;letter-spacing:1.5px}
.top-stats{display:flex;gap:26px;color:var(--muted);font-size:10px;letter-spacing:1px}
.top-stats b{color:var(--gold);margin-left:7px;font-size:11px}
.user-zone{display:flex;align-items:center;gap:12px;flex:none}
.login-button{height:34px;padding:0 18px;background:transparent;border:1px solid var(--gold);
  color:var(--gold-bright);font:700 10px inherit;letter-spacing:2px;cursor:pointer}
.login-button:hover{background:#c8a84e18}
.user-badge{display:flex;align-items:center;gap:9px;border:1px solid var(--line);
  background:var(--panel);padding:4px 12px 4px 5px}
.user-badge img{width:26px;height:26px;object-fit:contain;border-radius:3px}
.user-badge .who b{display:block;font-size:11px;color:var(--text);line-height:1.1}
.user-badge .who span{display:block;font-size:9px;color:var(--gold);letter-spacing:1px}
.logout-button{border:0;background:none;color:var(--muted);font-size:9px;letter-spacing:1px;cursor:pointer;padding:2px}
.logout-button:hover{color:var(--red)}

/* ---------- stage header ---------- */
.stage{padding:30px 0 18px;display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.stage .eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:700}
.stage h1{font-size:30px;letter-spacing:1px;margin:8px 0 6px;line-height:1.1}
.stage h1 em{font-style:normal;color:var(--gold-bright)}
.stage .lede{color:var(--muted);margin:0;max-width:640px;line-height:1.7}
.stage-side{display:flex;align-items:center;gap:14px}
.status-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:var(--panel);padding:7px 14px;font-size:10px;letter-spacing:1px;color:var(--muted)}
.status-chip b{color:var(--gold-bright);font-size:11px}
.status-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:blink 1.1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- board ---------- */
.board{display:grid;grid-template-columns:minmax(0,1fr) 320px minmax(0,1fr);gap:20px;
  padding:24px 0 40px;align-items:start}
.side-panel{background:linear-gradient(150deg,#111827ee,#0d1321ee);
  border:1px solid var(--line);padding:18px;position:relative}
.side-panel.s1{border-left:2px solid var(--cyan)}
.side-panel.s2{border-left:2px solid var(--orange)}
.side-head{display:flex;align-items:center;gap:14px;padding-bottom:16px;
  border-bottom:1px solid var(--line);margin-bottom:16px}
.turn-badge{width:30px;height:30px;flex:none;display:grid;place-items:center;font-weight:800;
  font-size:14px;letter-spacing:0;border-radius:50%;border:1px solid var(--line);color:var(--muted);
  background:#0a0e1acc}
.side-panel.s1 .turn-badge{color:var(--p1);border-color:var(--p1)}
.side-panel.s2 .turn-badge{color:var(--p2);border-color:var(--p2)}
.side-avatar{width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover;
  border:2px solid var(--line);background:#0b1220;padding:2px}
.side-avatar.empty{opacity:.35;filter:grayscale(1)}
.side-who{min-width:0}
.side-who b{display:block;font-size:16px;letter-spacing:.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.side-who small{display:block;color:var(--muted);font-size:10px;letter-spacing:1px;margin-top:3px}
.side-tag{margin-left:auto;text-align:right;flex:none}
.side-tag .who-ban{font-size:9px;color:var(--muted);letter-spacing:1px;display:block}
.side-tag .act-chip{display:inline-block;margin-top:6px;font-size:9px;font-weight:700;
  letter-spacing:1.5px;padding:3px 8px;color:var(--muted);border:1px solid var(--line)}
.side-panel.s1 .act-chip.on{color:#04121a;background:var(--p1);border-color:var(--p1)}
.side-panel.s2 .act-chip.on{color:#1a0d04;background:var(--p2);border-color:var(--p2)}
.side-panel.done .act-chip.on{color:#0a0e1a;background:var(--gold);border-color:var(--gold)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.slot{position:relative;aspect-ratio:1/1.15;border:1px solid var(--line);background:#0b1220;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--muted);padding:6px;overflow:hidden;cursor:default}
.slot .empty-glyph{font-size:26px;line-height:1;opacity:.5}
.slot .empty-txt{font-size:8px;letter-spacing:1px;text-align:center}
.slot.filled{border-color:#3a2f22;background:radial-gradient(circle at 50% 32%,#26303f,#0b1220 72%)}
.slot.filled img.icon{width:100%;max-height:62px;object-fit:contain;filter:drop-shadow(0 4px 4px #000a)}
.slot .slot-name{font-size:9px;color:var(--text);text-align:center;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.slot .slot-by{position:absolute;top:4px;right:4px;font-size:8px;font-weight:700;padding:1px 5px;
  letter-spacing:.5px;background:#0a0e1acc;color:var(--gold);border:1px solid var(--line)}
.slot .slot-stamp{position:absolute;top:4px;left:4px;z-index:3;width:16px;height:16px;display:grid;place-items:center;
  background:#e0544b22;border:1px solid var(--red);color:var(--red);font-size:8px;font-weight:800;
  transform:rotate(-8deg)}
.slot .slot-dex{position:absolute;top:4px;right:4px;z-index:2;font-size:8px;color:var(--gold);
  letter-spacing:1px;background:#0a0e1acc;padding:1px 4px}
.slot.filled{gap:3px}
.slot.filled .stars{display:flex;align-items:center;gap:1px}
.slot.filled .stars img{width:9px;height:9px}
.slot.addable{border-style:dashed;border-color:var(--gold);cursor:pointer;
  animation:addable 1.3s ease-in-out infinite}
.slot.addable:hover{border-color:var(--gold-bright);background:#c8a84e14}
.slot.addable .empty-glyph{color:var(--gold)}
@keyframes addable{0%,100%{box-shadow:0 0 0 0 #c8a84e00}50%{box-shadow:0 0 14px 0 #c8a84e55}}
.side-note{margin-top:12px;font-size:9px;letter-spacing:.5px;color:var(--muted);line-height:1.6}

/* ---------- center ---------- */
.center-col{display:flex;flex-direction:column;gap:14px}
.vs-card{background:linear-gradient(160deg,#131b2c,#0d1321);
  border:1px solid var(--line);padding:18px 14px}
.vs-lockup{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.vs-avatar{background:transparent;border:1px solid var(--line);padding:6px 4px 5px;cursor:default;
  display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted)}
.vs-avatar.clickable{cursor:pointer;border-style:dashed;border-color:#4a5870}
.vs-avatar.clickable:hover{border-color:var(--gold)}
.vs-avatar img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--line);
  background:#0b1220;padding:2px}
.vs-avatar.p1 img{border-color:var(--p1)}
.vs-avatar.p2 img{border-color:var(--p2)}
.vs-avatar b{font-size:10px;max-width:100%;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--text);letter-spacing:.5px}
.vs-avatar small{font-size:8px;letter-spacing:1px;color:var(--gold)}
.vs-avatar .ph{font-size:8px;letter-spacing:1.5px;padding:26px 0}
.vs-mark{font-size:34px;font-weight:800;color:#38445e;letter-spacing:0;font-style:italic;
  text-shadow:0 0 18px #c8a84e44}
.vs-sub{color:var(--muted);font-size:9px;letter-spacing:1px;text-align:center;margin-top:10px;
  line-height:1.8}
.vs-sub b{color:var(--gold)}
.admin-zone{border:1px dashed #4a5870;background:#0d132166;padding:12px}
.admin-zone .az-title{font-size:9px;letter-spacing:2px;color:var(--gold);font-weight:700;
  display:flex;align-items:center;gap:8px;margin-bottom:12px}
.admin-zone .az-title i{height:1px;background:#29334a;flex:1}
.az-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-top:1px solid #1c2436;font-size:10px;color:var(--muted);letter-spacing:.5px}
.az-row:first-of-type{border-top:0}
.az-row b{color:var(--text);font-weight:600}
.az-btn{background:#c8a84e18;border:1px solid var(--gold);color:var(--gold-bright);height:30px;
  padding:0 12px;font:700 9px inherit;letter-spacing:1px;cursor:pointer;white-space:nowrap}
.az-btn:hover{background:#c8a84e30}
.az-btn.danger{border-color:var(--red);color:#ff8f87;background:#e0544b14}
.az-btn.danger:hover{background:#e0544b2b}
.az-btn:disabled{opacity:.35;cursor:default;border-color:var(--line);color:var(--muted);background:transparent}
.num-stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line);height:30px}
.num-stepper button{width:26px;height:100%;background:transparent;border:0;color:var(--gold-bright);
  font-size:15px;cursor:pointer}
.num-stepper button:hover{background:#c8a84e18}
.num-stepper span{min-width:34px;text-align:center;font-size:11px;color:var(--text);
  font-variant-numeric:tabular-nums;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.hint{font-size:9px;color:#566078;line-height:1.7}
.pattern-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pattern-custom{display:flex;gap:6px;align-items:center}
.pattern-custom input{width:110px;height:30px;background:var(--panel);border:1px solid var(--line);
  color:var(--text);font:inherit;font-size:10px;padding:0 8px;outline:0}
.pattern-custom input:focus{border-color:var(--gold)}
.pattern-custom input::placeholder{color:#4d5670}

/* ---------- modal / dialogs ---------- */
.modal-overlay{position:fixed;inset:0;background:#04070db8;backdrop-filter:blur(2px);
  display:grid;place-items:center;z-index:50;padding:18px}
.modal{background:#0e1625;border:1px solid var(--gold);box-shadow:0 18px 60px #000b;
  width:min(1180px,96vw);max-height:92vh;display:flex;flex-direction:column}
.modal.small{width:min(460px,94vw)}
.modal-head{display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--line);flex:none}
.modal-head .m-title{font-size:14px;letter-spacing:1px;color:var(--gold-bright)}
.modal-head .m-title small{display:block;color:var(--muted);font-size:10px;margin-top:3px;letter-spacing:.5px}
.close-x{margin-left:auto;border:1px solid var(--line);background:transparent;color:var(--muted);
  width:28px;height:28px;font-size:14px;cursor:pointer;flex:none}
.close-x:hover{color:var(--red);border-color:var(--red)}
.modal-body{padding:14px 18px;overflow:auto}

/* picker toolbar (search / filters) */
.picker-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 0 4px}
.picker-toolbar .search-box{height:36px;display:flex;align-items:center;background:var(--panel);
  border:1px solid var(--line);padding:0 10px;color:var(--gold);min-width:250px;flex:1;max-width:420px}
.picker-toolbar .search-box span{font-size:19px;line-height:0}
.picker-toolbar .search-box input{border:0;outline:0;background:transparent;color:var(--text);
  padding:0 8px;min-width:0;width:100%;font:inherit}
.picker-toolbar .search-box input::placeholder{color:var(--muted)}
.filter-group{display:flex;align-items:center;gap:6px}
.filter-label{color:var(--gold);font:700 9px inherit;letter-spacing:1px;white-space:nowrap}
.chip{background:transparent;border:1px solid var(--line);color:var(--muted);font:700 10px inherit;
  letter-spacing:1px;height:30px;padding:0 11px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--gold);color:var(--text)}
.chip.on{border-color:var(--gold-bright);color:#0a0e1a;background:var(--gold)}
.chip.el-fire.on{background:var(--fire);border-color:var(--fire);color:#08131a}
.chip.el-water.on{background:var(--water);border-color:var(--water);color:#08131a}
.chip.el-earth.on{background:var(--earth);border-color:var(--earth);color:#fff}
.chip.el-air.on{background:var(--air);border-color:var(--air);color:#08131a}
.chip.el-life.on{background:var(--light);border-color:var(--light);color:#08131a}
.chip.el-death.on{background:var(--shadow);border-color:var(--shadow);color:#fff}
.chip img{width:15px;height:15px;vertical-align:-3px;margin-right:5px}
.select-box{height:30px;background:var(--panel);border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:11px;padding:0 6px;cursor:pointer}
.picker-count{margin-left:auto;color:var(--muted);font-size:10px;letter-spacing:1px;white-space:nowrap}
.picker-count b{color:var(--gold-bright);font-size:15px;font-weight:700}

/* monster pick grid */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px;padding-top:12px}
@media(max-width:640px){
  .modal-body{padding:10px 12px}
  .pick-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
  .pick-grid .pick-meta{padding:6px 6px 7px}
  .pick-grid .pick-meta b{font-size:10px}
  .pick-grid .pick-meta small{font-size:8px;margin-top:4px}
  .pick-grid .pick-meta .stars{gap:1px;margin-top:4px}
  .pick-grid .pick-meta .stars img{width:7px;height:7px}
  .pick-grid .pick-art .dex-tag{font-size:8px;top:4px;left:5px}
}
.pick-card{padding:0;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  text-align:left;cursor:pointer;position:relative;display:flex;flex-direction:column}
.pick-card:hover{border-color:#b6a15e;transform:translateY(-2px)}
.pick-card.banned{opacity:.32;pointer-events:none}
.pick-card.banned:after{content:"已禁";position:absolute;inset:0;display:grid;place-items:center;
  color:var(--red);border:1px solid var(--red);background:#0a0e1acc;font-size:16px;letter-spacing:4px}
.pick-art{aspect-ratio:1/1;background:radial-gradient(circle at 50% 46%,#2b3a4d,#101928 70%);
  display:grid;place-items:center;overflow:hidden;position:relative}
.pick-art img{width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 8px 5px #000a)}
.pick-art .dex-tag{position:absolute;top:6px;left:7px;z-index:2;font-size:9px;color:var(--gold);
  letter-spacing:1px;background:#0a0e1acc;padding:1px 4px}
.pick-meta{display:block;padding:8px 9px 9px;background:#0e1625;border-top:1px solid #1c2436}
.pick-meta b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;line-height:1.3}
.pick-meta small{display:flex;align-items:center;gap:5px;margin-top:6px}
.pick-meta small img.el{width:15px;height:15px}
.pick-meta .stars{display:flex;align-items:center;gap:2px;margin-top:5px}
.pick-meta .stars img{width:13px;height:13px}
.load-more{display:block;margin:16px auto 4px;background:#c8a84e18;border:1px solid var(--gold);
  color:var(--gold-bright);height:34px;padding:0 22px;font:700 10px inherit;letter-spacing:2px;
  cursor:pointer}
.load-more:hover{background:#c8a84e30}

/* user picker rows */
.user-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:transparent;border:1px solid var(--line);color:var(--text);
  padding:8px 12px;cursor:pointer;margin-bottom:6px}
.user-row:hover{border-color:var(--gold)}
.user-row img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line);
  background:#0b1220;padding:1px}
.user-row b{font-size:12px;display:block}
.user-row span{display:block;font-size:9px;color:var(--muted);letter-spacing:.5px;margin-top:2px}

/* login form */
.field{margin-bottom:12px}
.field label{display:block;font-size:9px;letter-spacing:2px;color:var(--gold);
  margin-bottom:6px;font-weight:700}
.field input{width:100%;height:38px;background:var(--panel);border:1px solid var(--line);
  color:var(--text);padding:0 12px;font:inherit;outline:0}
.field input:focus{border-color:var(--gold)}
.field input::placeholder{color:#4d5670}
.form-error{color:#ff8f87;font-size:10px;letter-spacing:.5px;margin:4px 0 10px;min-height:14px}
.primary-btn{width:100%;height:40px;background:var(--gold);border:0;color:#0a0e1a;
  font:800 11px inherit;letter-spacing:3px;cursor:pointer}
.primary-btn:hover{background:var(--gold-bright)}
.primary-btn:disabled{opacity:.5;cursor:wait}
.form-note{margin-top:10px;font-size:9px;color:#566078;text-align:center;line-height:1.7}

@media(max-width:1120px){
  .board{grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr);gap:12px}
  .site-shell{padding:0 16px}
}
@media(max-width:900px){
  .board{grid-template-columns:1fr;padding-top:16px}
  .vs-card{max-width:520px;margin:auto;width:100%}
}

/* ---- banpicker extras ---- */
.stage .eyebrow{display:block;margin-bottom:0}
.title-row{display:flex;align-items:center;gap:14px;margin:9px 0 6px}
.stage-h1{font-size:32px;letter-spacing:2px;line-height:1.05;font-weight:700}
.round-chip{flex:none;border:1px solid var(--gold);color:var(--gold);font-size:10px;
  letter-spacing:2px;padding:4px 11px;font-weight:700;background:#c8a84e0f}
.stage .lede{max-width:720px;line-height:1.7}
.stage .lede b{color:var(--gold-bright);font-size:12px}
.stage-side{align-self:flex-end;padding-bottom:6px}
.status-chip.st-done .dot{background:var(--earth);animation:none}
.status-chip.st-idle .dot{background:var(--muted);animation:none}
.status-chip.st-live{border-color:#5d7d33}
.side-panel.acting{box-shadow:0 0 0 1px #8a7234,0 0 26px #c8a84e1f}
.brand-lockup .brand-name{display:block;font-size:15px;letter-spacing:3px;font-weight:800;color:var(--gold-bright)}
.brand-lockup>div>span.brand-name+span,
.brand-lockup .brand-sub{color:var(--muted);font-size:9px;letter-spacing:1.5px}
.footer{margin-top:auto;padding:20px 0 26px;border-top:1px solid var(--line);color:#566078;
  font-size:9px;letter-spacing:1px;line-height:1.8}
.site-shell{display:flex;flex-direction:column;min-height:100vh}
.filter-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}
.filter-label.ml{margin-left:12px}
.select-box{flex:none}
.pick-grid .pick-art img.art{width:86%;height:86%;object-fit:contain}
.pick-card{animation:card-in .28s both}
@keyframes card-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stars{display:inline-flex;align-items:center;gap:2px;margin-top:5px}
.stars .star{width:13px;height:13px;display:block;flex:none}
.el-crest{width:15px;height:15px;object-fit:contain;flex:none;vertical-align:-2px}
.actor-tag{display:inline-block;border:1px solid var(--line);color:var(--gold);font-size:8px;
  letter-spacing:1px;padding:1px 5px;margin-left:6px}
.empty-hint{color:var(--muted);font-size:10px;letter-spacing:1px}
.empty-state{padding:42px 16px;color:var(--muted);font-size:11px;letter-spacing:1px;text-align:center}
.empty-state b{display:block;color:var(--gold);letter-spacing:2px;font-size:13px;margin-bottom:8px}
.empty-state.small{padding:26px 10px}
.user-list{padding-top:8px}
.user-row .who b{font-size:12px}
.user-row .who span{font-size:9px;color:var(--muted);letter-spacing:.5px;margin-top:2px;display:block}
.user-row img.u{width:34px;height:34px}
.field-label{font-size:9px;letter-spacing:2px;color:var(--gold);margin-bottom:6px;font-weight:700}
.az-actions{gap:8px}
.az-actions .az-btn{flex:1}
.picker-toolbar .search-box input{font:inherit}
.modal-head .m-title small{line-height:1.6}
.pick-meta{position:relative}
.pick-meta b{display:block;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-meta small{display:flex;align-items:center;gap:5px;margin-top:6px;color:var(--muted);font-size:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-meta .stars{margin-top:6px}
.pick-card.banned{opacity:.3;pointer-events:none}
.pick-card.banned .pick-art img.art{filter:grayscale(1)}
.pick-card.banned .pick-meta b:after{content:" · 已禁";color:var(--red)}
.pick-card .stars .star:nth-child(n){filter:drop-shadow(0 0 2px #000a)}
.load-more{margin:18px auto 6px;display:block}
.modal{max-height:92vh}
.modal-body{padding-bottom:20px}
.vs-avatar .vs-img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--line);
  background:#0b1220;padding:2px}
.vs-avatar.p1 .vs-img{border-color:var(--p1)}
.vs-avatar.p2 .vs-img{border-color:var(--p2)}
.vs-avatar .vs-img.empty{opacity:.3;filter:grayscale(1)}
.vs-avatar{min-width:0}
.chip.reset{border-color:var(--line)}
.side-who{min-width:0}
.side-avatar{width:64px;height:64px}
.num-stepper span{min-width:34px}