/* ==========================================================================
   1. FONTS & THEME VARIABLES
   ========================================================================== */
@font-face {
  font-family: 'Silkscreen';
  src: url('../fonts/slkscr.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Silkscreen', monospace, sans-serif;
  font-size: 10px;

  /* Crisp rendering for pixel fonts */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* Theme Definitions */
:root[data-theme="ocean"] {
  --bg-image: url('../backgrounds/ocean.gif');
  --panel-bg: rgba(255, 255, 255, 0.45);
  --panel-border: #7db3d8;
  --text-color: #0b2233;
  --text-outline: #ffffff;
  --link-hover: #d84374;
  --bullet-color: #d84374;
  --iframe-bg: rgba(255, 255, 255, 0.65);
  --button-bg: rgba(255, 219, 230, 0.75);
}

:root[data-theme="castle"] {
  --bg-image: url('../backgrounds/castle.gif');
  --panel-bg: rgba(18, 12, 31, 0.45);
  --panel-border: #9a6bbd;
  --text-color: #f1e4ff;
  --text-outline: #000000;
  --link-hover: #ffd700;
  --bullet-color: #ffd700;
  --iframe-bg: rgba(12, 8, 20, 0.45);
  --button-bg: rgba(61, 34, 84, 0.75);
}

:root[data-theme="aurora"] {
  --bg-image: url('../backgrounds/aurora.gif');
  --panel-bg: rgba(40, 20, 55, 0.45);
  --panel-border: #a272c2;
  --text-color: #f3e5ff;
  --text-outline: #1c0a2a;
  --link-hover: #50e3c2;
  --bullet-color: #50e3c2;
  --iframe-bg: rgba(30, 15, 45, 0.45);
  --button-bg: rgba(90, 45, 125, 0.75);
}

:root[data-theme="autumn"] {
  --bg-image: url('../backgrounds/autumn.gif');
  --panel-bg: rgba(255, 243, 224, 0.45);
  --panel-border: #d97724;
  --text-color: #3e1f04;
  --text-outline: #ffffff;
  --link-hover: #c0392b;
  --bullet-color: #c0392b;
  --iframe-bg: rgba(255, 248, 238, 0.45);
  --button-bg: rgba(255, 218, 185, 0.75);
}

:root[data-theme="magic"] {
  --bg-image: url('../backgrounds/magic.gif');
  --panel-bg: rgba(5, 20, 50, 0.45);
  --panel-border: #3498db;
  --text-color: #e0f7fa;
  --text-outline: #000000;
  --link-hover: #00ffff;
  --bullet-color: #00ffff;
  --iframe-bg: rgba(2, 12, 32, 0.45);
  --button-bg: rgba(21, 67, 96, 0.75);
}

:root[data-theme="city"] {
  --bg-image: url('../backgrounds/city.gif');
  --panel-bg: rgba(10, 25, 47, 0.45);
  --panel-border: #4682b4;
  --text-color: #e6f1ff;
  --text-outline: #000000;
  --link-hover: #f1c40f;
  --bullet-color: #f1c40f;
  --iframe-bg: rgba(5, 15, 30, 0.45);
  --button-bg: rgba(23, 42, 69, 0.75);
}

:root[data-theme="cottage"] {
  --bg-image: url('../backgrounds/cottage.gif');
  --panel-bg: rgba(240, 255, 240, 0.45);
  --panel-border: #77dd77;
  --text-color: #1b4332;
  --text-outline: #ffffff;
  --link-hover: #e056fd;
  --bullet-color: #e056fd;
  --iframe-bg: rgba(245, 255, 245, 0.45);
  --button-bg: rgba(216, 243, 220, 0.75);
}

:root[data-theme="calm"] {
  --bg-image: url('../backgrounds/calm.gif');
  --panel-bg: rgba(45, 10, 45, 0.45);
  --panel-border: #da70d6;
  --text-color: #ffe6ff;
  --text-outline: #000000;
  --link-hover: #00ffff;
  --bullet-color: #00ffff;
  --iframe-bg: rgba(30, 5, 30, 0.45);
  --button-bg: rgba(85, 20, 85, 0.75);
}

:root[data-theme="blueocean"] {
  --bg-image: url('../backgrounds/blueocean.gif');
  --panel-bg: rgba(10, 35, 60, 0.55);
  --panel-border: #3a8ec7;
  --text-color: #e0f2fe;
  --text-outline: #021526;
  --link-hover: #38bdf8;
  --bullet-color: #38bdf8;
  --iframe-bg: rgba(8, 28, 48, 0.55);
  --button-bg: rgba(20, 60, 95, 0.75);
}

:root[data-theme="campnight"] {
  --bg-image: url('../backgrounds/campnight.gif');
  --panel-bg: rgba(15, 23, 20, 0.55);
  --panel-border: #4e8766;
  --text-color: #e2f1e7;
  --text-outline: #09120d;
  --link-hover: #f59e0b;
  --bullet-color: #f59e0b;
  --iframe-bg: rgba(10, 18, 15, 0.55);
  --button-bg: rgba(28, 50, 40, 0.75);
}

:root[data-theme="beachset"] {
  --bg-image: url('../backgrounds/beachset.gif');
  --panel-bg: rgba(255, 235, 220, 0.50);
  --panel-border: #f4a261;
  --text-color: #4a2810;
  --text-outline: #ffffff;
  --link-hover: #e76f51;
  --bullet-color: #e76f51;
  --iframe-bg: rgba(255, 240, 230, 0.55);
  --button-bg: rgba(252, 213, 180, 0.75);
}

:root[data-theme="dreamy"] {
  --bg-image: url('../backgrounds/dreamy.gif');
  --panel-bg: rgba(45, 25, 55, 0.50);
  --panel-border: #c084fc;
  --text-color: #f5e8ff;
  --text-outline: #1e0b2e;
  --link-hover: #f472b6;
  --bullet-color: #f472b6;
  --iframe-bg: rgba(35, 18, 45, 0.50);
  --button-bg: rgba(80, 40, 100, 0.75);
}

:root[data-theme="mystic"] {
  --bg-image: url('../backgrounds/mystic.gif');
  --panel-bg: rgba(20, 15, 40, 0.55);
  --panel-border: #818cf8;
  --text-color: #e0e7ff;
  --text-outline: #0c0824;
  --link-hover: #a78bfa;
  --bullet-color: #a78bfa;
  --iframe-bg: rgba(15, 10, 32, 0.55);
  --button-bg: rgba(45, 30, 85, 0.75);
}

:root[data-theme="rainbow"] {
  --bg-image: url('../backgrounds/rainbow.gif');
  --panel-bg: rgba(255, 240, 245, 0.55);
  --panel-border: #f472b6;
  --text-color: #3b0764;
  --text-outline: #ffffff;
  --link-hover: #38bdf8;
  --bullet-color: #f472b6;
  --iframe-bg: rgba(255, 245, 250, 0.60);
  --button-bg: rgba(254, 205, 225, 0.75);
}

:root[data-theme="homey"] {
  --bg-image: url('../backgrounds/homey.gif');
  --panel-bg: rgba(245, 238, 225, 0.55);
  --panel-border: #a88b72;
  --text-color: #3d2b1f;
  --text-outline: #ffffff;
  --link-hover: #8b5a2b;
  --bullet-color: #8b5a2b;
  --iframe-bg: rgba(250, 245, 235, 0.60);
  --button-bg: rgba(230, 215, 195, 0.75);
}

:root[data-theme="ducktown"] {
  --bg-image: url('../backgrounds/ducktown.gif');
  --panel-bg: rgba(200, 245, 255, 0.55);
  --panel-border: #29b6f6;
  --text-color: #02577a;
  --text-outline: #ffffff;
  --link-hover: #ff9800;
  --bullet-color: #ff9800;
  --iframe-bg: rgba(220, 250, 255, 0.60);
  --button-bg: rgba(180, 235, 255, 0.75);
}

:root[data-theme="dinos"] {
  --bg-image: url('../backgrounds/dinos.gif');
  --panel-bg: rgba(235, 247, 220, 0.55);
  --panel-border: #7cb342;
  --text-color: #2e5b09;
  --text-outline: #ffffff;
  --link-hover: #d81b60;
  --bullet-color: #7cb342;
  --iframe-bg: rgba(240, 250, 230, 0.60);
  --button-bg: rgba(215, 240, 190, 0.75);
}

:root[data-theme="yellowroom"] {
  --bg-image: url('../backgrounds/yellowroom.gif');
  --panel-bg: rgba(255, 252, 225, 0.60);
  --panel-border: #fbc02d;
  --text-color: #5d4037;
  --text-outline: #ffffff;
  --link-hover: #7cb342;
  --bullet-color: #fbc02d;
  --iframe-bg: rgba(255, 253, 235, 0.65);
  --button-bg: rgba(255, 245, 200, 0.75);
}

:root[data-theme="treehouse"] {
  --bg-image: url('../backgrounds/treehouse.gif');
  --panel-bg: rgba(255, 240, 245, 0.55);
  --panel-border: #f06292;
  --text-color: #4a148c;
  --text-outline: #ffffff;
  --link-hover: #ffb300;
  --bullet-color: #f06292;
  --iframe-bg: rgba(255, 245, 248, 0.60);
  --button-bg: rgba(255, 215, 230, 0.75);
}

:root[data-theme="sink"] {
  --bg-image: url('../backgrounds/sink.gif');
  --panel-bg: rgba(240, 248, 255, 0.60);
  --panel-border: #4fc3f7;
  --text-color: #1a3644;
  --text-outline: #ffffff;
  --link-hover: #ec407a;
  --bullet-color: #4fc3f7;
  --iframe-bg: rgba(245, 250, 255, 0.65);
  --button-bg: rgba(215, 240, 255, 0.75);
}

:root[data-theme="sakura"] {
  --bg-image: url('../backgrounds/sakura.gif');
  --panel-bg: rgba(255, 235, 240, 0.55);
  --panel-border: #e91e63;
  --text-color: #4a0e17;
  --text-outline: #ffffff;
  --link-hover: #66bb6a;
  --bullet-color: #e91e63;
  --iframe-bg: rgba(255, 240, 245, 0.60);
  --button-bg: rgba(255, 210, 225, 0.75);
}

:root[data-theme="quiet"] {
  --bg-image: url('../backgrounds/quiet.gif');
  --panel-bg: rgba(225, 245, 238, 0.55);
  --panel-border: #26a69a;
  --text-color: #00332c;
  --text-outline: #ffffff;
  --link-hover: #0288d1;
  --bullet-color: #26a69a;
  --iframe-bg: rgba(235, 250, 245, 0.60);
  --button-bg: rgba(200, 235, 225, 0.75);
}

:root[data-theme="pinkyplane"] {
  --bg-image: url('../backgrounds/pinkyplane.gif');
  --panel-bg: rgba(255, 230, 242, 0.55);
  --panel-border: #ff4081;
  --text-color: #5c0628;
  --text-outline: #ffffff;
  --link-hover: #ffb300;
  --bullet-color: #ff4081;
  --iframe-bg: rgba(255, 240, 248, 0.60);
  --button-bg: rgba(255, 205, 230, 0.75);
}

:root[data-theme="perfume"] {
  --bg-image: url('../backgrounds/perfume.gif');
  --panel-bg: rgba(240, 230, 255, 0.55);
  --panel-border: #ab47bc;
  --text-color: #31004a;
  --text-outline: #ffffff;
  --link-hover: #26c6da;
  --bullet-color: #ab47bc;
  --iframe-bg: rgba(245, 238, 255, 0.60);
  --button-bg: rgba(225, 205, 250, 0.75);
}

:root[data-theme="hearts"] {
  --bg-image: url('../backgrounds/hearts.gif');
  --panel-bg: rgba(35, 12, 55, 0.55);
  --panel-border: #9c27b0;
  --text-color: #f3e5f5;
  --text-outline: #120022;
  --link-hover: #ea80fc;
  --bullet-color: #ea80fc;
  --iframe-bg: rgba(25, 8, 40, 0.55);
  --button-bg: rgba(65, 25, 100, 0.75);
}

/* ==========================================================================
   2. LAYOUT & TEXT BORDERS
   ========================================================================== */
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: var(--text-color);
  background-image: var(--bg-image);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  display: flex;
}

.pixel-text-border {
  text-shadow: 
    -1px -1px 0 var(--text-outline),
     1px -1px 0 var(--text-outline),
    -1px  1px 0 var(--text-outline),
     1px  1px 0 var(--text-outline);
}

/* ==========================================================================
   3. NAVIGATION SIDEBAR & DOCKED BUTTONS
   ========================================================================== */
#sidebar {
  width: 230px;
  height: 100vh;
  background: var(--panel-bg);
  border-left: 2px solid var(--panel-border);
  border-right: none;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 10;
  backdrop-filter: blur(2px);
  order: 2;
}

