@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --bg:#f4f1e8;
  --bg-2:#ffffff;
  --text:#1a1a1a;
  --muted:#6b6b6b;
  --accent:#e0a458;
  --accent-2:#c97f3d;
  --border:#1a1a1a;
  --card:#ffffff;
  --shadow:#1a1a1a;
  --danger:#d9534f;
  --success:#5cb85c;
  --star:#f0b429;
}

[data-theme="dark"]{
  --bg:#101014;
  --bg-2:#1a1a22;
  --text:#f0ece2;
  --muted:#9c98a8;
  --accent:#e0a458;
  --accent-2:#f0c478;
  --border:#f0ece2;
  --card:#1a1a22;
  --shadow:#e0a458;
  --danger:#ff6b6b;
  --success:#7ed87e;
  --star:#f0b429;
}

*{box-sizing:border-box;}
html{image-rendering:pixelated;}
body{
  margin:0;
  font-family:'VT323', monospace;
  background:var(--bg);
  color:var(--text);
  font-size:18px;
  line-height:1.5;
  transition:background .2s, color .2s;
}

img{image-rendering:pixelated;}

h1,h2,h3,h4,.pixel-font{
  font-family:'Press Start 2P', monospace;
  letter-spacing:1px;
}

a{color:var(--accent-2);text-decoration:none;}
a:hover{text-decoration:underline;}

.pixel-border{
  border:4px solid var(--border);
  box-shadow:6px 6px 0 var(--shadow);
}

button, .btn{
  font-family:'Press Start 2P', monospace;
  font-size:11px;
  background:var(--accent);
  color:#1a1a1a;
  border:3px solid var(--border);
  box-shadow:4px 4px 0 var(--shadow);
  padding:10px 14px;
  cursor:pointer;
  transition:transform .08s, box-shadow .08s;
}
button:hover, .btn:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--shadow);
}
button:active, .btn:active{
  transform:translate(4px,4px);
  box-shadow:0 0 0 var(--shadow);
}
button.secondary{background:var(--bg-2);color:var(--text);}
button.danger{background:var(--danger);color:#fff;}
button:disabled{opacity:.5;cursor:not-allowed;}

input, textarea, select{
  font-family:'VT323', monospace;
  font-size:16px;
  background:var(--bg-2);
  color:var(--text);
  border:3px solid var(--border);
  padding:8px 10px;
  width:100%;
}
input:focus, textarea:focus, select:focus{outline:2px dashed var(--accent);}

.container{max-width:1100px;margin:0 auto;padding:0 20px;}

/* Navbar */
.navbar{
  background:var(--bg-2);
  border-bottom:4px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;max-width:1100px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--text);}
.brand img{width:40px;height:40px;border:3px solid var(--border);}
.nav-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.nav-links a{font-family:'Press Start 2P';font-size:10px;color:var(--text);}
.nav-links a.active{color:var(--accent-2);}
.theme-toggle{font-size:18px;background:var(--bg);border:3px solid var(--border);box-shadow:3px 3px 0 var(--shadow);padding:6px 10px;}
.hamburger{display:none;font-size:20px;background:none;border:none;box-shadow:none;}

@media(max-width:768px){
  .nav-links{display:none;flex-direction:column;width:100%;padding:10px 0;align-items:flex-start;}
  .nav-links.open{display:flex;}
  .nav-inner{flex-wrap:wrap;}
  .hamburger{display:block;}
}

/* Hero */
.hero{
  text-align:center;padding:60px 20px;
}
.hero img.avatar{
  width:160px;height:160px;border:5px solid var(--border);box-shadow:8px 8px 0 var(--shadow);
  margin-bottom:20px;background:var(--card);object-fit:cover;
}
.hero h1{font-size:28px;margin-bottom:10px;}
.hero p{color:var(--muted);font-size:20px;max-width:600px;margin:10px auto;}
.social-links{display:flex;justify-content:center;gap:14px;margin-top:20px;}
.social-links a{font-family:'Press Start 2P';font-size:10px;border:3px solid var(--border);padding:8px 12px;box-shadow:3px 3px 0 var(--shadow);background:var(--card);color:var(--text);}
.social-links a:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow);text-decoration:none;}

/* Sections */
section{padding:40px 20px;}
section h2{font-size:22px;margin-bottom:24px;text-align:center;}

