/* ============================================================
   FONTS — Pixel Operator (local)
   ============================================================ */
@font-face {
  font-family: 'Pixel Operator';
  src: url('fonts/pixel_operator/PixelOperator.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'Pixel Operator';
  src: url('fonts/pixel_operator/PixelOperator-Bold.ttf') format('truetype');
  font-weight: bold;
}

/* ============================================================
   ROOT VARIABLES
   ============================================================ */
:root {
  --win-bg: #c0c0c0;
  --win-light: #ffffff;
  --win-dark: #808080;
  --title-bg: #01253d;
  --title-text: #ffffff;

  --btn-font-size: 12px;
  --btn-padding-x: 8px;
  --btn-padding-y: 3px;

  --font-main: Verdana, sans-serif;

  --window-width: 400px;
  --window-padding: 12px;
}


/* ============================================================
   GLOBAL RESET
   ============================================================ */
* {
  box-sizing: border-box;
}

body {
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #000;
  margin: 0;
  font-family: var(--font-main);
}

/* Hide default audio UI */
#bgm-player {
  display: none;
}

#bgm-player::-webkit-media-controls {
  display: none !important;
}

/* ============================================================
   PLAYLIST DROPDOWN
   ============================================================ */
#playlist-dropdown {
  display: block;
  /* Forces it to always be visible */
  max-height: 85px;
  /* Perfectly fits about 5 items */
  overflow-y: auto;
  /* Keeps the scrollbar inside the box */
  background: #fff;
  border: 1px inset #808080;
  margin: 4px 0;
  font-size: 11px;
}

.playlist-item {
  padding: 2px 4px;
  cursor: pointer;
  color: #000;
}

.playlist-item:hover {
  background: var(--title-bg);
  color: var(--title-text);
}

.playlist-item.active {
  background: var(--title-bg);
  color: var(--title-text);
  font-weight: bold;
}
/* Force the pixel font to stay blocky and sharp */
body, .window, button, input, textarea {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed; 
}
/* ============================================================
   DESKTOP CANVAS (single definition)
   ============================================================ */
#desktop-canvas {
  position: relative;
  width: 5760px;
  height: 2700px;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
  background-size: cover;
  transform-origin: 0 0;
}

/* ============================================================
   WIN98 BUTTONS
   ============================================================ */
.win-btn {
  padding: var(--btn-padding-y) var(--btn-padding-x);
  background: var(--win-bg);
  border-top: 2px solid var(--win-light);
  border-left: 2px solid var(--win-light);
  border-right: 2px solid var(--win-dark);
  border-bottom: 2px solid var(--win-dark);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: var(--btn-font-size);
  user-select: none;
}

.win-btn:active {
  border: 2px inset var(--win-dark);
  padding: calc(var(--btn-padding-y) + 1px) calc(var(--btn-padding-x) - 1px) calc(var(--btn-padding-y) - 1px) calc(var(--btn-padding-x) + 1px);
}

/* ============================================================
   SECRET GIFS
   ============================================================ */
#bottom-gif-container {
  position: absolute;
  top: 2500px;
  left: 90%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 10;
}

#bottom-gif-container img {
  max-width: 200px;
}

/* ============================================================
   WINDOW BASE STYLE
   ============================================================ */
.window {
  position: absolute;
  width: var(--window-width);
  background-color: var(--win-bg);
  border-top: 2px solid var(--win-light);
  border-left: 2px solid var(--win-light);
  border-right: 2px solid var(--win-dark);
  border-bottom: 2px solid var(--win-dark);
  box-shadow: 2px 2px 0px #000;
  color: #000;
  user-select: none;
  display: flex;
  flex-direction: column;
  transform-origin: top left;
}

/* Title bar */
.window .title-bar {
  background-color: var(--title-bg);
  color: var(--title-text);
  padding: 3px 6px;
  font-weight: bold;
  font-size: 14px;
  cursor: move;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* Content */
.window .content {
  padding: var(--window-padding);
  user-select: text;
  background: var(--win-bg);
  flex: 1;
  overflow: auto;
}

/* Resize handle */
.resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  right: 0;
  bottom: 0;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, #000 50%);
}


/* ============================================================
   WINDOW POSITIONS
   ============================================================ */

#window-music-panel {
  top: 930px;
  left: 322px;
  width: 320px;
}

#window-profile {
  top: 62px;
  left: 588px;
}

#window-about {
  top: 260px;
  left: 1085px;
}

#window-filler {
  top: 162px;
  left: 2062px;
}

#window-music {
  top: 2420px;
  left: 1165px;
}

#window-asmr {
  top: 2193px;
  left: 2059px;
}

#window-messages {
  top: 989px;
  left: 1643px;
}

#window-doodle {
  top: 1126px;
  left: 881px;
  width: 540px;
}

#window-gallery {
  top: 495px;
  left: 285px;
  width: 440px;
}

#window-leak {
  top: 288px;
  left: 1607px;
}

#window-links {
  top: 1998px;
  left: 1452px;
}

#window-updates {
  top: 1425px;
  left: 82px;
}

#window-achievements {
  top: 734px;
  left: 859px;
}

#window-camellia {
  top: 995px;
  left: 2122px;
}

/* ============================================================
   IMAGE FLOATERS
   ============================================================ */
.pedophilebros {
  display: block;
  margin-left: auto;
}

.cirnofortnite {
  display: block;
  margin-left: 60%;
}

.jameschatgpt {
  display: block;
  margin-left: 50%;
}

.perlica {
  display: block;
  margin-left: 80%;
}

.ohayou {
  display: block;
  margin-left: 2%;
}

/* ============================================================
   LISTS
   ============================================================ */
