:root{ --bg:#111; --surface:#1a1a1a; --surface2:#222; --border:#2e2e2e; --orange:#ff6a00; --orange2:#ff9900; --orange-dim:#7a3200; --orange-glow:rgba(255,106,0,0.15); --text:#f5e6d0; --text-dim:#8a7a6a; --text-muted:#3a3028; --diamond:#4dd9e8; --dg:rgba(77,217,232,0.2); --danger:#e74c3c; --success:#2ecc71; --r:8px; }

.announcement-banner { background:linear-gradient(135deg,var(--danger),#c0392b); color:#fff; text-align:center; padding:14px 20px; font-family:'Press Start 2P',monospace; font-size:0.6rem; text-shadow:0 2px 4px rgba(0,0,0,0.3); box-shadow:0 4px 12px rgba(231,76,60,0.4); border-bottom:2px solid rgba(255,255,255,0.2); }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:'Nunito',sans-serif; min-height:100vh; overflow-x:hidden; }

body::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(255,106,0,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,106,0,0.04) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; z-index:0; animation: gridDriftX 60s ease-in-out infinite alternate, gridDriftY 43s ease-in-out infinite alternate; }
@keyframes gridDriftX { 0% { background-position-x: 0px; } 100% { background-position-x: 1024px; } }
@keyframes gridDriftY { 0% { background-position-y: 0px; } 100% { background-position-y: 1024px; } }

.topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:11px 20px; background:rgba(17,17,17,0.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.mc-title { font-family:'Press Start 2P',monospace; font-size:0.6rem; color:var(--orange); text-shadow:0 0 10px var(--orange); }
.mc-sub { font-size:0.73rem; color:var(--text-dim); margin-top:2px; font-weight:700; }
.topbar-right { display:flex; align-items:center; gap:9px; }

.user-pill { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:6px 12px; font-size:0.8rem; font-weight:700; color:var(--text-dim); display:flex; align-items:center; gap:6px; }
.topbar-link { background:transparent; border:1px solid var(--border); border-radius:var(--r); padding:7px 12px; color:var(--text-dim); font-size:0.78rem; font-weight:700; cursor:pointer; transition:all 0.15s; text-decoration:none; font-family:'Nunito',sans-serif; white-space:nowrap; }
.topbar-link:hover { border-color:var(--orange); color:var(--orange); }
.topbar-link.danger:hover { border-color:var(--danger); color:var(--danger); }
.topbar-link.diamond { border-color:var(--dg); color:var(--diamond); }
.topbar-link.diamond:hover { border-color:var(--diamond); box-shadow: 0 0 12px var(--dg); }

.bell-btn { position:relative; cursor:pointer; font-size:1.3rem; text-decoration:none; }
.bell-badge { position:absolute; top:-5px; right:-8px; background:var(--danger); color:#fff; font-size:0.5rem; font-family:'Press Start 2P',monospace; padding:3px 5px; border-radius:10px; display:none; }

.auth-gate { position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:500; display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(5px); }
.auth-box { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:40px 32px; width:100%; max-width:380px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.8),0 0 40px var(--orange-glow); position:relative; }
.auth-close { position:absolute; top:15px; right:15px; background:none; border:none; color:var(--text-dim); font-size:1.2rem; cursor:pointer; }
.auth-close:hover { color:var(--text); }
.auth-icon { font-size:2.8rem; margin-bottom:12px; }
.auth-title { font-family:'Press Start 2P',monospace; font-size:0.72rem; color:var(--orange); margin-bottom:8px; text-shadow:0 0 10px var(--orange); }
.auth-sub { font-size:0.85rem; color:var(--text-dim); margin-bottom:20px; font-weight:600; }
.auth-input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px; color:var(--text); font-family:'Nunito',sans-serif; font-size:1rem; outline:none; transition:border-color 0.15s; margin-bottom:10px; box-sizing:border-box; }
.auth-input:focus { border-color:var(--orange); }
.auth-btn-row { display:flex; gap:10px; margin-top:5px; }
.auth-btn { flex:1; padding:13px; background:linear-gradient(135deg,var(--orange),var(--orange2)); border:none; border-radius:var(--r); font-family:'Press Start 2P',monospace; font-size:0.56rem; color:#000; cursor:pointer; transition:box-shadow 0.15s; text-decoration:none; }
.auth-btn:hover { box-shadow:0 0 22px rgba(255,106,0,0.5); }
.auth-btn.sec { background:transparent; border:1px solid var(--border); color:var(--text); }
.auth-btn.sec:hover { border-color:var(--orange); box-shadow:none; }
.setup-err { color:var(--danger); font-size:0.8rem; font-weight:700; margin-top:10px; min-height:16px; }

.main-container { position:relative; z-index:1; max-width:600px; margin:40px auto; padding:20px; text-align:center; }
.main-logo { width:120px; height:auto; margin-bottom:15px; filter:drop-shadow(0 0 20px var(--orange-glow)); animation:float 6s ease-in-out infinite; border-radius:50%; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } }
h1 { font-family:'Press Start 2P', monospace; font-size:1.3rem; color:var(--orange); text-shadow:0 0 15px var(--orange-glow); margin-bottom:10px; line-height:1.4; }
.subtitle { font-size:0.95rem; color:var(--text-dim); margin-bottom:30px; font-weight:700; }

.setup-box-inline { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:36px 28px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.5); margin-bottom:30px; }
.status-indicator { display:inline-block; padding:6px 14px; border-radius:20px; font-size:0.75rem; font-weight:800; background:var(--bg); border:1px solid var(--border); margin-bottom:15px; }
.status-online { color:var(--success); border-color:var(--success); box-shadow:0 0 10px rgba(46,204,113,0.2); }
.status-offline { color:var(--danger); border-color:var(--danger); box-shadow:0 0 10px rgba(231,76,60,0.2); }
.player-count { font-family:'Press Start 2P', monospace; font-size:1.5rem; color:var(--diamond); margin-bottom:5px; }
.player-label { font-size:0.75rem; color:var(--text-dim); text-transform:uppercase; font-weight:800; letter-spacing:1px; margin-bottom:15px; }

.player-list { list-style:none; padding:0; margin:0 0 15px 0; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); max-height:150px; overflow-y:auto; display:none; }
.player-list li { padding:10px; border-bottom:1px solid var(--border); color:var(--text); font-size:0.85rem; font-weight:700; display:flex; align-items:center; justify-content:center; gap:10px; }
.player-list li:last-child { border-bottom:none; }

