/* ═══════════════════════════════════════════════
   NARRY.NEOCITIES — SHARED STYLES
   Galaxy Chat / Frutiger Aero — Verde Espacial
═══════════════════════════════════════════════ */

:root {
  --green-bright: #4dff4d;
  --green-main:   #22cc22;
  --green-dark:   #0a7a0a;
  --green-darker: #064d06;
  --green-glow:   #00ff44;
  --bg-dark:      #04060a;
  --bg-panel:     #0d120d;
  --text-white:   #f0f0f0;
  --gold:         #ffd700;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background-color: var(--bg-dark);
  font-family: 'Tahoma','Verdana',sans-serif;
  font-size: 11px;
  color: var(--text-white);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── SPACE ELEMENTS ── */
#space-canvas { position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0; }
#starfield    { position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden; }

.star { position:absolute;border-radius:50%;animation:twinkle ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:0.15;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.4)} }

.shooting-star { position:absolute;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.9) 40%,white);transform-origin:left center;animation:shootDiag linear forwards;border-radius:1px;pointer-events:none; }
@keyframes shootDiag { 0%{width:0;opacity:0;transform:rotate(var(--angle)) translateX(0)} 10%{opacity:1} 60%{width:120px;opacity:0.9} 100%{width:180px;opacity:0;transform:rotate(var(--angle)) translateX(var(--dist))} }

.planet { position:absolute;border-radius:50%;pointer-events:none;animation:planetFloat ease-in-out infinite; }
@keyframes planetFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.spaceship { position:absolute;pointer-events:none;animation:flyShip linear forwards;filter:drop-shadow(0 0 6px rgba(0,255,200,0.6)); }
@keyframes flyShip { 0%{opacity:0} 5%{opacity:1} 95%{opacity:1} 100%{transform:translateX(var(--ship-dist)) translateY(var(--ship-dy));opacity:0} }

.galaxy-obj { position:absolute;border-radius:50%;pointer-events:none;animation:galaxySpin linear infinite,galaxyPulse ease-in-out infinite; }
@keyframes galaxySpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes galaxyPulse { 0%,100%{opacity:0.25} 50%{opacity:0.5} }

/* ── WRAPPER ── */
#wrapper { position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:10px; }

/* ── HEADER ── */
#header { text-align:center;padding:16px 8px 10px; }
#header h1 { font-size:28px;font-weight:900;color:var(--green-bright);text-shadow:0 0 10px var(--green-glow),0 0 25px rgba(0,255,68,0.5),0 2px 4px rgba(0,0,0,0.9);letter-spacing:3px;text-transform:uppercase; }
#header .subtitle { font-size:10px;color:#88cc88;letter-spacing:2px;margin-top:3px;text-transform:uppercase; }
#header .page-title { font-size:18px;font-weight:900;color:var(--green-bright);text-shadow:0 0 10px var(--green-glow);letter-spacing:2px;text-transform:uppercase;margin-top:4px; }

