*{box-sizing:border-box}
:root{
  --bg:#070807;
  --panel:#0b0f0c;
  --panel2:#0e120f;
  --line:#304033;
  --line2:#1c281e;
  --text:#d9dde5;
  --dim:#728078;
  --gray:#9ca8bd;
  --orange:#ff7a18;
  --purple:#c34cff;
  --red:#ff4e58;
}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:"Courier New",monospace}
body{background:
radial-gradient(circle at 25% 5%,rgba(195,76,255,.05),transparent 26%),
radial-gradient(circle at 80% 8%,rgba(255,122,24,.05),transparent 24%),
#070807}
body:before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:20;
background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)
}
.site{width:min(1040px,calc(100% - 24px));margin:12px auto 26px}
.header{
display:grid;
grid-template-columns:180px minmax(0,1fr) auto;
align-items:center;
gap:18px;
border:1px solid var(--line);
background:rgba(9,12,10,.97);
min-height:126px;
overflow:hidden
}
.logo-box{
width:180px;
height:126px;
display:flex;
align-items:center;
justify-content:center;
padding:8px;
overflow:hidden;
border-right:1px solid var(--line);
background:#080a08;
flex:none
}
.logo-box img{
display:block;
width:100%;
height:100%;
max-width:100%;
max-height:100%;
object-fit:contain;
object-position:center;
flex:none
}
.head-info{min-width:0}
.brand{
font-size:clamp(34px,6vw,62px);
line-height:.9;
font-weight:900;
letter-spacing:.03em;
color:#d7dbe4;
text-shadow:3px 3px 0 rgba(195,76,255,.45),-2px -2px 0 rgba(255,122,24,.22)
}
.sub{margin-top:9px;font-size:10px;color:var(--gray);letter-spacing:.11em}
.head-status{
margin-right:18px;display:flex;align-items:center;gap:8px;
font-size:11px;color:var(--gray);white-space:nowrap
}
#topDot,#homeDot{
width:9px;height:9px;display:inline-block;border:1px solid #555;background:#555
}
#topDot.on,#homeDot.on{background:var(--orange);border-color:var(--orange);box-shadow:0 0 9px rgba(255,122,24,.55)}
#topDot.off,#homeDot.off{background:var(--red);border-color:var(--red);box-shadow:0 0 9px rgba(255,78,88,.5)}
.nav{
display:flex;gap:5px;flex-wrap:wrap;padding:7px 8px;
border:1px solid var(--line);border-top:0;background:#090c09
}
.nav button,.copy,.refresh{
appearance:none;border:1px solid var(--line);background:#0d130e;color:var(--gray);
font:inherit;font-size:11px;padding:7px 11px;cursor:pointer
}
.nav button:hover,.copy:hover,.refresh:hover{color:#fff;border-color:var(--orange)}
.nav button.active{color:var(--orange);border-color:var(--orange);background:#14100b}
main{margin-top:12px}
.page{display:none}
.page.active{display:block}
.grid-home{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:10px}
.box{border:1px solid var(--line);background:rgba(9,12,10,.97)}
.titlebar{
height:34px;display:flex;align-items:center;justify-content:space-between;
padding:0 10px;border-bottom:1px solid var(--line);
background:#0e150f;color:var(--gray);font-size:11px;letter-spacing:.1em
}
.main-box{min-height:270px}
.main-content{padding:22px}
.online{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--orange)}
.online b{font-weight:700}
.server-address{
font-size:clamp(30px,6vw,57px);font-weight:700;
color:#f0f1f4;margin:28px 0 22px;
text-shadow:2px 2px 0 rgba(195,76,255,.26)
}
.players-big{font-size:31px;color:var(--orange);font-weight:700}
.players-big small{font-size:10px;color:var(--dim);font-weight:400}
.copy{margin-top:24px;color:var(--orange);border-color:#73421e}
.info-box{width:270px}
.info-list{padding:5px 10px}
.info-list div,.rules div,.archive-line{
display:flex;justify-content:space-between;align-items:center;
min-height:30px;padding:0 2px;border-bottom:1px dotted #263228;font-size:10px
}
.info-list div:last-child,.rules div:last-child,.archive-line:last-child{border-bottom:0}
.info-list span,.rules span,.archive-line span{color:var(--dim)}
.info-list b,.rules b,.archive-line b{color:#e0e4eb;font-weight:700}
.info-list b{color:var(--gray)}
.info-list div:nth-child(3) b,.info-list div:nth-child(4) b{color:var(--purple)}
.info-list div:nth-child(5) b{color:var(--orange)}
.info-list div:nth-child(6) b{color:var(--gray)}
.mini-note{
margin-top:8px;padding:8px 10px;border:1px dotted var(--line);
color:#68746d;font-size:10px;text-align:center;letter-spacing:.08em
}
.body{padding:14px}
.rules{border:1px solid var(--line2);width:100%;max-width:none}
.rules div{min-height:39px;padding:0 10px}
.rules b{color:var(--gray)}
.warning{margin-top:11px;border-left:2px solid var(--orange);padding:7px 9px;color:#a48d75;font-size:10px}
.refresh{font-size:10px;padding:5px 8px;color:var(--orange)}
.player-count{font-size:11px;color:var(--dim);margin-bottom:11px}
.player-count span,.player-count b{color:var(--orange)}
.players-list{border:1px solid var(--line2);background:#080b08}
.player{
display:flex;align-items:center;gap:10px;padding:7px 9px;
border-bottom:1px dotted #263228;min-height:48px
}
.player:last-child{border-bottom:0}
.player img{
width:32px;height:32px;image-rendering:auto;image-rendering:pixelated;
border:1px solid #3a463d;background:#0c100d;display:block;flex:none
}
.player-name{color:#dde2ea;font-size:12px}
.player-id{margin-left:auto;color:#5f6b63;font-size:10px}
.empty{padding:26px;text-align:center;color:var(--dim);font-size:11px}
.archive-line{min-height:48px;padding:0 10px}
.archive-line b:first-of-type{color:var(--purple)}
footer{text-align:center;color:#4e5a52;font-size:10px;padding:15px}
@media(max-width:760px){
.site{width:calc(100% - 12px);margin:6px auto 18px}
.header{grid-template-columns:140px minmax(0,1fr);min-height:104px}
.logo-box{width:140px;height:104px;padding:7px}
.head-status{grid-column:2;grid-row:2;margin:0 12px 9px 0}
.brand{font-size:35px}
.sub{font-size:9px}
.grid-home{grid-template-columns:1fr}
.info-box{width:auto}
}
@media(max-width:460px){
.header{grid-template-columns:1fr;text-align:center;padding-top:4px}
.logo-box{width:100%;height:92px;border-right:0;border-bottom:1px solid var(--line);padding:5px}
.head-status{grid-column:auto;grid-row:auto;justify-content:center;margin:7px 0 10px}
.nav{justify-content:center}
.main-content{padding:18px}
.server-address{font-size:39px}
}

.brand::first-letter{color:var(--orange)}
.brand{text-decoration:none}
h1,h2{color:#d8dbe3;text-shadow:2px 2px 0 rgba(195,76,255,.28)}
.titlebar{color:var(--orange)}