@font-face{font-family:'Press Start 2P';src:url('/assets/fonts/pressstart2p.woff2') format('woff2');font-display:swap}
@font-face{font-family:'VT323';src:url('/assets/fonts/vt323.woff2') format('woff2');font-display:swap}

:root{
  --gold:#FFAA00; --xp:#7CFC00; --diamond:#4AEDD9;
  --nether:#c0392b; --ink:#f4f1de; --muted:#c8c0a8;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:var(--ink);
  font-family:VT323, ui-monospace, Consolas, monospace; font-size:22px;
  background:#1a120c url('/assets/dirt.jpg') center/128px repeat}
body::before{content:'';position:fixed;inset:0;background:rgba(10,8,6,.62);pointer-events:none;z-index:0}
.app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}

.hero{position:relative;height:240px;overflow:hidden;border-bottom:4px solid #000}
.hero.short{height:180px}
.hero img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(10,8,6,.86))}
.hero .copy{position:absolute;left:24px;right:24px;bottom:16px;z-index:2}
.mc-title{font-family:'Press Start 2P',monospace;color:var(--gold);letter-spacing:1px;
  text-shadow:3px 3px 0 #000, -1px -1px 0 #3F3F00, 4px 4px 0 #1a1000; margin:0 0 8px; font-size:24px}
.mc-sub{margin:0;color:#fff8dc;text-shadow:2px 2px 0 #000;font-size:24px}

.splash{
  position:absolute;right:7%;top:26%;z-index:3;
  color:#FFFF55;font-family:'Press Start 2P',monospace;font-size:13px;line-height:1.45;
  transform:rotate(-20deg);transform-origin:center;
  text-shadow:2px 2px 0 #3F3F00, 3px 3px 0 #000;
  animation:splash-pulse .55s ease-in-out infinite alternate;
  pointer-events:none;max-width:46%;text-align:center;
}
@keyframes splash-pulse{
  from{transform:rotate(-20deg) scale(1)}
  to{transform:rotate(-20deg) scale(1.12)}
}

nav{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:rgba(0,0,0,.45);border-bottom:3px solid #000;position:sticky;top:0;z-index:5;align-items:center}
.mc-btn{font-family:'Press Start 2P',monospace;font-size:10px;line-height:1.4;color:#FFFFA0;
  background:#6F6F6F;border:3px solid;border-color:#fff #2b2b2b #2b2b2b #fff;
  padding:10px 12px;cursor:pointer;text-shadow:2px 2px #3F3F00;user-select:none;text-decoration:none;display:inline-block}
.mc-btn:hover,.mc-btn.active{background:#7e9a6f;color:#fff}
.mc-btn:active{border-color:#2b2b2b #fff #fff #2b2b2b}
.mc-btn.go{background:#3d5c2a;color:var(--xp)}
.mc-btn.stop{background:#6b2a24;color:#ffb3b3}
.spacer{flex:1}
.who{color:var(--gold);font-size:18px}

main{padding:16px 16px 48px;max-width:1400px;width:100%;margin:0 auto}
main.narrow{max-width:560px}
main.fill{max-width:none;padding:0;flex:1;display:flex;flex-direction:column}
.panel{background:linear-gradient(180deg,rgba(40,40,40,.88),rgba(18,18,18,.92));
  border:4px solid;border-color:#8b8b8b #111 #111 #8b8b8b;padding:16px 18px;margin-bottom:14px;box-shadow:0 8px 0 #0006}
h2.sec{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--gold);margin:0 0 10px;text-shadow:2px 2px #000}
p.lead{margin:0 0 12px;color:var(--muted)}
.err{color:#f5c6c6;border-left:4px solid var(--nether);background:#0006;padding:8px}
.ok{color:#c6f5c6;border-left:4px solid var(--xp);background:#0006;padding:8px}
.hidden{display:none}

.stack{display:flex;flex-direction:column;gap:10px}
.stack label{color:var(--gold);font-size:18px;display:flex;flex-direction:column;gap:4px}
.field,select.field{font:inherit;font-size:22px;padding:6px 10px;border:3px solid #000;background:#111;color:var(--gold);outline:none}
.live{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 12px;background:#1118;border:3px solid #000;margin:0 16px 0}
.live b{color:var(--xp);font-family:'Press Start 2P',monospace;font-size:9px}
.live.off b{color:#f88}
.frame{flex:1;border:0;min-height:70vh;width:100%;background:#111}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;background:#0a0a0acc;border:3px solid #000;padding:8px}
.srow .name{color:#fff}
.srow .motd{color:#55FF55;font-size:18px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{font-family:'Press Start 2P',monospace;font-size:8px;padding:6px 8px;border:2px solid #000;background:#333;color:#ddd}
.invite-box{background:#000;border:3px solid #000;padding:10px;word-break:break-all;color:var(--xp);margin:8px 0}
.table{width:100%;border-collapse:collapse;font-size:18px}
.table th{text-align:left;color:var(--gold);border-bottom:2px solid #000;padding:6px}
.table td{padding:6px;border-bottom:1px solid #333;vertical-align:top}

@media (max-width:800px){
  .mc-title{font-size:16px}
  .splash{font-size:9px;right:4%;top:18%;max-width:55%}
  .hero{height:180px}
}