.dock-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  background: var(--button-bg);
  border: 2px solid var(--panel-border);
  color: var(--text-color);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.2;
  font-weight: bold;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: filter 0.1s;
}

.dock-btn:hover {
  filter: brightness(1.1);
}

.dock-btn span {
  flex: 1;
  text-align: left;
}

.dock-img {
  flex-shrink: 0;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.top-dock .dock-img {
  width: 12px;
  height: 20px;
  object-fit: contain;
}

.bottom-dock .dock-img {
  width: 12px;
  height: 20px;
}

.menu-tree-container {
  flex: 1;
  margin: 6px 0;
  overflow-y: auto;
  padding-right: 4px;
  direction: ltr;
}

.menu-tree summary::-webkit-details-marker {
  display: none;
}

.menu-tree summary,
.menu-tree a {
  text-transform: none;
  line-height: 1.4;
}

.menu-tree summary {
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  padding: 2px 0;
  white-space: nowrap;
}

.menu-tree summary::before {
  content: "📁 ";
  font-size: 15px;
}

.menu-tree details[open] > summary::before {
  content: "📂 ";
  font-size: 15px;
}

.tree-branch {
  list-style: none;
  padding-left: 10px;
  margin: 2px 0;
  border-left: 1px solid var(--panel-border);
}

.tree-branch li {
  margin: 2px 0;
  white-space: nowrap;
}

.tree-branch li a {
  font-size: 12px;
  color: var(--text-color);
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.tree-branch li a::before {
  content: "♥ ";
  color: var(--bullet-color);
  font-size: 10px;
  margin-right: 2px;
}

.tree-branch a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Badge Inline Alignment */
.new-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  height: 11px;
  width: auto;
  white-space: nowrap;
}

/* ==========================================================================
   4. MAIN VIEWPORT, HEADER, PAGE INFO & PAGINATION
   ========================================================================== */
#main-content {
  flex: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 16px 110px 16px;
  gap: 8px;
  order: 1;
}

