/* =====================================================
   RETRO BLOG (purple/Y2K) — style.css
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');

:root {
  --bg: #e8c8f8;
  --panel: #f0e0ff;
  --panel2: #f8f0ff;
  --border: #b080e0;
  --border2: #8050c0;
  --accent: #c080f8;
  --pink: #f8b0d8;
  --pink2: #e880b8;
  --blue: #a0c8f8;
  --blue2: #6090e0;
  --green-btn: #a8e090;
  --green2: #60a040;
  --yellow: #f8e870;
  --text-dark: #2a0a4a;
  --text-mid: #5a2a8a;
  --text-light: #8a60b0;
  --white: #ffffff;
  --shadow: #7040a0;
  --nav-top: #c890f8;
  --nav-bot: #9050d8;
}

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

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 20% 20%,#e0c0ff 0%,transparent 60%),
    radial-gradient(ellipse at 80% 80%,#c0d8ff 0%,transparent 60%),
    radial-gradient(ellipse at 50% 50%,#f8d0ff 0%,transparent 80%),
    #d8b8f8;
  background-attachment: fixed;
  font-family: 'VT323', monospace;
  padding: 16px;
  position: relative;
  overflow-x: hidden;
}

body::before { content:'';position:fixed;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.25) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;z-index:0; }

.cloud { position:fixed;font-size:48px;opacity:.12;pointer-events:none;z-index:0;animation:cloudFloat 20s ease-in-out infinite; }
.cloud:nth-child(1){top:5%;left:-5%;animation-delay:0s}
.cloud:nth-child(2){top:30%;right:-3%;animation-delay:7s;animation-direction:reverse}
.cloud:nth-child(3){bottom:15%;left:10%;animation-delay:14s}
@keyframes cloudFloat { 0%,100%{transform:translateX(0) translateY(0)} 50%{transform:translateX(20px) translateY(-10px)} }

.site-wrap { max-width:900px;margin:0 auto;position:relative;z-index:10;display:flex;flex-direction:column;gap:10px; }

/* ======== HEADER ======== */
.site-header { background:linear-gradient(180deg,#d8a0f8 0%,#b060e0 50%,#9040d0 100%);border:3px solid var(--border2);border-radius:12px 12px 0 0;box-shadow:0 0 0 2px rgba(255,255,255,.4),4px 4px 0 var(--shadow);overflow:hidden;position:relative; }

.site-titlebar { background:linear-gradient(180deg,#c080f8,#9040d8 40%,#7030c0);padding:5px 10px;display:flex;align-items:center;gap:8px;border-bottom:2px solid var(--border2); }
.tb-dots { display:flex;gap:5px; }
.tb-dot { width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.25); }
.tb-dot.r { background:radial-gradient(circle at 35% 35%,#ffa0a0,#e03030); }
.tb-dot.y { background:radial-gradient(circle at 35% 35%,#ffe090,#e0b020); }
.tb-dot.g { background:radial-gradient(circle at 35% 35%,#a0f0a0,#30b030); }
.tb-title { flex:1;text-align:center;font-family:'Press Start 2P',monospace;font-size:8px;color:rgba(255,255,255,.9);text-shadow:1px 1px 0 rgba(0,0,0,.3);letter-spacing:2px; }
.tb-url { font-size:12px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.15);padding:2px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.25); }

.header-content { padding:20px 24px 16px;display:flex;align-items:center;gap:20px;position:relative; }
.header-mascot { font-size:64px;filter:drop-shadow(2px 4px 8px rgba(80,0,120,.4));animation:mascotBounce 2s ease-in-out infinite;flex-shrink:0; }
.header-mascot .icon-img { width:64px;height:64px;object-fit:contain;display:block; }
.header-mascot .icon-fallback { font-size:64px;display:none; }
@keyframes mascotBounce { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-8px) rotate(3deg)} }

.header-text { flex:1; }
.header-sitename { font-family:'Press Start 2P',monospace;font-size:18px;color:#fff;text-shadow:3px 3px 0 rgba(80,0,120,.5),1px 1px 0 rgba(0,0,0,.3);letter-spacing:2px;margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.header-sitename .star-deco { font-size:14px;animation:spinStar 4s linear infinite; }
@keyframes spinStar { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.header-desc { font-size:18px;color:rgba(255,255,255,.85);line-height:1.3;margin-bottom:10px; }
.header-badges { display:flex;flex-wrap:wrap;gap:4px; }
.badge { font-family:'Press Start 2P',monospace;font-size:6px;padding:3px 6px;border-radius:3px;border:1px solid rgba(255,255,255,.3);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.3); }
.badge.b1{background:#e03060}.badge.b2{background:#3080e0}.badge.b3{background:#30a050}.badge.b4{background:#d06020}.badge.b5{background:#8030d0}

.nav-bar { background:linear-gradient(180deg,#b060e8 0%,#8030c0 100%);border-top:2px solid rgba(255,255,255,.2);padding:8px 24px;display:flex;gap:6px;align-items:center;flex-wrap:wrap; }
.nav-label { font-size:13px;color:rgba(255,255,255,.6);margin-right:4px; }
.nav-btn { font-family:'Press Start 2P',monospace;font-size:7px;padding:6px 5px 5px 8px;border-radius:5px;border:2px solid rgba(255,255,255,.3);background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.08));color:#fff;cursor:pointer;text-decoration:none;text-shadow:1px 1px 0 rgba(0,0,0,.3);box-shadow:0 2px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3);transition:all .1s;letter-spacing:1px; }
.nav-btn:hover { background:rgba(255,255,255,.3);transform:translateY(-1px); }
.nav-btn.active { background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.6); }
.nav-sep { color:rgba(255,255,255,.3);font-size:16px; }

/* Two col */
.two-col { display:grid;grid-template-columns:1fr 280px;gap:10px;align-items:start; }

/* ======== PANELS ======== */
.panel { background:linear-gradient(135deg,var(--panel),var(--panel2) 60%,#fff8);border:2px solid var(--border);border-radius:8px;box-shadow:3px 3px 0 var(--shadow),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden; }
.panel-header { background:linear-gradient(180deg,var(--nav-top) 0%,var(--nav-bot) 100%);padding:5px 12px;display:flex;align-items:center;gap:8px;border-bottom:2px solid var(--border2); }
.panel-icon { font-size:14px; }
.panel-title { font-family:'Press Start 2P',monospace;font-size:8px;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.3);flex:1; }

/* Tabs */
.tab-pane { display:none; }
.tab-pane.active { display:flex;flex-direction:column;gap:10px; }

/* Main col */
.main-col { display:flex;flex-direction:column;gap:10px; }

/* Posts */
.post-body { padding:12px 14px; }
.post-meta { display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap; }
.post-date { font-family:'Press Start 2P',monospace;font-size:7px;color:var(--text-light);background:rgba(180,120,255,.15);padding:2px 6px;border-radius:4px;border:1px solid var(--border); }
.post-cat { font-size:9px;padding:1px 10px 3px 4px;border-radius:10px;border:1px solid; }
.post-cat.art    { background:var(--pink);border-color:var(--pink2);color:#800040; }
.post-cat.life   { background:var(--blue);border-color:var(--blue2);color:#002080; }
.post-cat.gaming { background:var(--green-btn);border-color:var(--green2);color:#004020; }
.post-cat.music  { background:var(--yellow);border-color:#c8a020;color:#604000; }

/* Post image */
.post-img { width:100%;height:100px;border-radius:5px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:8px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.post-img::after { content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);pointer-events:none; }
.pi-1 { background:linear-gradient(135deg,var(--pink) 0%,var(--blue) 50%,var(--accent) 100%); }
.pi-2 { background:linear-gradient(135deg,#d8c8ff 0%,#b0d8ff 50%,#d0c8f8 100%); }
.pi-3 { background:linear-gradient(135deg,#f8d8e8 0%,#f0c870 50%,#e8c0f8 100%); }
.post-img .icon-img { width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1; }
.post-img .icon-fallback { font-size:36px;display:none;position:relative;z-index:1; }

.post-title-el { font-family:'Press Start 2P',monospace;font-size:9px;color:var(--text-dark);text-shadow:1px 1px 0 rgba(255,255,255,.6);letter-spacing:1px;margin-bottom:8px;line-height:1.5; }
.post-title-el a { color:inherit;text-decoration:none; }
.post-title-el a:hover { color:var(--border2); }
.post-excerpt { font-size:15px;color:var(--text-mid);line-height:1.4;margin-bottom:8px; }
.post-footer { display:flex;justify-content:space-between;align-items:center; }

/* Retro button */
.retro-btn { font-family:'Press Start 2P',monospace;font-size:5.3px;padding:6px 10px 4px;background:linear-gradient(180deg,var(--nav-top),var(--nav-bot));color:#fff;border:1px solid var(--border2);border-radius:5px;cursor:pointer;text-shadow:1px 1px 0 rgba(0,0,0,.3);box-shadow:0 2px 0 var(--shadow),inset 0 1px 0 rgba(255,255,255,.3);text-decoration:none;transition:all .1s;letter-spacing:1px;display:inline-block;position:relative;overflow:hidden; }
.retro-btn::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent); }
.retro-btn:hover { transform:translateY(-1px);filter:brightness(1.1); }
.post-likes { font-size:14px;color:var(--text-light); }

/* Pagination */
.pagination { display:flex;justify-content:center;gap:6px;padding:10px; }
.page-btn { font-family:'Press Start 2P',monospace;font-size:4.5px;padding:7px 6px 5px;border-radius:5px;cursor:pointer;text-decoration:none;transition:all .1s;border:1px solid var(--border);box-shadow:1px 1px 0 var(--shadow); }
.page-btn.active { background:linear-gradient(180deg,var(--nav-top),var(--nav-bot));color:#fff;border-color:var(--border2); }
.page-btn:not(.active) { background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(200,160,255,.1));color:var(--text-mid); }
.page-btn:hover:not(.active) { background:rgba(255,255,255,.8); }

/* ======== ABOUT TAB ======== */
.about-banner { width:100%;height:100px;border-radius:6px;border:1px solid var(--border);margin-bottom:10px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--pink),var(--accent) 50%,var(--blue)); }
.about-banner::after { content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);pointer-events:none; }
.about-banner .icon-img { width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1; }
.about-banner .icon-fallback { font-size:48px;display:none;position:relative;z-index:1; }
.about-text-block { font-size:16px;color:var(--text-mid);line-height:1.6;margin-bottom:10px; }
.about-facts-list { list-style:none;display:flex;flex-direction:column;gap:4px; }
.about-facts-list li { font-size:15px;color:var(--text-mid);padding:4px 8px;background:rgba(255,255,255,.4);border:1px solid var(--border);border-radius:5px;display:flex;align-items:center;gap:7px; }
.af-orb { width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.15); }

/* ======== ART TAB ======== */
.art-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.art-item { aspect-ratio:1;border-radius:6px;border:2px solid var(--border);box-shadow:2px 2px 0 var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--pink),var(--panel)); }
.art-item:nth-child(2){background:linear-gradient(135deg,var(--blue),var(--panel))}
.art-item:nth-child(3){background:linear-gradient(135deg,var(--accent),var(--panel))}
.art-item:nth-child(4){background:linear-gradient(135deg,var(--yellow),var(--panel))}
.art-item:nth-child(5){background:linear-gradient(135deg,var(--green-btn),var(--panel))}
.art-item:nth-child(6){background:linear-gradient(135deg,var(--pink),var(--blue))}
.art-item::before { content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.4),transparent);pointer-events:none;z-index:2; }
.art-item:hover { transform:scale(1.05);box-shadow:3px 3px 0 var(--border2); }
.art-item .icon-img { width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1; }
.art-item .icon-fallback { font-size:26px;display:none;position:relative;z-index:1; }

/* ======== DIARY TAB ======== */
.diary-thumb { width:100%;height:80px;border-radius:5px;border:1px solid var(--border);margin-bottom:8px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
.diary-thumb .icon-img { width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1; }
.diary-thumb .icon-fallback { font-size:28px;display:none;position:relative;z-index:1; }
.dt-pink { background:linear-gradient(135deg,#ffd8f0,#f8c8e8); }
.dt-blue { background:linear-gradient(135deg,#d8e8ff,#c8d8f8); }

/* ======== LINKS TAB ======== */
.rb-link-row { display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,.4);border:1px solid var(--border);border-radius:6px;text-decoration:none;transition:all .1s;box-shadow:1px 1px 0 var(--shadow); }
.rb-link-row:hover { background:rgba(255,255,255,.7);transform:translateX(2px); }
.rb-link-orb { width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.5);box-shadow:0 2px 4px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.4);position:relative;overflow:hidden; }
.rb-link-orb .icon-img { width:16px;height:16px;object-fit:contain;display:block;position:relative;z-index:1; }
.rb-link-orb .icon-fallback { font-size:13px;display:none;position:relative;z-index:1; }
.rb-lk-name  { font-family:'Press Start 2P',monospace;font-size:8px;color:var(--text-dark);letter-spacing:1px;margin-bottom:2px; }
.rb-lk-sub   { font-size:13px;color:var(--text-light); }
.rb-lk-arrow { font-size:13px;color:var(--text-light); }

/* ======== SIDEBAR ======== */
.sidebar { display:flex;flex-direction:column;gap:10px; }

/* Profile */
.pw-avatar { width:72px;height:72px;margin:0 auto 8px;background:linear-gradient(135deg,var(--pink),var(--accent));border-radius:10px;border:3px solid var(--border2);box-shadow:2px 2px 0 var(--shadow),inset 0 1px 0 rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
.pw-avatar::after { content:'';position:absolute;top:3px;left:3px;right:3px;height:35%;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);border-radius:6px 6px 50% 50%;pointer-events:none; }
.pw-avatar .icon-img { width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;position:relative;z-index:1; }
.pw-avatar .icon-fallback { font-size:36px;display:none;position:relative;z-index:1; }
.pw-name { font-family:'Press Start 2P',monospace;font-size:9px;color:var(--text-dark);text-shadow:1px 1px 0 rgba(255,255,255,.6);margin-bottom:4px;letter-spacing:1px; }
.pw-sub  { font-size:14px;color:var(--text-mid);margin-bottom:10px; }
.pw-social { display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:8px; }
.pw-soc-btn { padding:3px 8px;border-radius:6px;font-size:13px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(180,120,255,.1));color:var(--text-mid);cursor:pointer;text-decoration:none;box-shadow:1px 1px 0 var(--border);transition:all .1s;display:flex;align-items:center;gap:3px;position:relative;overflow:hidden; }
.pw-soc-btn::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent); }
.pw-soc-btn:hover { transform:translateY(-1px);background:rgba(255,255,255,.8); }
.pw-soc-btn .icon-img { width:14px;height:14px;object-fit:contain;display:block;position:relative;z-index:1; }
.pw-soc-btn .icon-fallback { font-size:13px;display:none;position:relative;z-index:1; }

.panel-body { padding:10px 12px; }
.about-desc { font-size:15px;color:var(--text-mid);line-height:1.5;margin-bottom:8px; }
.about-list-sb { list-style:none;display:flex;flex-direction:column;gap:2px; }
.about-list-sb li { font-size:14px;color:var(--text-mid);padding:2px 0;display:flex;align-items:center;gap:6px;border-bottom:1px dashed var(--border); }
.about-list-sb li:last-child { border:none; }

/* ======== MINI PLAYER ======== */
.player-body { padding:10px 12px;position:relative; }
#sc-player-rb { width:1px;height:1px;position:absolute;opacity:0;pointer-events:none;border:none; }
.rb-track { font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px; }
.rb-track.scrolling { animation:rbScroll 8s linear infinite; }
@keyframes rbScroll { 0%,15%{text-indent:0} 85%,100%{text-indent:-80px} }
.rb-artist { font-size:12px;margin-bottom:7px; }
.rb-controls { display:flex;align-items:center;gap:6px; }
.rb-disc { width:22px;height:22px;border-radius:50%;flex-shrink:0;cursor:pointer;box-shadow:0 1px 4px rgba(180,100,255,.5);position:relative;
  background:
    radial-gradient(circle at 50% 50%,#f8e0ff 0%,#f8e0ff 14%,transparent 14%),
    radial-gradient(circle at 50% 50%,transparent 24%,rgba(255,255,255,.5) 26%,transparent 29%),
    conic-gradient(from 0deg,rgba(240,180,255,.9),rgba(180,140,255,.8),rgba(220,180,255,.9),rgba(160,180,255,.8),rgba(240,160,255,.9),rgba(200,180,255,.8),rgba(240,180,255,.9));
  border:1px solid rgba(255,255,255,.5);
}
.rb-disc::before { content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.45) 0%,transparent 55%);pointer-events:none; }
.rb-disc::after { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5px;height:5px;background:#f0e0ff;border-radius:50%;border:1px solid rgba(180,120,240,.5); }
.rb-disc.spinning { animation:rbSpin 3s linear infinite; }
@keyframes rbSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.rb-btn { font-family:'Press Start 2P',monospace;font-size:8px;padding:3px 7px;background:linear-gradient(180deg,rgba(200,140,255,.6),rgba(140,80,220,.8));border:1px solid rgba(200,140,255,.4);color:#f0d0ff;border-radius:4px;cursor:pointer;box-shadow:0 2px 4px rgba(100,0,180,.3),inset 0 1px 0 rgba(255,255,255,.2);transition:all .1s;position:relative;overflow:hidden;flex-shrink:0; }
.rb-btn::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent); }
.rb-btn:hover { filter:brightness(1.15);transform:scale(1.05); }
.rb-bars { display:flex;align-items:flex-end;gap:2px;height:14px;margin-left:2px; }
.rb-bar { width:2px;height:3px;background:linear-gradient(180deg,rgba(200,140,255,.9),rgba(140,80,220,.7));border-radius:1px; }
.rb-bars.active .rb-bar { animation:rbBar .5s ease-in-out infinite alternate; }
.rb-bars.active .rb-bar:nth-child(1){animation-delay:0s}
.rb-bars.active .rb-bar:nth-child(2){animation-delay:.08s}
.rb-bars.active .rb-bar:nth-child(3){animation-delay:.16s}
.rb-bars.active .rb-bar:nth-child(4){animation-delay:.04s}
@keyframes rbBar { from{height:2px} to{height:12px} }

/* Categories */
.cat-list { display:flex;flex-direction:column;gap:5px; }
.cat-item { display:flex;align-items:center;gap:8px;padding:5px 8px;background:rgba(255,255,255,.4);border:1px solid var(--border);border-radius:5px;cursor:pointer;transition:all .1s;text-decoration:none; }
.cat-item:hover { background:rgba(255,255,255,.7);transform:translateX(2px); }
.cat-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.cat-name { font-size:14px;color:var(--text-dark);flex:1; }
.cat-count { font-family:'Press Start 2P',monospace;font-size:7px;color:var(--text-light);background:rgba(180,120,255,.15);padding:2px 5px;border-radius:4px;border:1px solid var(--border); }

/* Recent */
.recent-list { list-style:none; }
.recent-item { padding:6px 0;border-bottom:1px dashed var(--border);display:flex;align-items:center;gap:8px; }
.recent-item:last-child { border-bottom:none; }
.recent-icon { font-size:14px; }
.recent-info { flex:1; }
.recent-title-el { font-family:'Press Start 2P',monospace;font-size:7px;color:var(--text-dark);display:block;line-height:1.4;margin-bottom:2px; }
.recent-date { font-size:12px;color:var(--text-light); }

/* Counter */
.counter-wrap { text-align:center;padding:10px 12px; }
.counter-num { font-family:'Press Start 2P',monospace;font-size:20px;color:var(--text-dark);text-shadow:0 0 10px rgba(160,80,255,.5);background:linear-gradient(135deg,rgba(0,0,0,.05),rgba(0,0,0,.02));border:2px solid var(--border);border-radius:6px;padding:10px;letter-spacing:4px;box-shadow:inset 2px 2px 4px rgba(0,0,0,.1);margin-bottom:6px;display:block; }
.counter-label { font-size:13px;color:var(--text-light); }

/* Tags */
.tag-cloud { display:flex;flex-wrap:wrap;gap:5px; }
.tag-pill { font-size:13px;padding:2px 8px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(180,120,255,.1));border:1px solid var(--border);color:var(--text-mid);cursor:pointer;transition:all .1s;text-decoration:none; }
.tag-pill:hover { background:rgba(255,255,255,.8);transform:scale(1.05); }

/* ======== FOOTER ======== */
.site-footer { background:linear-gradient(180deg,#c080f8,#8030d0);border:2px solid var(--border2);border-radius:0 0 8px 8px;padding:10px 20px;box-shadow:0 0 0 2px rgba(255,255,255,.2),3px 3px 0 var(--shadow);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;position:relative;overflow:hidden; }
.site-footer::before { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent); }
.footer-copy { font-family:'Press Start 2P',monospace;font-size:7px;color:rgba(255,255,255,.8);text-shadow:1px 1px 0 rgba(0,0,0,.3);letter-spacing:1px;position:relative; }

@keyframes footerPop { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.footer-made { font-size:13px;color:rgba(255,255,255,.7);position:relative; }

::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--panel); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--nav-top),var(--nav-bot));border-radius:5px;border:1px solid var(--border2); }

@media (max-width:640px) {
  .two-col { grid-template-columns:1fr; }
}

/* En style.css — ajusta el margin-right para acercarla */
.header-img-right {
  flex-shrink: 0;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px; /* ← añade esto, sube el número para más espacio */
}
.header-img-right .icon-img {
  width: 90px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(2px 4px 8px rgba(80,0,120,.4));
}
.header-img-right .icon-fallback {
  font-size: 64px;
  display: none;
}

/* ======== IMAGE LIGHTBOX ======== */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  cursor: pointer;
  animation: lbFadeIn .2s ease;
}
.lightbox-overlay.open { display: flex; }
@keyframes lbFadeIn { from{opacity:0} to{opacity:1} }

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  animation: lbPop .25s cubic-bezier(.34,1.56,.64,1);
  cursor: default;
}
@keyframes lbPop { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }

.lightbox-close {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 28px;
  color: white;
  cursor: pointer;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: transform .15s;
}
.lightbox-close:hover { transform: scale(1.2); }

@media (max-width: 640px) {
  .two-col { grid-template-columns: 1fr; }

  /* Title + stars on one line */
  .header-sitename {
    font-size: 11px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Nav centered */
  .nav-bar {
    justify-content: center;
    padding: 8px 12px;
  }

  /* Hide right image on very small screens if needed */
  .header-img-right { display: none; }
}

/* ======== MARQUEES ======== */
.header-marquee {
  background: rgba(0,0,0,.15);
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding: 4px 0;
  font-family: 'MS Gothic', monospace;
  font-size: 8px;
  color: rgba(255,255,255,.85);
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}

.sidebar-marquee {
  font-family: 'MS Gothic', monospace;
  margin-top: 8px;
  background: rgba(180,120,255,.12);
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 3px 0;
  font-size: 10px;
  color: var(--text-light);
  margin-bottom: 10px;
} 

/* ======== LIGHTBOX ======== */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.lightbox-overlay.open { display: flex; }
.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 10px;
  border: 3px solid var(--border2);
  box-shadow: 0 8px 40px rgba(80,0,120,.5);
  animation: lbPop .25s cubic-bezier(.34,1.56,.64,1);
  cursor: default;
}
@keyframes lbPop { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }
.lightbox-close {
  position: absolute;
  top: 16px; right: 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: white;
  cursor: pointer;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: transform .15s;
  z-index: 1;
}
.lightbox-close:hover { transform: scale(1.2); color: var(--pink); }