/* Grid cards */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.card{
  background:var(--card);border:4px solid var(--border);box-shadow:6px 6px 0 var(--shadow);
  padding:16px;display:flex;flex-direction:column;gap:10px;
}
.card img{width:100%;height:160px;object-fit:cover;border:3px solid var(--border);}
.card h3{font-size:14px;}
.card p{color:var(--muted);font-size:16px;flex:1;}
.card-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

/* Stars */
.stars{display:flex;gap:4px;cursor:pointer;}
.star{font-size:20px;color:var(--muted);}
.star.filled{color:var(--star);}

/* Comments */
.comments{margin-top:14px;border-top:3px dashed var(--border);padding-top:10px;}
.comment{padding:8px 0;border-bottom:1px dashed var(--muted);font-size:15px;}
.comment b{color:var(--accent-2);}
.comment-form{display:flex;gap:8px;margin-top:10px;}
.comment-form input{flex:1;}

/* Blog */
.blog-post{
  background:var(--card);border:4px solid var(--border);box-shadow:6px 6px 0 var(--shadow);
  padding:20px;margin-bottom:24px;
}
.blog-post h3{font-size:18px;margin-bottom:6px;}
.blog-meta{color:var(--muted);font-size:14px;margin-bottom:10px;}
.blog-content{font-size:17px;}
.reactions{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap;align-items:center;}
.reaction-btn{font-size:11px;background:var(--bg-2);}
.reaction-btn.active{background:var(--accent);}

/* Forms / Auth */
.form-box{
  max-width:420px;margin:30px auto;background:var(--card);border:4px solid var(--border);
  box-shadow:6px 6px 0 var(--shadow);padding:24px;
}
.form-box h2{font-size:18px;text-align:center;}
.form-box label{display:block;margin:12px 0 4px;font-size:14px;}
.form-box .switch-link{text-align:center;margin-top:14px;font-size:15px;}

/* Admin */
.admin-section{
  background:var(--card);border:4px solid var(--border);box-shadow:6px 6px 0 var(--shadow);
  padding:20px;margin-bottom:24px;
}
.admin-section h3{font-size:16px;margin-bottom:14px;}
.field-row{margin-bottom:12px;}
.field-row label{display:block;font-size:13px;margin-bottom:4px;}

/* Chatbox */
.chat-toggle{
  position:fixed;bottom:20px;right:20px;z-index:200;
  width:60px;height:60px;border-radius:0;font-size:24px;
  display:flex;align-items:center;justify-content:center;
}
.chat-window{
  position:fixed;bottom:90px;right:20px;width:320px;max-height:440px;
  background:var(--card);border:4px solid var(--border);box-shadow:8px 8px 0 var(--shadow);
  display:none;flex-direction:column;z-index:200;
}
.chat-window.open{display:flex;}
.chat-header{padding:10px;border-bottom:3px solid var(--border);font-family:'Press Start 2P';font-size:11px;display:flex;justify-content:space-between;align-items:center;}
.chat-messages{flex:1;overflow-y:auto;padding:10px;font-size:15px;max-height:280px;}
.chat-msg{margin-bottom:8px;padding:6px 8px;border:2px solid var(--border);}
.chat-msg.me{background:var(--accent);text-align:right;}
.chat-msg.them{background:var(--bg-2);}
.chat-input-row{display:flex;border-top:3px solid var(--border);}
.chat-input-row input{border:none;flex:1;}
.chat-input-row button{box-shadow:none;border:none;border-left:3px solid var(--border);}

/* Footer */
footer{
  text-align:center;padding:30px 20px;border-top:4px solid var(--border);
  font-size:14px;color:var(--muted);margin-top:40px;
}

.empty-msg{color:var(--muted);text-align:center;padding:20px;font-size:16px;}
.loading{text-align:center;padding:20px;font-size:14px;color:var(--muted);font-family:'Press Start 2P';}

.tag{
  display:inline-block;background:var(--bg);border:2px solid var(--border);
  font-size:12px;padding:3px 8px;margin-right:6px;
}

.upload-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

.small-note{font-size:13px;color:var(--muted);}

.admin-badge{
  background:var(--success);color:#1a1a1a;font-size:10px;
  font-family:'Press Start 2P';padding:4px 8px;border:2px solid var(--border);
}

.list-item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:2px solid var(--border);padding:8px;margin-bottom:8px;background:var(--bg);
}