.server-info-row { display:flex; align-items:center; gap:15px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:15px; text-align:left; }
.server-icon-img { width:64px; height:64px; border-radius:5px; image-rendering:pixelated; }
.motd-box { font-family:'Courier New', monospace; font-size:0.85rem; color:var(--text-dim); line-height:1.4; flex:1; }

.ip-box { display:inline-block; padding:15px 25px; background:var(--surface); border:1px dashed var(--orange); border-radius:var(--r); font-family:'Press Start 2P', monospace; font-size:0.7rem; color:var(--diamond); cursor:pointer; transition:all 0.15s; width:100%; word-break:break-all; }
.ip-box:hover { background:var(--orange-glow); transform:scale(1.02); }
.copy-hint { display:block; font-size:0.75rem; color:var(--text-dim); margin-top:10px; font-weight:700; }
.loader { border:3px solid rgba(255,255,255,0.1); border-top:3px solid var(--orange); border-radius:50%; width:20px; height:20px; animation:spin 1s linear infinite; margin:0 auto; }
@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(60px); background:var(--surface); border:1px solid var(--orange); border-radius:var(--r); padding:10px 20px; font-size:0.86rem; font-weight:700; color:var(--orange); z-index:999; opacity:0; transition:transform 0.25s,opacity 0.25s; text-align:center; white-space:nowrap; }
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

@media (max-width: 768px) {
.topbar { flex-direction: column; gap: 12px; padding: 15px; text-align: center; }
.topbar-right { width: 100%; justify-content: center; flex-wrap: wrap; gap:12px; }
.main-container { padding: 10px; margin: 20px auto; }
.setup-box-inline { padding: 25px 15px; }
.server-info-row { flex-direction: column; text-align: center; }
}