/* ── NAVBAR ── */
#navbar { display:flex;gap:2px;flex-wrap:wrap;justify-content:center;padding:6px;background:linear-gradient(180deg,#1a2a1a,#0d1a0d);border:1px solid var(--green-darker);border-radius:6px;margin-bottom:8px; }
.nav-btn { background:linear-gradient(180deg,#4dcc4d 0%,#2aaa2a 40%,#177717 70%,#0d550d 100%);border:1px solid #0a440a;border-radius:4px;color:#fff;font-family:'Tahoma',sans-serif;font-size:10px;font-weight:bold;padding:4px 10px;cursor:pointer;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,0.7);box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 2px 4px rgba(0,0,0,0.5);transition:all 0.1s;position:relative;overflow:hidden; }
.nav-btn::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,0.2),transparent); }
.nav-btn:hover { background:linear-gradient(180deg,#66ff66 0%,#44cc44 40%,#22991f 70%,#156615 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),0 0 8px rgba(0,255,0,0.4); }
.nav-btn.active { background:linear-gradient(180deg,#88ff88 0%,#55dd55 40%,#33aa30 70%,#1a771a 100%);box-shadow:0 0 10px rgba(0,255,0,0.5); }

/* ── GALAXY PANEL ── */
.galaxy-panel { border:1px solid var(--green-dark);border-radius:8px;overflow:hidden;background:var(--bg-panel);box-shadow:0 0 0 1px rgba(77,255,77,0.1),0 4px 20px rgba(0,0,0,0.8),inset 0 1px 0 rgba(77,255,77,0.05);margin-bottom:8px; }
.galaxy-panel-title { background:linear-gradient(180deg,#5fff5f 0%,#3dcc3d 25%,#22aa22 60%,#0d660d 100%);padding:4px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--green-darker);position:relative;overflow:hidden; }
.galaxy-panel-title::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,0.25),transparent);pointer-events:none; }
.galaxy-panel-title span { font-size:11px;font-weight:bold;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.8),0 0 6px rgba(0,255,0,0.4);letter-spacing:0.5px; }
.galaxy-panel-body { padding:8px; }

/* ── PANEL DOTS ── */
.panel-dots { display:flex;gap:3px; }
.panel-dot { width:8px;height:8px;border-radius:50%;border:1px solid rgba(0,0,0,0.4); }
.panel-dot.red    { background:radial-gradient(circle at 35% 35%,#ff6b6b,#cc0000); }
.panel-dot.yellow { background:radial-gradient(circle at 35% 35%,#ffe066,#cc9900); }
.panel-dot.green  { background:radial-gradient(circle at 35% 35%,#66ff66,#009900); }

/* ── BUTTONS ── */
.link-btn { display:inline-block;background:linear-gradient(180deg,#2a6a2a,#155515);border:1px solid #0d440d;border-radius:3px;color:#aaffaa;font-size:9px;padding:2px 8px;text-decoration:none;margin-top:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);cursor:pointer;transition:all 0.1s; }
.link-btn:hover { background:linear-gradient(180deg,#3d8a3d,#1f6b1f);color:#fff;box-shadow:0 0 5px rgba(0,180,0,0.3); }

.action-btn { background:linear-gradient(180deg,#3daa3d,#1a661a);border:1px solid #0d440d;border-radius:4px;color:#fff;font-size:10px;font-weight:bold;padding:5px 12px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);transition:all 0.1s; }
.action-btn:hover { background:linear-gradient(180deg,#55cc55,#22881f);box-shadow:0 0 8px rgba(0,200,0,0.3); }

/* ── DIVIDER ── */
.divider { height:1px;background:linear-gradient(90deg,transparent,var(--green-dark),transparent);margin:6px 0; }

/* ── ONLINE BADGE ── */
.online-badge { display:inline-flex;align-items:center;gap:4px;background:rgba(0,80,0,0.4);border:1px solid var(--green-dark);border-radius:10px;padding:2px 7px;font-size:9px;color:var(--green-bright); }
.status-dot { width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#66ff66,#00aa00);box-shadow:0 0 4px #00ff00;flex-shrink:0; }

/* ── TOP3 GRID ── */
.top3-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:4px; }
.top3-item { background:linear-gradient(180deg,#1a2a1a,#0d1a0d);border:1px solid var(--green-darker);border-radius:4px;padding:6px 4px;text-align:center;cursor:pointer;transition:all 0.2s; }
.top3-item:hover { border-color:var(--green-main);box-shadow:0 0 8px rgba(0,200,0,0.2); }
.top3-medal { font-size:14px;margin-bottom:2px; }
.top3-thumb { width:100%;aspect-ratio:1;background:#0a140a;border-radius:3px;margin-bottom:4px;display:flex;align-items:center;justify-content:center;font-size:20px;border:1px solid #1a3a1a;overflow:hidden;background-size:cover;background-position:center; }
.top3-name { font-size:9px;color:#ccffcc;font-weight:bold;line-height:1.3; }
.top3-rank { font-size:8px;color:var(--green-main); }

/* ── BADGE ── */
.badge-bar { display:flex;flex-wrap:wrap;gap:4px;padding:4px 0; }
.badge { background:linear-gradient(180deg,#2a4a2a,#1a2a1a);border:1px solid #336633;border-radius:3px;padding:2px 6px;font-size:9px;color:#88cc88; }

/* ── FOOTER ── */
#footer { text-align:center;padding:10px;font-size:9px;color:#336633;border-top:1px solid #0d2a0d;margin-top:10px;letter-spacing:1px; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:6px;height:6px; }
::-webkit-scrollbar-track { background:#0a140a; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#2a7a2a,#154d15);border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#3d9a3d; }

/* ── GALLERY PAGE ── */
.gallery-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px; }
.gallery-item { background:#0a140a;border:1px solid var(--green-darker);border-radius:5px;overflow:hidden;cursor:pointer;transition:all 0.2s;position:relative; }
.gallery-item:hover { border-color:var(--green-main);box-shadow:0 0 12px rgba(0,200,0,0.3);transform:translateY(-2px); }
.gallery-item img { width:100%;aspect-ratio:1;object-fit:cover;display:block; }
.gallery-item-info { padding:4px 6px; }
.gallery-item-title { font-size:10px;color:#ccffcc;font-weight:bold; }
.gallery-item-date { font-size:9px;color:#4a7a4a; }

/* Lightbox */
#lightbox { display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92);z-index:1000;align-items:center;justify-content:center;flex-direction:column; }
#lightbox.open { display:flex; }
#lightbox img { max-width:90vw;max-height:80vh;border:2px solid var(--green-dark);border-radius:4px;box-shadow:0 0 30px rgba(0,255,0,0.2); }
#lightbox-info { margin-top:12px;text-align:center; }
#lightbox-title { font-size:14px;color:var(--green-bright);font-weight:bold; }
#lightbox-desc { font-size:11px;color:#99bb99;margin-top:4px; }
#lightbox-close { position:absolute;top:16px;right:20px;font-size:24px;color:#aaa;cursor:pointer;background:none;border:none; }
#lightbox-close:hover { color:#fff; }

/* ── BLOG PAGE ── */
.blog-post { border:1px solid var(--green-darker);border-radius:6px;background:#0a120a;padding:12px;margin-bottom:10px; }
.blog-post-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.blog-post-title { font-size:14px;font-weight:bold;color:var(--green-bright); }
.blog-post-date { font-size:9px;color:#4a7a4a; }
.blog-post-body { font-size:11px;color:#bbddbb;line-height:1.8; }
.blog-post-tags { margin-top:8px;display:flex;gap:4px;flex-wrap:wrap; }
.blog-tag { background:rgba(0,80,0,0.3);border:1px solid var(--green-darker);border-radius:10px;padding:1px 7px;font-size:9px;color:#88cc88; }

/* ── AQUARIO ── */
#aquario-canvas { width:100%;height:400px;background:linear-gradient(180deg,#001830 0%,#002a50 40%,#003060 100%);border-radius:6px;border:2px solid #1a5a8a;box-shadow:inset 0 0 40px rgba(0,80,150,0.4),0 0 20px rgba(0,100,200,0.2);position:relative;overflow:hidden;cursor:crosshair; }

/* ── CHATBOX ── */
.chat-msg { display:flex;gap:8px;padding:6px 0;border-bottom:1px solid rgba(0,60,0,0.3); }
.chat-avatar { font-size:20px;flex-shrink:0; }
.chat-content { flex:1; }
.chat-name { font-size:10px;font-weight:bold;color:var(--green-bright); }
.chat-date { font-size:9px;color:#4a7a4a;margin-left:6px; }
.chat-text { font-size:11px;color:#ccddcc;margin-top:2px;line-height:1.5; }
.chat-input-area { background:#0a140a;border:1px solid var(--green-darker);border-radius:5px;padding:8px;margin-top:8px; }
.chat-input { width:100%;background:#050d05;border:1px solid var(--green-dark);border-radius:3px;color:#ccffcc;font-size:11px;padding:5px 8px;outline:none;font-family:'Tahoma',sans-serif; }
.chat-input:focus { border-color:var(--green-main);box-shadow:0 0 6px rgba(0,200,0,0.2); }

/* ── VISITANTES ── */
#galaxy-room { width:100%;height:300px;background:linear-gradient(180deg,#050a05 0%,#0a1a0a 70%,#0d220d 100%);border-radius:6px;border:1px solid var(--green-darker);position:relative;overflow:hidden; }
.room-floor { position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(180deg,rgba(0,150,0,0.05),rgba(0,100,0,0.2));border-top:1px solid rgba(0,200,0,0.15); }
.room-avatar { position:absolute;bottom:40px;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:left 0.5s; }
.room-avatar-sprite { font-size:32px;filter:drop-shadow(0 0 4px rgba(0,255,0,0.3));animation:avatarBob 2s ease-in-out infinite; }
@keyframes avatarBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.room-avatar-name { font-size:8px;color:#aaffaa;background:rgba(0,0,0,0.6);padding:1px 4px;border-radius:2px;white-space:nowrap; }

/* ── RECOMENDACOES ── */
.rec-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;margin-top:6px; }
.rec-item { background:linear-gradient(180deg,#0d1a0d,#080f08);border:1px solid var(--green-darker);border-radius:5px;padding:6px;text-align:center;transition:all 0.2s;cursor:default; }
.rec-item:hover { border-color:var(--green-main);box-shadow:0 0 8px rgba(0,180,0,0.2); }
.rec-item-thumb { width:100%;aspect-ratio:2/3;background:#0a140a;border-radius:3px;margin-bottom:5px;object-fit:cover;display:block;font-size:28px;display:flex;align-items:center;justify-content:center;border:1px solid #1a3a1a; }
.rec-item-thumb img { width:100%;height:100%;object-fit:cover;border-radius:3px; }
.rec-item-name { font-size:9px;color:#ccffcc;font-weight:bold;line-height:1.3; }
.rec-item-sub { font-size:8px;color:#557755; }

/* ── SOBRE MIM ── */
.sobre-grid { display:grid;grid-template-columns:280px 1fr;gap:10px; }
.sobre-photo { width:100%;border:2px solid var(--green-dark);border-radius:4px;display:block; }
.sobre-section-title { font-size:11px;color:var(--green-bright);font-weight:bold;text-transform:uppercase;letter-spacing:1px;margin:10px 0 5px;border-bottom:1px solid var(--green-darker);padding-bottom:3px; }
.sobre-text { font-size:11px;color:#bbddbb;line-height:1.9; }

/* ── STATUS PAGE ── */
.status-card { background:linear-gradient(180deg,#0d1a0d,#080f08);border:1px solid var(--green-darker);border-radius:6px;padding:10px;margin-bottom:8px; }
.status-row { display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(0,60,0,0.3); }
.status-icon { font-size:16px;flex-shrink:0;width:22px;text-align:center; }
.status-key { color:var(--green-bright);font-size:10px;font-weight:bold;min-width:80px; }
.status-val { color:#ddeedd;font-size:11px; }