@import url('https://fonts.googleapis.com/css2?family=Tahoma:wght@400;700&display=swap');

:root {
  --xp-desktop:      #3a6ea5;
  --xp-window-bg:    #ece9d8;
  --xp-inner-bg:     #ffffff;
  --xp-border-dark:  #808080;
  --xp-border-tan:   #aca899;
  --xp-inset:        #d4d0c8;
  --xp-highlight:    #316ac5;
  --xp-text:         #000000;
  --xp-text-dim:     #555555;
  --xp-link:         #0000cc;
  --xp-link-visited: #551a8b;
  --font: Tahoma, 'MS Sans Serif', sans-serif;
}

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

html { scroll-behavior: auto; }

/* ---- BODY ---- */
body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='3,1 3,20 8,15 11,22 13,21 10,14 16,14' fill='white' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") 3 1, default;
  background-color: var(--xp-desktop);
  background-image:
    radial-gradient(ellipse at 25% 35%, rgba(255,255,255,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(0,0,80,0.18) 0%, transparent 50%);
  font-family: var(--font);
  font-size: 11px;
  line-height: 1.45;
  min-height: 100vh;
  color: var(--xp-text);
  padding: 12px 12px 48px;
}

a {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8 2 C8 2 6 6 6 11 C6 16 8 19 8 19' stroke='black' stroke-width='2.5' fill='none'/%3E%3Cpath d='M8 2 C8 2 6 6 6 11 C6 16 8 19 8 19' stroke='white' stroke-width='1.2' fill='none'/%3E%3Cellipse cx='10' cy='14' rx='5' ry='6' fill='white' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") 8 2, pointer;
}

/* hide noise/scanline divs */
.noise, .scanlines { display: none; }

/* ---- SHARED WINDOW MIXIN ---- */
.xp-win {
  background: var(--xp-window-bg);
  border: 1px solid #0a246a;
  border-radius: 7px 7px 4px 4px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.7);
  overflow: hidden;
}

/* ---- TOP BAR → IE address window ---- */
.top-bar {
  max-width: 860px;
  margin: 0 auto 0;
  background: var(--xp-window-bg);
  border: 1px solid #0a246a;
  border-radius: 7px 7px 0 0;
  box-shadow: 2px 0 8px rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.7);
  overflow: hidden;
  animation: xpOpen 0.12s ease both;
}

/* fake title bar */
.top-bar::before {
  content: '🌐  nxko — Microsoft Internet Explorer';
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom,
    #5a9ae0 0%, #2060cc 8%, #1850b8 45%,
    #1040a8 50%, #1850b8 52%, #2060cc 75%, #5a9ae0 100%
  );
  color: white;
  font-size: 11px;
  font-weight: bold;
  font-family: var(--font);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.55);
  padding: 5px 8px;
  min-height: 28px;
}

.top-bar-icon { display: none; }

.top-bar-text {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--xp-text-dim);
  border-bottom: 1px solid var(--xp-border-tan);
  background: var(--xp-window-bg);
}

.top-bar-text::before {
  content: 'Address  ';
  color: var(--xp-text-dim);
  flex-shrink: 0;
  font-size: 10px;
}

/* ---- HEADER ---- */
header {
  max-width: 860px;
  margin: 0 auto;
  background: var(--xp-window-bg);
  border: 1px solid #0a246a;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.35), inset 1px 0 0 rgba(255,255,255,0.7);
  overflow: hidden;
  margin-bottom: 10px;
  animation: xpOpen 0.12s 0.04s ease both;
}

/* menu bar */
header::before {
  content: 'File   Edit   View   Favorites   Help';
  display: block;
  background: var(--xp-window-bg);
  border-bottom: 1px solid var(--xp-border-tan);
  padding: 2px 8px;
  font-size: 11px;
  color: var(--xp-text);
}

/* hero area */
.site-title {
  display: block;
  background: linear-gradient(160deg, #1248a0 0%, #2868d0 40%, #4090e8 70%, #60b0f8 100%);
  font-family: var(--font);
  font-size: clamp(3rem, 10vw, 6.5rem);
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2), 0 0 24px rgba(180,220,255,0.4);
  padding: 20px 20px 6px;
  line-height: 1;
}