#page-title-display {
  width: 100%;
  max-width: 1600px;
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  padding: 6px;
  text-align: center;
  font-size: 24px;
  line-height: 1.2;
  backdrop-filter: blur(2px);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

/* Page Info Description Container */
#page-info-display {
  width: 100%;
  max-width: 1600px;
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  padding: 6px 10px;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  backdrop-filter: blur(2px);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iframe-wrapper {
  width: 100%;
  max-width: 1600px;
  height: 75%;
  background: var(--iframe-bg);
  border: 2px solid var(--panel-border);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Fixed-Height Pagination Control Display Bar */
#page-controls-display {
  width: 100%;
  max-width: 1600px;
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  padding: 4px 6px;
  text-align: center;
  backdrop-filter: blur(2px);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  height: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#pagination-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-num-btn {
  background: var(--button-bg);
  border: 1px solid var(--panel-border);
  color: var(--text-color);
  padding: 3px 10px;
  cursor: pointer;
  font-size: 15px;
  font-family: 'Silkscreen', monospace;
  line-height: 1.2;
}

.page-num-btn.active {
  background: var(--link-hover);
  color: #ffffff;
  font-weight: bold;
}

.page-num-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==========================================================================
   5. FLOATY RANDOM PAGE CHEST (DVD SCREENSAVER BOUNCER)
   ========================================================================== */
