/* =====================================================================
   NYAKU.EXE  —  a Y2K / Windows 95 desktop portfolio
   built for a 1440x900+ display. NOT made for mobile (on purpose).
   ===================================================================== */

/* ---------- FONTS (grabbed from olliveen source) ---------- */
@font-face {
  font-family: 'PixelOperator';
  src: url('../fonts/PixelOperator.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'fontstuck';
  src: url('../fonts/fontstuck.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'CipherFontB';
  src: url('../fonts/CipherFontB.ttf') format('truetype');
  font-display: swap;
}

/* ---------- palette (classic win95/98) ---------- */
:root {
  --silver: #c0c0c0;
  --silver-lit: #dfdfdf;
  --gray: #808080;
  --navy: #000080;
  --navy-lit: #1084d0;
  --teal: #008080;
  --black: #0a0a0a;
  --white: #ffffff;
  --hot: #ff00cc;
  --lime: #00ff66;
  --border-raised: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --border-sunken: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background-color: #04121f;
  background-image: url("../assets/backgrounds/vocaloid_192.jpg");
  background-size: cover;
  background-position: 72% 18%;
  background-repeat: no-repeat;
  font-family: 'PixelOperator', 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 18px;
  -webkit-font-smoothing: none;
  color: var(--black);
  cursor: url("../assets/cursor.png") 13 13, auto !important;
}
*, *::before, *::after { cursor: url("../assets/cursor.png") 13 13, auto !important; }

/* =====================================================================
   SCALE WRAPPER  — fixed 1440x900 design canvas, uniformly scaled to
   fit any screen so the whole UI keeps the same relative proportions
   on bigger/smaller monitors instead of just sitting small in a corner.
   the transform here also makes this the containing block for every
   position:fixed child (desktop/taskbar/start-menu), so they anchor
   to this 1440x900 box instead of the real viewport — no other CSS
   below needs to change.
   ===================================================================== */
#scale-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
}

/* =====================================================================
   DESKTOP
   ===================================================================== */
#desktop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  user-select: none;
}

