/* ========================================
   INITIAL STARTING SCREENS
   ======================================== */
@font-face {
  font-family: 'myFont';
  src: url('fonts/ruritania/Ruritania.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
#starting-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: #ff007e;
  opacity: 1;
  transition: opacity 1s ease;
  z-index: 10000;
}
#starting-screen.fade-out {
  opacity: 0;
}
.starting-frame {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('/images/Worn_Silver_Metal_Frame_transparent.png') center / contain no-repeat;
}
.starting-frame .joker {
  width: 62%;
  height: 62%;
  object-fit: contain;
  z-index: 1;
}
.starting-frame p {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: white;
  font-size: 16px;
  text-align: center;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
/* ========================================
   SPLASH SCREEN
   ======================================== */
#splash {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
}
.splash-bg {
  position: absolute;
  inset: 0;
  background: url('images/brick.png') center / cover no-repeat;
  background-color: #3a3a3a;
}
.splash-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1020px, 200vw);
  height: min(1060px, 202vh);
  background: url('/images/banner.png') center / contain no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20%;
  box-sizing: border-box;
}
/* Metal frame + profile pic */
.profile-frame {
  position: relative;
  width: 190px;
  height: 190px;
  margin-bottom: 40px;
}
.profile-frame #profile-pic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68%;
  height: 68%;
  object-fit: cover;
  border-radius: 4px;
  z-index: 1;
}
.profile-frame .metal-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
/* Form */
#splash-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 240px;
  background: rgba(180, 180, 180, 0.55);
  padding: 12px 14px 14px;
  border-radius: 2px;
  backdrop-filter: blur(1px);
  margin-top: auto;
  margin-bottom: 40%;
  position: relative;
}
#splash-form .field {
  width: 100%;
}
#splash-form input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: none;
  background: white;
  font-size: 15px;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  outline: none;
}
#splash-form input::placeholder {
  color: #666;
}
.arrow-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #3aa0e8;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.arrow-btn:hover {
  background: #2b8ad0;
}
.arrow-btn:active {
  transform: scale(0.96);
}
/* ========================================
   DESKTOP
   ======================================== */
#home-desktop {
    display: none;
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000000 url(images/background/bumps.jpeg);
    overflow: hidden;
}
.image-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.main-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
  z-index: 2;
  pointer-events: none;
}
/* ========================================
   WINDOWS
   ======================================== */
.window {
    display: none;
    position: absolute;
    top: 50px;
    left: 50px;
    width: 400px;
    min-height: 200px;
    padding: 16px;
    background: white;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
    z-index: 800;
}
.window.maximized {
    top: 40px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 40px);
    border-radius: 0;
    z-index: 2000;
}
/* ========================================
   RESIZE HANDLE
   ======================================== */
.resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 15px;
    height: 15px;
    cursor: se-resize;
}
/* ========================================
   TOP MENU BAR
   ======================================== */
#menu-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #000000;
    border-bottom: 1px solid #333333;
    box-sizing: border-box;
    z-index: 2000;
}
/* ========================================
   CLOCK
   ======================================== */
#clock {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
}
/* ========================================
   USER NAME
   ======================================== */
#user-name {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
}
/* ========================================
   DESKTOP APP ICONS
   ======================================== */
#app-icons > div {
    position: absolute;
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: default;
}
/* APP IMAGE */
.app-images {
    width: 145px;
    height: 145px;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
/* APP NAME */
.app-label {
    margin-top: 5px;
    color: white;
    font-size: 14px;
    font-family: Arial, sans-serif;
    user-select: none;
    white-space: nowrap;
}
/* ========================================
   DESKTOP APP CONTAINERS
   ======================================== */
#app-icons > div {
    position: absolute;
}
/* ========================================
   DESKTOP ICON POSITIONS
   ======================================== */
#about {
  left: 50px;
  top: 50px;
}
#contact {
  left: 215px;
  top: 50px;
}
#shop {
  left: 380px;
  top: 50px;
}
#album-1 {
  left: 50px;
  top: 215px;
}
#album-2 {
  left: 215px;
  top: 215px;
}
#album-3 {
  left: 380px;
  top: 215px;
}
#album-4 {
  left: 50px;
  top: 380px;
}
#album-5 {
  left: 215px;
  top: 380px;
}
#settings {
  left: 380px;
  top: 380px;
}
#dice {
  left: 50px;
  top: 545px;
}
#video-player {
  left: 215px;
  top: 545px;
}
#audio-player {
  left: 380px;
  top: 545px;
}
/* ========================================
   TASKBAR
   ======================================== */
#taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    box-sizing: border-box;
    background: linear-gradient(
        to bottom,
        rgba(240, 240, 240, 0.95),
        rgba(205, 205, 205, 0.95)
    );
    border-top: 1px solid white;
    z-index: 1000;
}
/* ========================================
   TASKBAR BUTTONS
   ======================================== */
.taskbar-button {
    display: none;
    width: 60px;
    height: 60px;
    padding: 5px;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}
/* ========================================
   TASKBAR BUTTON IMAGES
   ======================================== */
.taskbar-button img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
/* ========================================
   TASKBAR BUTTON HOVER
   ======================================== */
.taskbar-button:hover {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.85),
        rgba(180, 220, 255, 0.55)
    );
    border: 1px solid rgba(100, 150, 190, 0.7);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        0 0 8px rgba(120, 190, 255, 0.5);
}
/* ========================================
   TASKBAR BUTTON ACTIVE
   ======================================== */
.taskbar-button:active {
    background: linear-gradient(
        to bottom,
        rgba(180, 210, 235, 0.8),
        rgba(150, 180, 205, 0.8)
    );
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* ========================================
   DESKTOP APP LABELS
   ======================================== */
.desktop-app {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.app-label {
    margin-top: 5px;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-align: center;
    user-select: none;
    pointer-events: none;
    text-shadow:
        1px 1px 2px black,
        -1px -1px 2px black;
}
/* ========================================
   AUDIO PLAYER APP
   ======================================== */
#media-player {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #d7d7d7;
    border: 2px solid #555;
    font-family: Arial, sans-serif;
}
#now-playing {
    display:flex;
    gap:20px;
}
#album-art-container {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    background: black;
}
#album-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#song-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#player-screen,
#progress-container,
#player-controls {
    flex-shrink: 0;
}
#current-time,
#duration {
    width: 35px;
    font-size: 12px;
    text-align: center;
}
#progress-bar {
    flex: 1;
    cursor: pointer;
}
#player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 12px;
}
#player-controls button {
    min-width: 60px;
    height: 35px;
    cursor: pointer;
    background: linear-gradient(
        to bottom,
        #eeeeee,
        #bbbbbb
    );
    border: 1px solid #777;
    border-radius: 3px;
    font-size: 16px;
}
#play-button {
    width: 65px;
    font-size: 20px;
}
#player-controls button:hover {
    background: linear-gradient(
        to bottom,
        #ffffff,
        #cccccc
    );
}
#player-controls button:active {
    background: #aaaaaa;
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.3);
}
#playlist {
    background: #eeeeee;
    border-top: 2px solid #555;
    max-height: 160px;
    overflow-y: auto;
}
.playlist-header {
    padding: 7px 10px;
    background: linear-gradient(
        to bottom,
        #ff00ae,
        #ff007e
    );
    color: white;
    font-weight: bold;
    border-bottom: 1px solid #555;
}
.playlist-song {
    display: block;
    width: 100%;
    padding: 8px 12px;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #ccc;
    background: #eeeeee;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}
#audio-player {
    display: none;
}
/* ========================================
   ALBUM 1 WINDOW
   ======================================== */
