:root{
  --bg:#0b0d11; --surface:#15181e; --surface-2:#1d2129; --line:#353b46;
  --text:#f5f2ed; --muted:#a9adb7; --blue:#62a7ff; --green:#56d6a5;
  --yellow:#ffc857; --red:#ff7066;
}
*{box-sizing:border-box; margin:0; padding:0; letter-spacing:0;}
html{min-height:100%; background:var(--bg);}
body{min-height:100vh; color:var(--text); background:var(--bg); overflow-x:hidden;
  font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;}
body::before{content:""; position:fixed; inset:0 0 auto; height:360px; z-index:-1; pointer-events:none;
  background:url("../web/hero.webp") center 42%/cover no-repeat; opacity:.1;}
button,input{font:inherit;}
button,a{letter-spacing:0;}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--yellow); outline-offset:3px;}

.topbar{height:68px; display:flex; align-items:center; gap:24px; padding:0 28px;
  border-bottom:1px solid rgba(255,255,255,.1); background:rgba(11,13,17,.94); backdrop-filter:blur(14px);}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; min-width:0;}
.brand img{width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 5px 10px rgba(0,0,0,.45));}
.brand span{display:flex; flex-direction:column; min-width:0; line-height:1.15;}
.brand b{font-size:15px; white-space:nowrap;}
.brand small{margin-top:3px; color:var(--muted); font:10px Consolas,monospace;}
.topbar nav{margin-left:auto; display:flex; align-items:center; gap:8px;}
.topbar nav a{color:var(--muted); text-decoration:none; font-size:13px; padding:8px 12px; border-radius:6px;}
.topbar nav a:hover{color:var(--text); background:var(--surface-2);}

main{width:min(1240px,calc(100% - 32px)); margin:0 auto; padding:30px 0 54px;}
.overview{display:flex; align-items:flex-end; justify-content:space-between; gap:34px; min-height:126px;
  padding:12px 2px 25px; border-bottom:1px solid var(--line);}
.eyebrow{color:var(--green); font-size:11px; font-weight:800; text-transform:uppercase;}
.overview h1{margin-top:4px; font-size:32px; line-height:1.2;}
.connection{display:inline-flex; align-items:center; gap:7px; margin-top:13px; color:var(--muted); font-size:12px;}
.connection-dot{width:8px; height:8px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(255,200,87,.12);}
.connection.online{color:var(--green);}
.connection.online .connection-dot{background:var(--green); box-shadow:0 0 0 4px rgba(86,214,165,.12);}
.connection.offline{color:var(--red);}
.connection.offline .connection-dot{background:var(--red); box-shadow:0 0 0 4px rgba(255,112,102,.12);}
.stats{display:grid; grid-template-columns:repeat(4,minmax(96px,1fr)); align-items:end; min-width:min(550px,100%);}
.stats>div{min-height:58px; padding:7px 20px; border-left:1px solid var(--line);}
.stats span{display:block; color:var(--muted); font-size:11px; white-space:nowrap;}
.stats strong{display:block; margin-top:3px; font:700 24px Consolas,monospace; color:var(--text);}