ul.no-bullets {
  list-style-type: none;
  padding: 0;
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   MUSIC CONTROLS
   ============================================================ */

#volume-slider,
#seek-bar {
  width: 100%;
  margin-top: 6px;
}

#track-name,
#time-display {
  font-size: 11px;
  margin-top: 4px;
}

/* ============================================================
   MESSAGE WALL
   ============================================================ */
#message-list {
  max-height: 400px;
  overflow-y: auto;
  background: #e0e0e0;
  padding: 5px;
  border: 1px inset #808080;
  font-size: 12px;
}

.message-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 6px;
}

.message-item img {
  width: 32px;
  height: 32px;
  object-fit: cover;
}

#message-input {
  width: 100%;
  height: 50px;
  resize: vertical;
  font-family: var(--font-main);
  font-size: 10px;
}

.avatar-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}

.avatar-option {
  border: 2px solid transparent;
  cursor: pointer;
}

.avatar-option.selected {
  border-color: #000;
}

.avatar-option img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  display: block;
}

.message-content-box {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.message-avatar {
  flex-shrink: 0;
}

.message-doodle-img {
  max-width: 100%;
  border: 1px solid #000;
  margin-top: 6px;
  background: #fff;
}

/* ============================================================
   DOODLE BOARD
   ============================================================ */
#doodle-canvas {
  border: 1px solid #000;
  background: #fff;
  cursor: crosshair;
  display: block;
  margin-bottom: 6px;
}

#doodle-controls button {
  margin-right: 4px;
  font-size: 11px;
}



#pixel-canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-color: #ffffff;
  cursor: crosshair;
  display: block;
}

#pixel-ui-layer {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}


/* ============================================================
   ACHIEVEMENTS
   ============================================================ */
#achievements-list {
  font-size: 12px;
  padding-left: 16px;
}

#achievements-list li.unlocked {
  font-weight: bold;
}

.small {
  font-size: 11px;
}




.mb-8 {
  margin-bottom: 8px;
}

.pixel-art-wrapper {
  position: relative;
  width: 512px;
  height: 512px;
  margin-bottom: 6px;
  border: 1px solid #000;
  box-sizing: content-box;
}

.upload-section {
  margin-top: 12px;
  border-top: 1px solid #808080;
  padding-top: 8px;
}

/* ============================================================
   DELTARUNE THEME (cleaned + isolated)
   ============================================================ */
.window.theme-deltarune {
  background: #0b0b0b;
  border: 3px solid #fff;
  color: #fff;
  font-family: 'Pixel Operator', monospace;
  letter-spacing: 1px;
  padding: 12px;
}

.window.theme-deltarune .title-bar {
  background: #0b0b0b;
  color: #fff;
  border-bottom: 2px solid #fff;
}

.window.theme-deltarune .content {
  background: transparent;
  padding: 10px;
}

.window.theme-deltarune::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /*background-image: url('noise.png');*/
  opacity: 0.15;
}

/* ============================================================
   INTRO OVERLAY
   ============================================================ */
#introOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

#introButton {
  padding: 14px 28px;
  font-size: 20px;
  border: 2px solid white;
  background: black;
  color: white;
  cursor: pointer;
  font-family: 'Pixel Operator', monospace;
}

/* ============================================================
   TITLE HEART (renamed from .title)
   ============================================================ */
.title-heart-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.title-heart {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
}

.dr-char {
  opacity: 0;
}

.dr-char.animating {
  animation: dr-type 0.03s forwards;
}


@keyframes dr-type {
  to {
    opacity: 1;
  }
}




.window-gif {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
}


.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 350px;
  overflow-y: auto;
  padding-right: 4px;
}

.gallery-item {
  background: var(--win-bg);
  border: 1px inset #808080;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-item img {
  width: 100%;
  border: 1px solid #000;
  background: #fff;
  margin-bottom: 4px;
}

.text-center {
  text-align: center;
}



/* ============================================================
   MIKU gliku EFFECT & GREEN TINT
   ============================================================ */
.miku-gliku {
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
}

@keyframes gliku-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

#green-tint-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 255, 0, 0.12);

  pointer-events: none;

  z-index: 90000;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

#green-tint-overlay.active {
  opacity: 0.6;
}

#gliku-alert-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #0b0b0b;
  border: 3px solid #fff;
  color: #ff0000;
  font-family: 'Pixel Operator', monospace;
  font-size: 64px;
  font-weight: bold;
  padding: 32px 64px;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: none;
}

#gliku-alert-box.active {
  display: block;
  opacity: 1;
}



#canvas-wrapper {
  overflow: hidden;
  position: relative;
}


.datamosh-active {
  filter: url(#datamosh-filter) contrast(150%) saturate(150%);
}







/* ============================================================
   NOTIFICATION SYSTEM
   ============================================================ */
#system-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 280px;
  background: var(--win-bg);
  border: 2px solid var(--win-light); /* Bevel Highligh */
  border-right-color: var(--win-dark); /* Bevel Shadow */
  border-bottom-color: var(--win-dark); /* Bevel Shadow */
  box-shadow: 2px 2px 0 #000;
  padding: 4px;
  z-index: 9999999;
  display: none; /* Hidden by default */
  font-family: var(--font-main);
  font-size: 12px;
}

#system-notification .notif-title-bar {
  background: var(--title-bg);
  color: var(--title-text);
  padding: 2px 4px;
  font-weight: bold;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

#system-notification .notif-content {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icons for success/error */
.notif-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

/* Animations */
@keyframes slideUpFade {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.toast-animate {
  animation: slideUpFade 0.3s ease-out forwards;
}


.decorations {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; 
}

.decorations img {
  pointer-events: none;
}