.window {
    display: none;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0;
    background-color: black;
    color: white;
    border: 2px solid white;
    border-radius: 8px;
    overflow: hidden;
}
.title-bar {
    flex-shrink: 0;
    background-color: black;
    color: white;
}
#album-1-content, #album-2-content, #album-3-content, #album-4-content {
    flex: 1;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    background-color: black;
    color: white;
    overflow: auto;
}
#album-1-content,
#album-1-content *, #album-2-content, #album-2-content *, #album-3-content, #album-3-content *, #album-4-content, #album-4-content *{
    color: white;
}
.title-bar {
    background: white;
    border: 1px solid #777;
    color: black;
}
.title-bar:hover {
    background: #eeeeee;
}
.album-gallery {
    display: grid;
    grid-template-columns: repeat(3, 150px);
    gap: 12px;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
.album-photo {
    width: 150px;
    height: 150px;
    overflow: hidden;
    background: black;
    border: 1px solid white;
    box-sizing: border-box;
    cursor: pointer;
}
.album-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.album-photo:hover img {
    transform: scale(1.05);
}
/* ========================================
   VIDEO PLAYER WINDOW
   ======================================== */
#video-player-window {
    display: none;
    flex-direction: column;
    width: 500px;
    height: 600px;
    padding: 0;
    box-sizing: border-box;
    background: #d7d7d7;
    border: 2px solid black;
    border-radius: 8px;
    overflow: hidden;
}
#video-player-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
}
#video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: black;
    flex-shrink: 0;
    overflow: hidden;
}
#video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: black;
}
#video-info {
    text-align: center;
    margin: 12px 0;
}
#video-title {
    margin: 0;
    font-size: 20px;
}
#video-artist {
    margin: 4px 0 0;
    font-size: 13px;
}
#video-progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
#video-progress-container span {
    font-size: 11px;
    min-width: 30px;
}
#video-duration {
    text-align: right;
}
#video-progress-bar {
    flex: 1;
    cursor: pointer;
}
#video-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 12px 0;
}
#video-controls button {
    width: 45px;
    height: 35px;
    border: 1px solid black;
    background: white;
    cursor: pointer;
}
#video-controls button:hover {
    background: #eeeeee;
}
#video-play-button {
    font-size: 18px;
}
#video-playlist {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-top: 1px solid black;
    padding-top: 8px;
}
.video-playlist-item {
    padding: 10px;
    border-bottom: 1px solid #999;
    cursor: pointer;
}
.video-playlist-item:hover {
    background: #eeeeee;
}
.video-playlist-item.active {
    font-weight: bold;
}
/* about window*/
#about-window {
    display: none;
    flex-direction: column;
    height: 460px;
    overflow: hidden;
    background: #1a1020 url("/images/background/tile.jpg");
    background-repeat: repeat;
    color: #f4efe6;
}
#about-window .window-content {
    flex: 1;
    min-height: 0;
    margin: 12px;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.8);
    color: #f4efe6;
}
#about-window .title-bar {
    background: rgba(0, 0, 0, 0.7);
    color: #f4efe6;
}
#about-window .window-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 12px auto;
    box-sizing: border-box;
}
.gif-row {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 16px;
}
.gif-row img {
    width: 48px;
    height: auto;
    margin: 0;
    image-rendering: pixelated;
}
/* album 1 window*/
#album-1-window {
    display: none;
    flex-direction: column;
    height: 460px;
    overflow: hidden;
    background: #1a1020 url("/images/background/stars.gif");
    background-repeat: repeat;
    color: #f4efe6;
}
#album-1-window .window-content {
    flex: 1;
    min-height: 0;
    margin: 12px;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.268);
    color: #f4efe6;
}
#album-1-window .title-bar {
    background: rgba(0, 0, 0, 0.7);
    color: #f4efe6;
}
#album-1-window .window-content img {
    display: block;
    max-width: 50%;
    height: auto;
    margin: 12px auto;
    box-sizing: border-box;
}
/* album 2 window*/
#album-2-window {
    display: none;
    flex-direction: column;
    height: 460px;
    overflow: hidden;
    background: #1a1020 url("/images/background/red.jpg");
    background-repeat: repeat;
    color: #000000;
}
#album-2-window .window-content {
    flex: 1;
    min-height: 0;
    margin: 12px;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.268);
    color: #000000;
}
#album-2-window .title-bar {
    background: rgba(0, 0, 0, 0.7);
    color: #f4efe6;
}
#album-2-window .window-content img {
    display: block;
    max-width: 50%;
    height: auto;
    margin: 12px auto;
    box-sizing: border-box;
}
/* album 3 window*/
#album-3-window {
    display: none;
    flex-direction: column;
    height: 460px;
    overflow: hidden;
    background: #1a1020 url("/images/background/marble.gif");
    background-repeat: repeat;
    color: #f4efe6;
}
#album-3-window .window-content {
    flex: 1;
    min-height: 0;
    margin: 12px;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.268);
    color: #f4efe6;
}
#album-3-window .title-bar {
    background: rgba(0, 0, 0, 0.7);
    color: #f4efe6;
}
#album-3-window .window-content img {
    display: block;
    max-width: 50%;
    height: auto;
    margin: 12px auto;
    box-sizing: border-box;
}
/* Settings*/
#home-desktop[data-wallpaper="bumps"] { background-image: url("images/background/bumps.jpeg"); }
#home-desktop[data-wallpaper="purple"] { background-image: url("images/background/purple.gif"); }
#home-desktop[data-wallpaper="red"] { background-image: url("images/background/red.jpg"); }
#home-desktop[data-wallpaper="scale"] { background-image: url("images/background/scale.gif"); }
#home-desktop[data-wallpaper="tile"] { background-image: url("images/background/tile.jpg"); }
#settings-window .swatches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
#settings-window .swatch {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px solid #3a3a3a;
    background: rgb(0, 0, 0);
    color: #fdfdfd;
    text-align: left;
}
#settings-window .swatch.is-on {
    border-color: #111;
    box-shadow: inset 0 0 0 1px #111;
}
#settings-window .swatch-preview {
    height: 1px;
    border: 1px solid #3a3a3a;
    background-color: #0a0a0a;
    background-position: center;
}
#settings-window .swatch-preview[data-wallpaper="girl"] { background-image: url("/images/background/girl.png");}
#settings-window .swatch-preview[data-wallpaper="sky"] { background-image: url("/images/background/sky.png");}
#settings-window .swatch-preview[data-wallpaper="esem"] { background-image: url("/images/background/esem.JPG");}
#settings-window .swatch-preview[data-wallpaper="mirror"] { background-image: url("/images/background/mirror.png");}
#settings-window .swatch-preview[data-wallpaper="hotel"] { background-image: url("/images/background/hotel.jpg");}
#settings-window .section-label {
    margin: 18px 0 8px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