.site-sub {
  display: block;
  background: linear-gradient(160deg, #1248a0, #2868d0);
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  padding: 2px 20px 4px;
  font-family: var(--font);
}

.site-tagline {
  display: block;
  background: linear-gradient(160deg, #0e3a80, #1a50a8);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  padding: 2px 20px 16px;
  font-family: var(--font);
}

.sys-label {
  background: var(--xp-window-bg);
  border-top: 1px solid var(--xp-border-tan);
  border-bottom: 1px solid var(--xp-border-tan);
  padding: 2px 8px;
  font-size: 10px;
  color: var(--xp-text-dim);
  font-family: var(--font);
}

.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.header-decor {
  padding: 2px 8px;
  font-size: 10px;
  color: var(--xp-text-dim);
  background: var(--xp-window-bg);
  border-top: 1px solid var(--xp-border-tan);
}

/* status bar */
header::after {
  content: 'Done  ·  ⊙ Internet';
  display: block;
  background: var(--xp-window-bg);
  border-top: 1px solid var(--xp-border-tan);
  padding: 2px 8px;
  font-size: 10px;
  color: var(--xp-text-dim);
  font-family: var(--font);
}

/* ---- MAIN ---- */
main {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- BLOCKS → each is an XP window ---- */
.block {
  background: var(--xp-window-bg);
  border: 1px solid #0a246a;
  border-radius: 7px 7px 4px 4px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.38), inset 1px 1px 0 rgba(255,255,255,0.7);
  overflow: hidden;
  animation: xpOpen 0.14s ease both;
}

.block:nth-child(1){animation-delay:0.08s}
.block:nth-child(2){animation-delay:0.14s}
.block:nth-child(3){animation-delay:0.20s}
.block:nth-child(4){animation-delay:0.26s}
.block:nth-child(5){animation-delay:0.32s}

/* title bar from block-label */
.block-label {
  background: linear-gradient(to bottom,
    #5a9ae0 0%, #2060cc 8%, #1850b8 45%,
    #1040a8 50%, #1850b8 52%, #2060cc 75%, #5a9ae0 100%
  );
  color: white;
  font-family: var(--font);
  font-size: 11px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}

#about      .block-label::before { content: '📄 '; }
#interests  .block-label::before { content: '📁 '; }
#creatures  .block-label::before { content: '🐾 '; }
#now-playing .block-label::before { content: '💾 '; }
#links      .block-label::before { content: '🔗 '; }

.block-label::after {
  content: '—   □   ✕';
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.9;
  cursor: default;
}

/* content area */
.block-body,
.interests-grid,
.creatures-row,
.psp-screen,
.links-nav {
  padding: 10px 12px;
  background: var(--xp-window-bg);
}

/* ---- ABOUT ---- */
.block-body p {
  font-size: 11px;
  color: var(--xp-text);
  line-height: 1.65;
  font-family: var(--font);
}

.block-body p + p { margin-top: 6px; }

/* ---- INTERESTS ---- */
.interests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 6px;
}

.interest-card {
  background: var(--xp-inner-bg);
  border: 1px solid;
  border-color: var(--xp-border-dark) var(--xp-inset) var(--xp-inset) var(--xp-border-dark);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: default;
  transition: background 0.1s;
}

.interest-card:hover {
  background: #ddeeff;
  border-color: var(--xp-highlight);
}

.interest-icon { font-size: 15px; margin-bottom: 2px; }

.interest-title {
  font-size: 11px;
  font-weight: bold;
  color: var(--xp-text);
  font-family: var(--font);
}

.interest-sub {
  font-size: 10px;
  color: var(--xp-text-dim);
  font-family: var(--font);
  line-height: 1.4;
}

/* ---- CREATURES ---- */
.creatures-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 520px) {
  .creatures-row { grid-template-columns: 1fr; }
}