.room-workspace{padding-top:28px;}
.room-toolbar{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px;}
.room-toolbar h2{font-size:20px;}
.room-toolbar p{margin-top:4px; color:var(--muted); font-size:11px;}
.toolbar-actions{display:flex; align-items:center; gap:10px;}
.segments{display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:7px; background:#101217;}
.segments button{min-width:58px; height:34px; padding:0 10px; border:0; border-radius:5px; color:var(--muted);
  background:transparent; cursor:pointer; font-size:12px; font-weight:700;}
.segments button:hover{color:var(--text);}
.segments button.active{color:var(--text); background:var(--surface-2); box-shadow:0 1px 5px rgba(0,0,0,.3);}
.create-button,.secondary-button,.join-button{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:42px; padding:9px 16px; border-radius:7px; cursor:pointer; font-weight:800; font-size:13px;}
.create-button{border:1px solid transparent; color:#161106; background:var(--yellow);}
.create-button:hover{background:#ffd675;}
.create-button:disabled{opacity:.38; cursor:not-allowed;}
.secondary-button{border:1px solid var(--line); color:var(--text); background:transparent;}
.secondary-button:hover{background:var(--surface-2);}

.room-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; min-height:240px;}
.room-card{display:flex; flex-direction:column; min-width:0; min-height:176px; padding:16px;
  border:1px solid var(--line); border-radius:8px; background:rgba(21,24,30,.96);
  box-shadow:0 9px 24px rgba(0,0,0,.17); transition:border-color .16s,transform .16s,background .16s;}
.room-card:hover{transform:translateY(-2px); border-color:#596170; background:#181c23;}
.room-card.playing{border-color:rgba(255,112,102,.42);}
.room-card-head{display:flex; align-items:flex-start; gap:10px;}
.room-name{min-width:0; flex:1;}
.room-name h3{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:15px; line-height:1.3;}
.room-name p{margin-top:5px; color:var(--muted); font-size:10px;}
.mode-badge,.state-badge{display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border-radius:5px;
  font-size:10px; font-weight:900; white-space:nowrap;}
.mode-badge.mode-1v1{color:#9dccff; background:rgba(98,167,255,.13);}
.mode-badge.mode-team{color:#7ce6bd; background:rgba(86,214,165,.12);}
.mode-badge.mode-ffa{color:#ff9891; background:rgba(255,112,102,.12);}
.room-presence{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:23px;}
.player-slots{display:flex; gap:6px;}
.player-slot{width:12px; height:12px; border-radius:50%; border:1px solid #58606e; background:#242933;}
.player-slot.filled{border-color:var(--blue); background:var(--blue); box-shadow:0 0 0 3px rgba(98,167,255,.1);}
.occupancy{color:var(--muted); font:12px Consolas,monospace;}
.room-card-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:17px;}
.state-badge.waiting{color:var(--green); padding-left:0;}
.state-badge.empty{color:var(--muted); padding-left:0;}
.state-badge.playing{color:var(--red); padding-left:0;}
.join-button{min-width:88px; min-height:36px; padding:7px 13px; border:1px solid #4b85c8; color:#dbeaff; background:#1b3656;}
.join-button:hover:not(:disabled){background:#244a75; border-color:var(--blue);}
.join-button:disabled{color:#707683; border-color:var(--line); background:#20232a; cursor:not-allowed;}
.loading-state,.empty-state{grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:240px; color:var(--muted); font-size:13px;}
.loader{width:18px; height:18px; border:2px solid #4a505d; border-top-color:var(--yellow); border-radius:50%; animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

dialog{width:min(510px,calc(100% - 28px)); margin:auto; color:var(--text); border:1px solid var(--line); border-radius:8px;
  background:#12151a; box-shadow:0 30px 80px rgba(0,0,0,.58);}
dialog::backdrop{background:rgba(5,7,10,.78); backdrop-filter:blur(4px);}
dialog form{padding:22px;}
.dialog-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px;}
.dialog-head h2{margin-top:3px; font-size:21px;}
.icon-button{width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line);
  border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; font-size:22px; line-height:1;}
.icon-button:hover{color:var(--text); background:var(--surface-2);}
.field{display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:12px; font-weight:700;}
.field input{width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:7px;
  background:#0b0d11; color:var(--text); font-size:14px;}
fieldset{margin-top:20px; border:0;}
legend{margin-bottom:8px; color:var(--muted); font-size:12px; font-weight:700;}
.mode-options{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.mode-options label{position:relative; cursor:pointer;}
.mode-options input{position:absolute; opacity:0; pointer-events:none;}
.mode-options span{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:64px;
  border:1px solid var(--line); border-radius:7px; background:#191c22;}
.mode-options b{font-size:13px;}
.mode-options small{margin-top:3px; color:var(--muted); font-size:10px;}
.mode-options input:checked+span{border-color:var(--yellow); background:#272317; box-shadow:0 0 0 1px rgba(255,200,87,.15);}
.mode-options input:focus-visible+span{outline:3px solid var(--yellow); outline-offset:2px;}
.dialog-limit{display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding:11px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:11px;}
.dialog-limit b{color:var(--text); font:13px Consolas,monospace;}
.dialog-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px;}
.toast{position:fixed; left:50%; bottom:24px; z-index:80; max-width:min(420px,calc(100% - 28px)); padding:10px 16px;
  border:1px solid var(--line); border-radius:7px; color:var(--text); background:#20242c; box-shadow:0 14px 35px rgba(0,0,0,.4);
  font-size:12px; opacity:0; pointer-events:none; transform:translate(-50%,10px); transition:opacity .18s,transform .18s;}
.toast.show{opacity:1; transform:translate(-50%,0);}

@media(max-width:920px){
  .overview{align-items:flex-start; flex-direction:column; gap:22px;}
  .stats{width:100%; min-width:0;}
  .stats>div:first-child{border-left:0; padding-left:0;}
  .room-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .topbar{height:60px; padding:0 14px;}
  .brand img{width:36px; height:36px;}
  .brand small{display:none;}
  .topbar nav a:first-child{display:none;}
  .topbar nav a{padding:7px 9px;}
  main{width:calc(100% - 20px); padding-top:20px;}
  .overview{min-height:0; padding-bottom:19px;}
  .overview h1{font-size:26px;}
  .stats{grid-template-columns:repeat(2,1fr); row-gap:13px;}
  .stats>div{min-height:48px; padding:4px 12px;}
  .stats>div:nth-child(3){border-left:0; padding-left:0;}
  .stats strong{font-size:20px;}
  .room-toolbar{align-items:stretch; flex-direction:column;}
  .toolbar-actions{align-items:stretch; flex-direction:column;}
  .segments{display:grid; grid-template-columns:repeat(4,1fr);}
  .segments button{min-width:0;}
  .create-button{width:100%;}
  .room-grid{grid-template-columns:1fr;}
  .room-card{min-height:164px;}
  .mode-options{grid-template-columns:1fr;}
  .mode-options span{min-height:50px; flex-direction:row; gap:8px;}
  .dialog-actions .create-button{width:auto;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important;}
}