:root{
  color-scheme:dark;
  --white:#fff;
  --gray:#aaa;
  --dark-gray:#555;
  --dim:#8a8a8a;
  --shadow:#3f3f3f;
  --green:#55ff55;
  --xp:#80ff20;
  --aqua:#55ffff;
  --yellow:#ffff55;
  --gold:#ffaa00;
  --red:#ff5555;
  --panel:rgba(0,0,0,.62);
  --pixel:"Press Start 2P",monospace;
  --body:"VT323",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:#1d140d}
body{
  margin:0;
  min-width:320px;
  color:var(--white);
  font:22px/1.2 var(--body);
  text-shadow:2px 2px 0 var(--shadow);
  /* Darkened dirt, like the options menu background */
  background:
    linear-gradient(rgba(0,0,0,.66),rgba(0,0,0,.66)),
    url("/dirt.svg") 0 0/64px 64px repeat #1d140d;
  image-rendering:pixelated;
}
button{font:inherit;color:inherit}
h1,h2,p{margin:0}
.shell{width:min(980px,calc(100% - 32px));margin:0 auto;padding:40px 0 28px}

/* ---------- Title ---------- */
.title{position:relative;text-align:center;margin:8px 0 44px}
.logo{
  display:flex;flex-direction:column;gap:.18em;
  font:clamp(22px,5.4vw,50px)/1.1 var(--pixel);
  text-transform:uppercase;letter-spacing:.02em;
  text-shadow:none;
  filter:drop-shadow(0 4px 0 #2a2a2a) drop-shadow(3px 0 0 #2a2a2a) drop-shadow(-3px 0 0 #2a2a2a) drop-shadow(0 -3px 0 #2a2a2a);
}
.logo span{
  color:transparent;
  background:linear-gradient(#f4f4f4 0 45%,#c9c9c9 45% 60%,#9a9a9a 60%);
  -webkit-background-clip:text;background-clip:text;
}
.splash{
  position:absolute;right:max(0px,calc(50% - 360px));bottom:-6px;
  font:clamp(9px,1.4vw,13px)/1 var(--pixel);color:var(--yellow);text-shadow:2px 2px 0 #3f3f15;
  transform:rotate(-17deg);transform-origin:center;white-space:nowrap;
  animation:splash .5s ease-in-out infinite alternate;
}
@keyframes splash{to{transform:rotate(-17deg) scale(1.1)}}

/* ---------- Shared bits ---------- */
.label{font:12px/1.4 var(--pixel);color:var(--white);text-transform:uppercase;letter-spacing:.02em}
.section .label{margin-bottom:10px;color:var(--gray)}
.panel,.slot,.server-entry{
  background:var(--panel);
  border:2px solid #000;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.1),inset -2px -2px 0 rgba(0,0,0,.45);
}
.subtle{margin-top:4px;color:var(--gray);font-size:19px}

/* ---------- Server list entry ---------- */
.server-entry{display:flex;gap:14px;padding:10px;border-color:#808080}
.server-icon{flex:none;width:64px;height:64px;border:2px solid #000}
.server-info{flex:1;min-width:0}
.server-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.server-row b{font-weight:400;font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.server-right{display:flex;align-items:center;gap:10px;flex:none}
.count{color:var(--gray)}
.motd{color:var(--gray);margin-top:2px;overflow-wrap:anywhere}
.status{margin-top:2px;font-size:19px}
.status.online{color:var(--green)}
.status.offline{color:var(--red)}
.status.checking{color:var(--dark-gray)}

/* Ping bars — five steps, like the server list */
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.bars i{width:3px;background:#2b2b2b;box-shadow:1px 1px 0 #000}
.bars i:nth-child(1){height:4px}.bars i:nth-child(2){height:7px}.bars i:nth-child(3){height:10px}
.bars i:nth-child(4){height:13px}.bars i:nth-child(5){height:16px}
.bars[data-level="1"] i:nth-child(-n+1),
.bars[data-level="2"] i:nth-child(-n+2),
.bars[data-level="3"] i:nth-child(-n+3),
.bars[data-level="4"] i:nth-child(-n+4),
.bars[data-level="5"] i{background:var(--green)}
.bars.offline i{background:#5a1a1a}

/* ---------- XP bar ---------- */
.xp{position:relative;margin:26px 0 0;text-align:center}
.xp-level{
  position:absolute;left:50%;top:-20px;transform:translateX(-50%);
  font:14px/1 var(--pixel);color:var(--xp);
  text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000;
}
.xp-bar{
  height:12px;border:2px solid #000;background:#1b1b1b;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.6);overflow:hidden;position:relative;
}
.xp-bar::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 calc(5.55% - 2px),#000 calc(5.55% - 2px) 5.55%);
}
.xp-fill{height:100%;width:0;background:linear-gradient(#c4ff7e 0 30%,var(--xp) 30% 70%,#4f9d10 70%);transition:width .6s steps(12)}
.xp-caption{display:block;margin-top:6px;color:var(--gray);font-size:19px}

/* ---------- Buttons ---------- */
.connect-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.mc-btn{
  display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:8px 14px;
  cursor:pointer;font-size:24px;
  background:#6f6f6f;border:2px solid #000;
  box-shadow:inset 2px 2px 0 #a9a9a9,inset -2px -4px 0 #3e3e3e;
}
.mc-btn:hover,.mc-btn:focus-visible{
  outline:none;color:#ffffa0;background:#7b86c4;
  box-shadow:inset 2px 2px 0 #b8c1ec,inset -2px -4px 0 #454f85;border-color:#fff;
}
.mc-btn:active{transform:translateY(1px)}
.btn-tag{font:9px/1 var(--pixel);padding:5px 6px;background:rgba(0,0,0,.4);text-shadow:none}
.btn-tag.java{color:var(--green)}
.btn-tag.bedrock{color:var(--aqua)}
.hint{margin-top:8px;text-align:center;color:var(--dim);font-size:18px;text-shadow:none}

/* ---------- Stat slots ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:30px}
.slot{padding:12px 14px;min-width:0}
.slot span{display:block;font:9px/1.4 var(--pixel);color:var(--gray);text-transform:uppercase}
.slot strong{display:block;margin:8px 0 2px;font-weight:400;font-size:28px;overflow-wrap:anywhere}
.slot small{display:block;color:var(--dim);font-size:18px;text-shadow:none;overflow-wrap:anywhere}
#overallStatus.online{color:var(--green)}
#overallStatus.offline{color:var(--red)}

/* ---------- Edition panels ---------- */
.editions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.panel{padding:16px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.badge{font:9px/1 var(--pixel);padding:6px 7px;border:2px solid #000;background:#2b2b2b;color:var(--gray);text-shadow:none;white-space:nowrap}
.badge.online{background:#1f4d1f;color:var(--green)}
.badge.offline{background:#4d1f1f;color:var(--red)}
.rows{margin:12px 0 0}
.rows>div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-top:2px solid rgba(255,255,255,.06)}
.rows dt{color:var(--gray)}
.rows dd{margin:0;text-align:right;overflow-wrap:anywhere;display:flex;align-items:center;gap:10px}

/* ---------- Players (tab list) ---------- */
.players{margin-top:10px}
.player-count{font:16px/1 var(--pixel);color:var(--yellow);padding:8px 10px;border:2px solid #000;background:#2b2b2b;text-shadow:2px 2px 0 #3f3f15}
.player-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:14px}
.player{display:flex;align-items:center;gap:10px;min-width:0;padding:4px 8px 4px 4px;background:rgba(255,255,255,.08)}
.player:hover{background:rgba(255,255,255,.14)}
.head{flex:none;width:32px;height:32px;display:grid;place-items:center;background:#3b2a1e;font:12px var(--pixel);text-shadow:none;box-shadow:1px 1px 0 #000}
.head img{width:100%;height:100%;display:block}
.player-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{flex:none;font:8px/1 var(--pixel);text-shadow:none}
.tag.java{color:var(--green)}
.tag.bedrock{color:var(--aqua)}
.empty{grid-column:1/-1;padding:28px 8px;text-align:center;color:var(--gray)}

/* ---------- Footer ---------- */
footer{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:30px;text-align:center;color:var(--dim);font-size:18px;text-shadow:none}
footer b{color:var(--gray);font-weight:400}

/* ---------- Advancement toast ---------- */
.toast{
  position:fixed;top:16px;right:16px;z-index:10;display:flex;flex-direction:column;gap:6px;
  min-width:250px;padding:12px 16px;background:#212121;border:2px solid #000;
  box-shadow:inset 0 0 0 2px #555,inset 0 0 0 4px #000;
  transform:translateX(calc(100% + 24px));transition:transform .25s steps(6);
}
.toast.show{transform:none}
.toast b{font:10px/1.4 var(--pixel);color:var(--yellow);text-shadow:none}
.toast span{font-size:20px}

@media(max-width:820px){
  .stats{grid-template-columns:1fr 1fr}
  .player-list{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  body{font-size:20px}
  .shell{width:calc(100% - 32px);padding-top:28px}
  .title{margin-bottom:36px}
  .splash{right:6px;bottom:-16px;font-size:8px}
  .slot{padding:10px}
  .slot strong{font-size:22px}
  .server-icon{width:48px;height:48px}
  .connect-row,.editions,.player-list{grid-template-columns:1fr}
  .toast{left:16px;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  .splash{animation:none}
  .toast,.xp-fill{transition:none}
}