.creature-card {
  background: var(--xp-inner-bg);
  border: 1px solid;
  border-color: var(--xp-border-dark) var(--xp-inset) var(--xp-inset) var(--xp-border-dark);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.creature-header {
  font-size: 11px;
  font-weight: bold;
  color: var(--xp-text);
  font-family: var(--font);
  border-bottom: 1px solid var(--xp-inset);
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.creature-header::before { content: '🐾'; font-size: 12px; }

.cat-ascii {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #333;
  line-height: 1.4;
  background: #f5f5f0;
  padding: 6px 8px;
  border: 1px solid;
  border-color: var(--xp-border-dark) var(--xp-inset) var(--xp-inset) var(--xp-border-dark);
}

.creature-note {
  font-size: 10px;
  color: var(--xp-text-dim);
  font-family: var(--font);
  font-style: italic;
}

/* ---- MICKEY UPLOAD ---- */
.mickey-photo-slot {
  border: 1px solid;
  border-color: var(--xp-border-dark) var(--xp-inset) var(--xp-inset) var(--xp-border-dark);
  min-height: 120px;
  background: #f0efea repeating-linear-gradient(
    45deg, rgba(0,0,0,0.015) 0px, rgba(0,0,0,0.015) 1px,
    transparent 1px, transparent 6px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: background 0.1s;
}

.mickey-photo-slot:hover { background-color: #e8eef8; }

.upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 10px;
  text-align: center;
}

.upload-icon { font-size: 26px; }

.upload-text {
  font-size: 11px;
  font-weight: bold;
  color: var(--xp-link);
  text-decoration: underline;
  font-family: var(--font);
}

.upload-hint {
  font-size: 10px;
  color: var(--xp-text-dim);
  font-family: var(--font);
}

#mickey-upload {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

#mickey-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- PSP SCREEN ---- */
.psp-screen {
  padding: 10px 12px;
  background: var(--xp-window-bg);
}

.psp-screen > div {
  background: #12182a;
  border: 1px solid;
  border-color: var(--xp-border-dark) var(--xp-inset) var(--xp-inset) var(--xp-border-dark);
  max-width: 310px;
  border-radius: 3px;
  overflow: hidden;
}

.psp-screen > div::before {
  content: '🎮  Memory Card — Slot 1';
  display: block;
  background: linear-gradient(to bottom, #5a9ae0, #2060cc);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 8px;
  font-family: var(--font);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

.psp-screen-inner {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.psp-game-title {
  font-size: 13px;
  font-weight: bold;
  color: #a8d8ff;
  font-family: var(--font);
  text-shadow: 0 0 8px rgba(100,180,255,0.5);
  text-transform: uppercase;
}

.psp-sub {
  font-size: 10px;
  color: #507090;
  font-family: var(--font);
  letter-spacing: 0.1em;
}

.psp-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #607080;
  font-family: var(--font);
}

.psp-fill {
  flex: 1;
  height: 8px;
  background: #080810;
  border: 1px solid #202840;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.psp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
}

.hp::after {
  width: 62%;
  background: linear-gradient(to bottom, #80ff80, #20cc20);
  box-shadow: 0 0 4px rgba(0,255,0,0.4);
}

.sp::after {
  width: 38%;
  background: linear-gradient(to bottom, #8080ff, #2020cc);
  box-shadow: 0 0 4px rgba(60,60,255,0.4);
}

.psp-status {
  font-size: 10px;
  color: #506070;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- GLITCH ---- */
.glitch {
  position: relative;
  color: #a8d8ff;
}

.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
}

.glitch::before {
  color: rgba(255,80,80,0.6);
  animation: glitch1 4s infinite;
  clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%);
}

.glitch::after {
  color: rgba(80,80,255,0.5);
  animation: glitch2 4s infinite;
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
}

@keyframes glitch1 {
  0%,88%,100%{transform:translateX(0);opacity:0}
  90%{transform:translateX(-2px);opacity:1}
  92%{transform:translateX(2px);opacity:1}
  94%{transform:translateX(0);opacity:0}
}

@keyframes glitch2 {
  0%,91%,100%{transform:translateX(0);opacity:0}
  93%{transform:translateX(2px);opacity:1}
  95%{transform:translateX(-2px);opacity:1}
  97%{transform:translateX(0);opacity:0}
}

/* ---- LINKS ---- */
.links-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.link-item {
  font-size: 11px;
  color: var(--xp-link);
  text-decoration: underline;
  padding: 3px 6px;
  border-radius: 2px;
  display: block;
  font-family: var(--font);
  transition: background 0.1s, color 0.1s;
}

.link-item:hover {
  background: var(--xp-highlight);
  color: white;
  text-decoration: none;
}

.link-item:visited { color: var(--xp-link-visited); }

/* ---- FOOTER ---- */
footer {
  max-width: 860px;
  margin: 10px auto 0;
  background: var(--xp-window-bg);
  border: 1px solid #0a246a;
  border-radius: 7px 7px 4px 4px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.38);
  overflow: hidden;
  animation: xpOpen 0.14s 0.36s ease both;
}

footer::before {
  content: 'ℹ️  System Properties';
  display: block;
  background: linear-gradient(to bottom,
    #5a9ae0 0%, #2060cc 8%, #1850b8 45%,
    #1040a8 50%, #1850b8 52%, #2060cc 75%, #5a9ae0 100%
  );
  color: white;
  font-size: 11px;
  font-weight: bold;
  font-family: var(--font);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  padding: 5px 8px;
  min-height: 28px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
}

.footer-inner span {
  font-size: 10px;
  color: var(--xp-text-dim);
  font-family: var(--font);
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { background: var(--xp-inset); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #e0ddd4, #c8c5bc);
  border: 1px solid;
  border-color: white var(--xp-border-dark) var(--xp-border-dark) white;
}

/* ---- SELECTION ---- */
::selection { background: var(--xp-highlight); color: white; }

/* ---- ANIMATION ---- */
@keyframes xpOpen {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}