/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}


: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); }