/* --- desktop icons --- */
#icon-layer {
  position: absolute;
  top: 8px; left: 8px; bottom: 40px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  z-index: 5;
}
.desk-icon {
  position: relative;
  width: 92px;
  padding: 8px 4px 6px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  border: 1px dotted transparent;
  font-size: 15px;
  line-height: 1.05;
  margin-bottom: 6px;
}
.desk-icon img, .desk-icon .glyph {
  width: 48px; height: 48px;
  display: block;
  margin: 0 auto 5px;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.5));
  object-fit: contain;
}
.desk-icon .label {
  background: transparent;
  padding: 0 2px;
  text-shadow: 1px 1px 0 #000, 0 0 2px #000;
}
.desk-icon:hover { border: 1px dotted #fff; }
.desk-icon.selected { border: 1px dotted #fff; }
.desk-icon.selected .label { background: var(--navy); }
.desk-icon.selected img { filter: drop-shadow(1px 1px 0 rgba(0,0,0,.5)) brightness(.7) sepia(1) hue-rotate(180deg); }

/* =====================================================================
   WINDOW CHROME  (based on the 98.css look)
   ===================================================================== */
.window {
  position: absolute;
  min-width: 180px;
  background: var(--silver);
  box-shadow: var(--border-raised);
  padding: 3px;
  color: var(--black);
  z-index: 10;
  display: flex;
  flex-direction: column;
}
.window.dragging { opacity: .96; }

.title-bar {
  background: linear-gradient(90deg, var(--navy), var(--navy-lit));
  padding: 3px 3px 3px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  height: 22px;
  position: relative;
}
.window.inactive .title-bar {
  background: linear-gradient(90deg, var(--gray), #b0b0b0);
}
.title-bar-text {
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex; align-items: center; gap: 5px;
}
.title-bar-text img { width: 16px; height: 16px; image-rendering: pixelated; }
.title-bar-controls { display: flex; gap: 2px; }
.title-bar-controls button {
  width: 18px; height: 16px;
  min-width: 18px;
  padding: 0;
  background: var(--silver);
  box-shadow: var(--border-raised);
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.title-bar-controls button:active { box-shadow: var(--border-sunken); }
.tb-min { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E"); background-position: center bottom 3px; }
.tb-max { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E"); }
.tb-close { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z'/%3E%3C/svg%3E"); }

.window-body {
  margin: 3px 0 0;
  padding: 8px 10px;
  overflow: auto;
  flex: 1;
  background: var(--silver);
}
.window.paper .window-body { background: #fff; box-shadow: var(--border-sunken); margin: 3px 2px 2px; }

/* retro scrollbars */
.window-body::-webkit-scrollbar { width: 16px; height: 16px; }
.window-body::-webkit-scrollbar-track { background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect width='1' height='1' fill='%23c0c0c0'/><rect x='1' y='1' width='1' height='1' fill='%23c0c0c0'/></svg>"); }
.window-body::-webkit-scrollbar-thumb { background: var(--silver); box-shadow: var(--border-raised); }
.window-body::-webkit-scrollbar-button { background: var(--silver); box-shadow: var(--border-raised); height: 16px; width: 16px; }

/* =====================================================================
   GENERIC WIN95 CONTROLS
   ===================================================================== */
.btn, button.win {
  font-family: inherit; font-size: 15px;
  background: var(--silver);
  box-shadow: var(--border-raised);
  border: none;
  padding: 4px 12px;
  min-width: 70px;
  cursor: pointer;
  color: #000;
}
.btn:active, button.win:active { box-shadow: var(--border-sunken); padding: 5px 11px 3px 13px; }
.sunkbox { box-shadow: var(--border-sunken); background: #fff; padding: 8px; }
.fieldset {
  border: none;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080;
  padding: 12px 10px 10px;
  margin: 10px 0;
  position: relative;
}
.fieldset > legend, .fieldset > .legend {
  position: absolute; top: -9px; left: 8px;
  background: var(--silver);
  padding: 0 4px; font-size: 14px;
}

hr.groove { border: none; height: 2px; box-shadow: inset 0 1px #808080, inset 0 -1px #fff; margin: 12px 0; }

a { color: #0000ee; }
a:visited { color: #551a8b; }
a:hover { color: var(--hot); background: #ff0; }

/* =====================================================================
   TASKBAR
   ===================================================================== */
#taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  background: var(--silver);
  box-shadow: inset 0 2px #fff, inset 0 3px var(--silver-lit);
  border-top: 1px solid var(--silver);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 3px;
  z-index: 9000;
}
#start-btn {
  display: flex; align-items: center; gap: 5px;
  font-weight: bold; font-size: 16px;
  padding: 3px 9px 3px 6px;
  background: var(--silver);
  box-shadow: var(--border-raised);
  cursor: pointer;
  height: 28px;
}
#start-btn.active { box-shadow: var(--border-sunken); }
#start-btn .flag { width: 22px; height: 22px; image-rendering: pixelated; }
#task-divider { width: 2px; align-self: stretch; box-shadow: inset -1px 0 #fff, inset 1px 0 #808080; margin: 2px 2px; }
#task-buttons { display: flex; gap: 3px; flex: 1; overflow: hidden; }
.task-btn {
  display: flex; align-items: center; gap: 5px;
  min-width: 140px; max-width: 170px;
  height: 26px;
  padding: 2px 8px;
  background: var(--silver);
  box-shadow: var(--border-raised);
  font-size: 14px; cursor: pointer;
  overflow: hidden; white-space: nowrap;
}
.task-btn img { width: 16px; height: 16px; image-rendering: pixelated; }
.task-btn.active { box-shadow: var(--border-sunken); background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect width='1' height='1' fill='%23c0c0c0'/><rect x='1' y='1' width='1' height='1' fill='%23c0c0c0'/></svg>"); font-weight: bold; }
.task-btn .txt { overflow: hidden; text-overflow: ellipsis; }

#tray {
  display: flex; align-items: center; gap: 6px;
  box-shadow: var(--border-sunken);
  padding: 2px 8px; height: 26px;
}
#tray .tray-ico { width: 16px; height: 16px; image-rendering: pixelated; }
#clock { font-size: 14px; min-width: 62px; text-align: center; }

/* =====================================================================
   START MENU
   ===================================================================== */
#start-menu {
  position: fixed;
  left: 3px; bottom: 36px;
  width: 230px;
  background: var(--silver);
  box-shadow: var(--border-raised);
  z-index: 9500;
  display: none;
  padding: 3px;
}
#start-menu.open { display: flex; }
#start-menu .side {
  width: 30px;
  background: linear-gradient(var(--navy), #4a00a0);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff; font-weight: bold; font-size: 20px;
  text-align: center; padding: 8px 0;
  font-family: 'PixelOperator';
  letter-spacing: 2px;
}
#start-menu .side b { color: var(--lime); }
#start-menu .items { flex: 1; }
.sm-item {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 8px; font-size: 16px; cursor: pointer;
}
.sm-item img, .sm-item .glyph { width: 24px; height: 24px; image-rendering: pixelated; }
.sm-item:hover { background: var(--navy); color: #fff; }
.sm-sep { height: 2px; box-shadow: inset 0 1px #808080, inset 0 -1px #fff; margin: 3px 2px; }

/* =====================================================================
   TYPOGRAPHY / CHAOS TEXT
   ===================================================================== */
/* WordArt: flat web-safe fill + HARD offset shadow (renders on a 256-colour box) */
.wordart {
  font-family: 'fontstuck', 'PixelOperator', sans-serif;
  font-size: 52px;
  line-height: .9;
  color: #ff00cc;
  -webkit-text-stroke: 2px #000;
  text-shadow: 3px 3px 0 #000, 4px 4px 0 #000;
  transform: skewX(-6deg);
  letter-spacing: 1px;
}
.cipher { font-family: 'CipherFontB', monospace; }
.pixel { font-family: 'PixelOperator', monospace; }

/* rainbow text = solid web-safe letters, coloured per-letter via JS (no gradient) */
.rainbow-txt { font-weight: bold; color: #cc0099; }
.rainbow-txt i { font-style: normal; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.glow-hot { color: #ff0099; font-weight: bold; }

marquee { display: block; }

/* barbed heart divider */
.divider-hearts {
  text-align: center; color: #d00; font-size: 18px; letter-spacing: -2px; margin: 8px 0;
  overflow: hidden; white-space: nowrap;
}

/* =====================================================================
   BLINKIES / STAMPS / 88x31 BUTTONS
   ===================================================================== */
.blinkie {
  display: inline-block;
  font-family: 'PixelOperator', monospace;
  font-size: 13px;
  padding: 3px 8px;
  margin: 3px;
  color: #fff;
  border: 1px solid #000;
  image-rendering: pixelated;
  text-shadow: 1px 1px 0 #000;
  vertical-align: middle;
  white-space: nowrap;
}
.blinkie.b1 { background: repeating-linear-gradient(45deg,#ff00cc,#ff00cc 6px,#000 6px,#000 12px); animation: blink 1.1s steps(1) infinite; }
.blinkie.b2 { background: #000; color: var(--lime); border-color: var(--lime); animation: blink .7s steps(1) infinite; }
.blinkie.b3 { background: linear-gradient(90deg,#ff0000,#ff8a00,#ffe100,#00d21a,#00b3ff,#8a00ff); color:#000; text-shadow:none; }
.blinkie.b4 { background:#ff69b4; color:#000; text-shadow:none; }
.blinkie.b5 { background:#111; color:#0ff; border-color:#0ff; }
.blinkie.b6 { background:#7700ff; color:#fff; }

.badge88 {
  width: 88px; height: 31px;
  border: 1px solid #000;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 11px; line-height: 1.05; text-align: center;
  margin: 2px; overflow: hidden; text-decoration: none;
  image-rendering: pixelated;
  font-family: 'PixelOperator', monospace;
  vertical-align: middle;
  color: #fff;
  padding: 1px;
}
.badge88 img { image-rendering: pixelated; }
.b88-a { background:#000; color:#0f0; }
.b88-b { background:#001a80; color:#ff0; }
.b88-c { background:#ff00cc; color:#fff; }
.b88-d { background:#c0c0c0; color:#000; }
.b88-e { background: linear-gradient(90deg,#000,#333); color:#0ff; }
.b88-f { background:#111; color:#fff; }
.badge88:hover { outline: 2px dotted #ff0; }

.stamp-wall { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.stamp {
  border: 2px ridge #999;
  padding: 2px; background:#fff;
  transform: rotate(var(--r, -2deg));
  image-rendering: pixelated;
}

/* =====================================================================
   ABOUT / PERSONAL CORNER
   ===================================================================== */
.pixel-list { list-style: none; padding: 0; margin: 0; }
.pixel-list li { padding: 2px 0 2px 20px; position: relative; }
.pixel-list li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 8px; height: 8px;
  background: var(--hot);
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.currently li::before { background: var(--lime); }
.fav li::before { background: #ff8a00; }

.marquee-bar {
  background:#000; color:#0f0; font-family:'PixelOperator';
  padding: 3px 0; overflow:hidden; box-shadow: var(--border-sunken); margin: 6px 0;
}

/* portrait frame */
.portrait-frame {
  border: 6px double #ff00cc;
  padding: 4px; background:#fff;
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
}
.portrait-frame img { display:block; width: 100%; image-rendering: auto; }

/* =====================================================================
   WORKS / GALLERY
   ===================================================================== */
.works-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.work-card {
  background:#fff; box-shadow: var(--border-sunken); padding: 6px;
}
.work-card .thumb {
  height: 96px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'PixelOperator'; font-size: 14px; text-align:center;
  border:1px solid #000; overflow:hidden; margin-bottom: 5px;
  background-size: cover; background-position:center;
}
.work-card h4 { margin: 2px 0; font-size: 16px; }
.work-card p { margin: 2px 0; font-size: 13px; color:#333; }
.tag { display:inline-block; font-size:11px; background:var(--navy); color:#fff; padding:1px 5px; margin:1px; }

.gallery-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.gallery-grid figure { margin:0; background:#fff; box-shadow: var(--border-sunken); padding:5px; }
.gallery-grid img { width:100%; display:block; border:1px solid #000; }
.gallery-grid figcaption { font-size:12px; text-align:center; margin-top:3px; }

/* =====================================================================
   GUESTBOOK
   ===================================================================== */
.gb-entry { background:#fff; box-shadow: var(--border-sunken); padding:7px 9px; margin:8px 0; font-size:14px; }
.gb-entry .who { font-weight:bold; color:#0000cc; }
.gb-entry .when { font-size:11px; color:#666; float:right; }
.gb-form input, .gb-form textarea {
  font-family:inherit; font-size:14px; width:100%;
  box-shadow: var(--border-sunken); background:#fff; border:none; padding:4px; margin:3px 0;
}

/* =====================================================================
   MEDIA PLAYER  (real iPod recreation, ported from hhroses.art)
   ===================================================================== */
.ipod-container {
  width: 305px; height: 405px; position: relative;
  filter: drop-shadow(4px 4px 4px rgba(0,0,0,.35));
  margin: 0 auto;
}
.ipod-image { width: 305px; height: 405px; clip-path: inset(5px round 30px); }
.ipod-container .click-wheel-area {
  position: absolute; top: 339px; left: 132px; width: 40px; height: 40px; border-radius: 25px;
}
.ipod-container .next-button, .ipod-container .back-button {
  position: absolute; top: 281px; width: 40px; height: 40px; border-radius: 25px;
}
.ipod-container .next-button { left: 190px; }
.ipod-container .back-button { left: 74px; }
.ipod-container .menu-button { position: absolute; bottom: 140px; left: 95px; width: 50px; height: 50px; }
.ipod-container .click-wheel-area:active,
.ipod-container .next-button:active,
.ipod-container .back-button:active,
.ipod-container .menu-button:active {
  background: linear-gradient(to bottom, grey 0%, #ffffff 50%, #a0a0a0 100%);
  opacity: .12; box-shadow: 0 0 5px 0 rgba(0,0,0,.5); border-radius: 25px;
}
.ipod-container .screen {
  position: absolute; top: 31px; left: 35px; width: 231px; height: 170px;
  background: linear-gradient(to bottom, #e9f5fc 0%, #eaf6ff 100%);
  border-radius: 3px; color:#000; font-family:'PixelOperator';
  font-size: 12px; display:flex; flex-direction:column; overflow:hidden;
  box-shadow: inset 0 0 5px rgba(0,0,0,.1); border: 1px solid grey;
}
.ipod-container .screen::before {
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(to bottom, transparent 0px, transparent 1px, rgba(0,0,0,.08) 1px, rgba(0,0,0,.08) 2px);
  pointer-events:none; z-index:10;
}
.ipod-container .screen::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.1) 90%, rgba(0,0,0,.2) 100%);
  pointer-events:none; z-index:11; animation: ipodFlicker .1s infinite;
}
@keyframes ipodFlicker { 0%{opacity:.97} 50%{opacity:1} 100%{opacity:.98} }
.screen-header {
  background: linear-gradient(to bottom, white 0%, #dbe9ee 50%, #d0e3e7 100%);
  color:#000; padding:3px 10px; font-weight:bold; font-size:13px;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid #6d879c; flex-shrink:0;
}
.screen-header-left { display:flex; align-items:center; }
.play-icon { font-size:10px; margin-right:4px; color:#3789ad; }
.screen-header-title { flex:1; text-align:center; }
.battery { width:20px; height:10px; border:1px solid #000; border-radius:2px; position:relative; display:flex; align-items:center; }
.battery::after {
  content:""; position:absolute; right:-4px; width:2px; height:6px;
  background:green; border:1px solid #000; border-radius:0 2px 2px 0;
}
.battery-fill {
  width:80%; height:100%; border-radius:1px;
  background: linear-gradient(to bottom, #2a8a2a 0%, lime 20%, green 70%, #2a8a2a 100%);
}
.now-playing { flex:1; display:flex; flex-direction:column; padding:10px; }
.now-playing-content { display:flex; flex-direction:row; align-items:flex-start; gap:12px; flex:1; }
.album-art { width:76px; height:76px; border-radius:1px; box-shadow:0 2px 5px rgba(0,0,0,.4); flex-shrink:0; margin:6px 0 0 3px; image-rendering:pixelated; }
.track-info { display:flex; flex-direction:column; justify-content:center; gap:3px; overflow:hidden; flex:1; height:75px; }
.track-title { font-size:14px; font-weight:bold; color:#000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-bottom:4px; }
.track-artist { font-size:12px; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-bottom:4px; font-weight:600; }
.track-album { font-size:12px; color:#3a3a3a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.progress-container { display:flex; flex-direction:column; gap:4px; flex-shrink:0; margin-top:-2px; }
.progress-bar {
  width:99%; height:13px; overflow:hidden; position:relative;
  background: linear-gradient(to bottom, #a0a0a0 0%, #ffffff 50%, #a0a0a0 100%);
  border-top:1px solid #5a7a98; border-bottom:1px solid #c0d8ec;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  border-left:1px solid #b9b9b9; border-right:1px solid #b9b9b9;
}
.progress-fill { height:100%; border:1px solid #3789ad; background: linear-gradient(to bottom, #7cd6ff 0%, #3789ad 50%, #7cd6ff 100%); width:0%; }
.time-row { display:flex; justify-content:space-between; width:100%; }
.ipod-time { font-size:11px; color:#1a1a1a; font-weight:700; }

/* chromeless window — just the ipod, no win95 frame */
.window.chromeless { background:transparent; box-shadow:none; padding:0; }

/* volume HUD — appears briefly over the screen when scrolling the click wheel */
.ipod-vol-hud {
  position: absolute; top: 128px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.82); color:#fff; font-family:'PixelOperator';
  font-size: 14px; padding: 5px 14px; border-radius: 10px;
  white-space: nowrap; z-index: 20;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.ipod-vol-hud.show { opacity: 1; }

.ipod-hint {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 8px;
  background: rgba(0,0,0,.8); color:#fff; font-family:'PixelOperator';
  font-size: 13px; padding: 4px 10px; border-radius: 8px;
  white-space: nowrap; z-index: 30;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.ipod-container:hover .ipod-hint { opacity: 1; }

/* =====================================================================
   POPUPS / DIALOGS
   ===================================================================== */
.popup { z-index: 8000; width: 300px; }
.popup .window-body { display:flex; gap:10px; align-items:flex-start; }
.popup .ico { font-size: 34px; }
.popup .actions { text-align:center; margin-top:10px; }

@keyframes eq2 { 0%,100%{height:5px} 50%{height:26px} }

/* misc */
.center { text-align:center; }
.small { font-size: 15px; }
.tiny { font-size: 14px; }
.hl { background:#ff0; }
.imgbtn { image-rendering: pixelated; vertical-align: middle; }
.spin { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wob { animation: wob 2s ease-in-out infinite; display:inline-block; }
@keyframes wob { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }

/* boot / crt flourish (pure CSS so it always self-clears) */
#crt-flash {
  position: fixed; inset:0; background:#fff; z-index: 99999; pointer-events:none;
  opacity: 1; animation: bootflash .55s ease-out forwards;
}
@keyframes bootflash { 0%{opacity:1} 100%{opacity:0; visibility:hidden} }

/* cursor-trail sparkles */
.trail { position: fixed; width: 10px; height:10px; pointer-events:none; z-index:99998;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M5 0l1 4 4 1-4 1-1 4-1-4-4-1 4-1z' fill='%23ffea00' stroke='%23ff00cc' stroke-width='.5'/></svg>") no-repeat; }

/* app sparkles (real gif twinkles on window title bars) */
.app-sparkle {
  position: absolute; width: 28px; height: 28px; pointer-events: none;
  z-index: 50; image-rendering: pixelated;
  animation: appSparkle 1.3s ease-out forwards;
}
@keyframes appSparkle {
  0% { opacity: 0; transform: scale(.3) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.3) rotate(20deg); }
  100% { opacity: 0; transform: scale(.6) rotate(50deg); }
}

/* =====================================================================
   "make it feel alive" — small useless idle/hover effects
   ===================================================================== */
@keyframes iconWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
.desk-icon:hover img { animation: iconWiggle .4s ease-in-out; }
.desk-icon:active img { transform: scale(.9); }

.btn:hover, button.win:hover { animation: iconWiggle .35s ease-in-out; }

@keyframes trayPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.tray-ico { animation: trayPulse 3s ease-in-out infinite; }

@keyframes windowPop {
  0% { filter: brightness(1.25); }
  100% { filter: brightness(1); }
}
.window.just-focused { animation: windowPop .28s ease-out; }

@keyframes idleSway {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}
.sway { animation: idleSway 4s ease-in-out infinite; transform-origin: 50% 100%; }

/* =====================================================================
   MS PAINT WINDOW  (the main about-me window)
   ===================================================================== */
.window.paintwin { padding: 3px; }
.paint-title {
  background: linear-gradient(90deg,#ff0000,#ff8a00,#ffe100,#00d21a,#00b3ff,#8a00ff,#ff00cc);
  height: 22px; padding: 3px 3px 3px 5px;
}
.paint-title .title-bar-text { text-shadow: 1px 1px 0 #000; }
.paint-title .title-bar-controls button { background-color: var(--silver); }

/* menu bar */
.menubar {
  display: flex; gap: 2px; padding: 2px 4px;
  background: var(--silver);
  box-shadow: inset 0 -1px #808080, inset 0 1px #fff;
  font-size: 15px;
}
.menubar span { padding: 2px 8px; cursor: pointer; }
.menubar span u { text-decoration: underline; }
.menubar span:hover { background: var(--navy); color: #fff; }

/* the paint body = toolbar + canvas + palette */
.paint-shell { display: flex; flex: 1; min-height: 0; }

/* left tool column */
.toolbox {
  width: 62px; flex: 0 0 62px;
  padding: 4px 3px;
  box-shadow: inset -1px -1px #808080, inset 1px 1px #fff;
  background: var(--silver);
}
.tool-grid { display: grid; grid-template-columns: repeat(2, 25px); gap: 1px; justify-content: center; }
.tool {
  width: 25px; height: 23px;
  background: var(--silver);
  box-shadow: var(--border-raised);
  cursor: crosshair;
  display: flex; align-items: center; justify-content: center;
}
.tool i {
  width: 16px; height: 16px; display: block;
  background: url("../img/icons/paint_tools_classic.png") no-repeat;
  image-rendering: pixelated;
}
.tool:active, .tool.on { box-shadow: var(--border-sunken); }
.tool-opts { margin-top: 6px; box-shadow: var(--border-sunken); background:#fff; height:56px;
  display:flex; align-items:center; justify-content:center; }
.tool-opts .brush { width:12px; height:12px; background:#000; border-radius:50%; }

/* canvas = scrollable chaotic content */
.canvas-wrap {
  flex: 1; min-width: 0;
  box-shadow: inset 1px 1px #808080, inset -1px -1px #fff;
  background: var(--gray);
  padding: 3px;
  display: flex;
}
.canvas {
  flex: 1; min-width: 0;
  background: #fff;
  box-shadow: var(--border-sunken);
  overflow-y: scroll; overflow-x: hidden;
  padding: 12px 16px;
}
.canvas::-webkit-scrollbar { width: 17px; }
.canvas::-webkit-scrollbar-track { background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect width='1' height='1' fill='%23c0c0c0'/><rect x='1' y='1' width='1' height='1' fill='%23c0c0c0'/></svg>"); }
.canvas::-webkit-scrollbar-thumb { background: var(--silver); box-shadow: var(--border-raised); }
.canvas::-webkit-scrollbar-button:vertical { background: var(--silver); box-shadow: var(--border-raised); height:17px; }

/* bottom color palette */
.palette {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 4px; margin-top: 3px;
  box-shadow: inset -1px -1px #808080, inset 1px 1px #fff;
}
.pal-current { width: 30px; height: 30px; box-shadow: var(--border-sunken); position: relative; flex:0 0 auto; }
.pal-current::before { content:""; position:absolute; left:4px; top:4px; width:18px; height:18px; background:#000; box-shadow:0 0 0 2px #fff, 0 0 0 3px #808080; }
.pal-current::after { content:""; position:absolute; left:10px; top:10px; width:18px; height:18px; background:#fff; box-shadow:0 0 0 1px #808080; }
.swatches { display: grid; grid-template-columns: repeat(14, 14px); grid-template-rows: 14px 14px; gap: 1px; }
.swatches i { width: 14px; height: 14px; box-shadow: inset -1px -1px #808080, inset 1px 1px #fff; cursor: pointer; }

/* ---- content pieces inside the canvas ---- */
.navigate-scribble { font-family:'fontstuck'; color:#ff0000; font-size:26px; transform:rotate(-8deg); display:inline-block; text-shadow:2px 2px 0 #ffcc00; }
.welcome-box {
  border: 3px solid #00e5e5; background:#fff; padding: 14px 18px; margin: 4px 0 10px;
  box-shadow: 0 0 0 2px #ff00cc;
}
.linkback-box { border: 2px solid #ff00cc; padding: 8px; margin: 8px 0; background:#fff; }
.linkback-box textarea { width:100%; font-family:monospace; font-size:12px; height:44px; box-shadow: var(--border-sunken); border:none; padding:4px; resize:none; }

.section-h { font-family:'fontstuck','PixelOperator',sans-serif; font-size:26px; color:#ff00cc; text-shadow:2px 2px 0 #000; text-align:center; margin:14px 0 6px; }
.button-wall { display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start; }
.button-wall img { image-rendering: pixelated; border:0; display:block; }
.button-col { columns: 88px; column-gap:5px; }
.button-col img, .button-col a { display:inline-block; margin-bottom:5px; image-rendering:pixelated; }
.gif-divider { display:block; margin: 8px auto; image-rendering:pixelated; max-width:100%; }
.stamp-strip { display:flex; flex-wrap:wrap; gap:3px; align-items:center; justify-content:center; }
.stamp-strip img { image-rendering:pixelated; }

.threecol { display:grid; grid-template-columns: 200px 1fr 200px; gap:14px; align-items:start; }
@media (max-width: 900px){ .threecol{ grid-template-columns:1fr; } }

.artframe { border:5px solid #ffe100; background:#fff; padding:3px; box-shadow:3px 3px 0 rgba(0,0,0,.3); }
.artframe img { display:block; width:100%; max-height:300px; object-fit:cover; object-position:top; }

.todo-box { border:2px dashed #ff00cc; padding:10px 14px; background:#fff; }
.todo-box ul { margin:4px 0; }

/* ---- CHAOS / overlap utilities (never win space, LOSE space) ---- */
.chaos { position: relative; }
.hero { min-height: 430px; margin-bottom: 0; }
.huge-div { width: 100%; }
.button-wall.dense { gap: 2px; }
.button-wall.dense img { margin: 0; }
.deco { position: absolute; z-index: 6; image-rendering: pixelated; }
.deco.behind { z-index: 1; }
.deco.front { z-index: 9; }
.canvas .gif-divider { margin: 4px auto -4px; }         /* dividers hug content */
.canvas .section-h { margin: 6px 0 2px; }
.canvas .fieldset { margin: 8px 0; }
.tilt-l { transform: rotate(-6deg); }
.tilt-r { transform: rotate(5deg); }
.big-blinkie { transform: scale(1.6); transform-origin: left center; margin: 10px 26px 10px 0; }
.huge { width: 230px !important; height: auto !important; }
.stamp-strip.dense { gap: 0 2px; }
.stamp-strip.dense img { margin: -2px; }
/* featured media placeholder cards */
.media-strip { display:flex; flex-wrap:wrap; gap:8px; }
.media-card { flex:1 1 150px; min-width:140px; background:#111; color:#0f0; border:2px solid #000;
  box-shadow: var(--border-sunken); height:120px; display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:'PixelOperator'; font-size:13px; padding:0;
  background-image: repeating-linear-gradient(45deg,#111,#111 9px,#1a1a1a 9px,#1a1a1a 18px);
  overflow: hidden; }
.media-card b { color:#ff00cc; }

/* ---- vintage-pixelate: renders like a 256-colour GIF/BMP on a Win95 box ----
   (quantized/dithered palette, nearest-neighbor scaling — not a sepia "old photo" filter)
   swap the <img src> inside .vintage-thumb to replace a placeholder */
.vintage-thumb { position: relative; width: 100%; height: 100%; overflow: hidden; background:#000; }
.vintage-thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  image-rendering: pixelated;
  filter: contrast(1.2) saturate(1.6) brightness(1.03);
}
.vintage-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect x='0' y='0' width='1' height='1' fill='%23000' fill-opacity='.5'/><rect x='2' y='0' width='1' height='1' fill='%23fff' fill-opacity='.35'/><rect x='1' y='1' width='1' height='1' fill='%23fff' fill-opacity='.3'/><rect x='3' y='1' width='1' height='1' fill='%23000' fill-opacity='.4'/><rect x='0' y='2' width='1' height='1' fill='%23fff' fill-opacity='.3'/><rect x='2' y='2' width='1' height='1' fill='%23000' fill-opacity='.5'/><rect x='1' y='3' width='1' height='1' fill='%23000' fill-opacity='.4'/><rect x='3' y='3' width='1' height='1' fill='%23fff' fill-opacity='.35'/></svg>");
  background-size: 4px 4px;
  image-rendering: pixelated;
  mix-blend-mode: overlay;
  opacity: .55;
}

/* ---- SAFE SPACE (tidy, framed) ---- */
.safe-space {
  border: 3px solid #ff00cc;
  background: #fff;
  box-shadow: var(--border-sunken);
  padding: 0 0 12px; margin: 10px 0;
}
.safe-head {
  background: #ff00cc; color: #fff;
  font-family: 'fontstuck','PixelOperator',sans-serif; font-size: 24px;
  text-align: center; padding: 4px; letter-spacing: 1px;
}
.safe-grid { display: flex; gap: 16px; align-items: center; padding: 12px 14px 8px; }
.safe-me { flex: 0 0 auto; text-align: center; }
.safe-me img { width: 60px; image-rendering: pixelated; display: block; margin: 0 auto 3px; }
.heart-btn { transition: transform .15s ease, filter .15s ease; }
.heart-btn:hover { transform: scale(1.08); filter: drop-shadow(0 0 3px rgba(255,255,255,.6)); }
.safe-body { flex: 1; min-width: 0; }
.support-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.support-badges img { image-rendering: pixelated; height: 34px; width: auto; }
.support-badges img[alt="progress pride"] { height: 42px; }
.support-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px;
  margin: 4px 16px 0; padding: 8px 14px;
  background: #ffe6f7; box-shadow: var(--border-sunken);
}
.support-list ul { list-style: none; margin: 0; padding: 0; }
.support-list li { padding: 3px 0 3px 22px; position: relative; font-weight: bold; color: #cc0099; }
.support-list li::before {
  content: "★"; position: absolute; left: 2px; top: 2px; color: #ff00cc;
}

/* selection */
::selection { background: var(--navy); color:#fff; }

/* small helper for the "click to pet" */
#pet-counter { font-weight:bold; color:#d00; }