#floaty-chest {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  cursor: pointer;
  user-select: none;
  will-change: transform;
}

#floaty-chest img {
  width: 100px;
  height: 120px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  display: block;
}

/* ==========================================================================
   6. BOTTOM MOOD SWITCHER (CENTERED RELATIVE TO MAIN CONTENT)
   ========================================================================== */
#theme-switcher {
  position: fixed;
  bottom: 8px;
  left: calc(50vw - 115px); /* Centers relative to iframe area, compensating for 230px sidebar */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 100;
  width: auto;
  pointer-events: none;
}

.switcher-title {
  font-size: 15px;
  letter-spacing: 1px;
  pointer-events: auto;
}

.button-group {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-width: calc(100vw - 260px);
  overflow-x: auto;
  padding: 4px 8px;
  pointer-events: auto;
  
  /* Hide scrollbars visually while maintaining scroll function */
  scrollbar-width: thin;
}

.button-group::-webkit-scrollbar {
  height: 4px;
}

.button-group::-webkit-scrollbar-thumb {
  background: var(--panel-border);
  border-radius: 2px;
}

.mood-btn {
  width: 50px;
  height: 100px;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  transition: transform 0.2s;
}

.mood-btn:hover {
  transform: scale(1.08);
}

.btn-ocean      { background-image: url('../buttons/thumb-ocean.png'); }
.btn-castle     { background-image: url('../buttons/thumb-castle.png'); }
.btn-aurora     { background-image: url('../buttons/thumb-aurora.png'); }
.btn-autumn     { background-image: url('../buttons/thumb-autumn.png'); }
.btn-magic      { background-image: url('../buttons/thumb-magic.png'); }
.btn-city       { background-image: url('../buttons/thumb-city.png'); }
.btn-cottage    { background-image: url('../buttons/thumb-cottage.png'); }
.btn-calm       { background-image: url('../buttons/thumb-calm.png'); }
.btn-blueocean { background-image: url('../buttons/thumb-blueocean.png'); }
.btn-campnight { background-image: url('../buttons/thumb-campnight.png'); }
.btn-beachset  { background-image: url('../buttons/thumb-beachset.png'); }
.btn-dreamy    { background-image: url('../buttons/thumb-dreamy.png'); }
.btn-mystic     { background-image: url('../buttons/thumb-mystic.png'); }
.btn-rainbow    { background-image: url('../buttons/thumb-rainbow.png'); }
.btn-homey      { background-image: url('../buttons/thumb-homey.png'); }
.btn-ducktown   { background-image: url('../buttons/thumb-ducktown.png'); }
.btn-dinos      { background-image: url('../buttons/thumb-dinos.png'); }
.btn-yellowroom { background-image: url('../buttons/thumb-yellowroom.png'); }
.btn-treehouse  { background-image: url('../buttons/thumb-treehouse.png'); }
.btn-sink       { background-image: url('../buttons/thumb-sink.png'); }
.btn-sakura     { background-image: url('../buttons/thumb-sakura.png'); }
.btn-quiet      { background-image: url('../buttons/thumb-quiet.png'); }
.btn-pinkyplane { background-image: url('../buttons/thumb-pinkyplane.png'); }
.btn-perfume   { background-image: url('../buttons/thumb-perfume.png'); }
.btn-hearts    { background-image: url('../buttons/thumb-hearts.png'); }