#settings-window .fit-row {
    display: flex;
    gap: 8px;
}
#settings-window .fit-row button {
    flex: 1;
    min-height: 44px;
    border: 1px solid #3a3a3a;
    background: white;
    color: #111;
}
#settings-window .fit-row button.is-on {
    background: #111;
    color: #f4efe6;
}
body {
  font-family: 'myFont', sans-serif;
}
/* ========================================
   MOBILE OPTIMIZATION
   ======================================== */
@media (max-width: 480px) {
  /* Splash screen */
  .splash-banner {
    width: 92vw !important;
    height: 70vh !important;
    max-width: 92vw !important;
    max-height: 70vh !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding-top: 18vh !important;
    transform: translate(-50%, -50%) !important;
  }

  .splash-bg {
    background-size: cover !important;
    background-position: center !important;
  }

  .profile-frame {
    width: 100px !important;
    height: 100px !important;
    margin-bottom: 10px !important;
  }

  #splash-form {
    width: 160px !important;
    margin-bottom: 8vh !important;
  }

  /* Desktop wallpaper + overlays */
  #home-desktop {
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: scroll !important;
  }

  .image-container {
    height: 100vh !important;
    overflow: hidden;
  }

  .image-container img,
  .overlay,
  .overlay-2 {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Tighter mobile icon layout */
  #about { left: 20px !important; top: 50px !important; }
  #contact { left: 110px !important; top: 50px !important; }
  #album-1 { left: 200px !important; top: 50px !important; }
  #album-2 { left: 20px !important; top: 150px !important; }
  #album-3 { left: 110px !important; top: 150px !important; }
  #album-4 { left: 200px !important; top: 150px !important; }
  #album-5 { left: 20px !important; top: 250px !important; }
  #dice { left: 110px !important; top: 250px !important; }
  #settings { left: 200px !important; top: 250px !important; }
  #video-player { left: 20px !important; top: 350px !important; }
  #audio-player { left: 110px !important; top: 350px !important; }

  #app-icons > div {
    width: 80px;
  }

  .app-images {
    width: 64px;
    height: 64px;
  }

  .app-label {
    font-size: 11px;
  }

  /* Windows */
  .window {
    width: 96vw !important;
    max-width: 96vw !important;
    left: 2vw !important;
    top: 48px !important;
    max-height: 78vh !important;
  }

  .window.maximized {
    width: 100vw !important;
    height: calc(100vh - 48px) !important;
    left: 0 !important;
  }

  /* Taskbar */
  #taskbar {
    height: 54px;
  }

  .taskbar-button {
    width: 48px;
    height: 48px;
  }

  .taskbar-button img {
    width: 34px;
    height: 34px;
  }
}

/* Single-tap on phones */
@media (hover: none) and (pointer: coarse) {
  #app-icons > div,
  .app-images {
    touch-action: manipulation;
    cursor: pointer;
  }
}