/* ------------------------------------------------------ 
Hey, there!
My code is a bit messy but I'm working on it hehe
Some parts are in spanish (my 1st language) and some in english...
I just write in whichever I think of first lol 
--------------------------------------------------------- */

/* Importing google font */
@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* Fonts */
  --primary-font: 'Raleway', sans-serif;
  --heading-font: 'Amaranth', sans-serif;

  /* Colors */
  --accent: #8d3f3f;
  --accent-2: #ff83a2;
  --background: #4bd6e2;
  --preloader-bg: #ffb75f;
  --divider: #f4d3e8;
  --heading:  rgb(187, 94, 94);
  --footer-bg: #793056;
  --footer-text: #c27283;
  --panel-bg: #ffffff;
  --panel-border: #f6c9b9;
  --muted: #6c4f6d;
  --text: #222;
  --link: #3c2a3a;
  --link-hover-bg: #f2f2f2;
  --dropdown-bg: #ffffff;
  --navtxt: rgb(161, 83, 83);;

  /* Gradients */
  --gradient-left: linear-gradient(360deg, rgb(217, 94, 178) 0%, #fbbf5d 100%);
  --gradient-right: linear-gradient(360deg, #fbbf5d, rgb(217, 94, 178));
  --gradient-btn: linear-gradient(90deg, var(--accent), var(--accent-2));
  --gradient-heading: linear-gradient(0deg, rgb(255, 227, 117) 15%, rgb(255, 90, 107) 100%);

  /* Layout */
  --maxwidth: 1250px; /*page width*/
  --gutter: 16px;
  --radius: 12px;

  /* Shadows */
  --shadow-light: 0 6px 12px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 6px 18px rgba(14, 12, 20, 0.04);
  --shadow-panel: 0 6px 18px rgba(14, 12, 20, 0.125);

  /* Sizes */
  --avatar-size: 40px;
  --mini-avatar-size: 56px;
  --banner-height: 350px;
  --font-small: 13px;
  --font-base: 15px;
  --font-h1: 1.6rem;
  --font-h2: 1.3rem;

  /* Cursor */
  --cursor-url: url("https://cur.cursors-4u.net/food/foo-6/foo523.cur"), auto;
}


/* Reset default spacing */
html, body {
  margin: 0;
  padding: 0;
}

/* General background adjustments */
html, body {
  height: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
  align-items: flex-start;
 
  position: relative; /* Ensure the body element is a positioning context */
}


body {
  font-family: var(--primary-font);
  color: var(--accent);
  cursor: var(--cursor-url) !important;
  background-color: var(--background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'%3E%3Cpath fill='%239dedda' fill-opacity='0.4' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'%3E%3C/path%3E%3C/svg%3E");
  animation: moveBg 40s linear infinite;
}

/* Hover cursor */
a {
  cursor: var(--cursor-url) !important;
}

@keyframes moveBg {
  from { background-position: 0 0; }
  to { background-position: -100% -100%; }
}

/* Preloader */
#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--preloader-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loader {
  font-size: 3.12rem;
  color: #fff;
  animation: zoomInOut 1s ease-in-out infinite;
}

@keyframes zoomInOut {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.gradient-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255, 132, 132, 0.658), rgba(255, 183, 147, 0) 90%);
  z-index: -10;
}


a {
  color:rgb(187, 94, 94);
  text-decoration: none;
  font-family: var(--heading-font);
}

a:hover {
  color: #f19721;
}

#sitemap a {
  font-weight:500;
  padding: 0em 25em 0em 1em;
}

#sitemap a:hover {
  background-color: #f7b6ae28;
}

/* CUSTOM LIST STYLES */
ol {
  counter-reset: ol-counter; /* reset counter for each list */
  list-style: none;          /* remove default numbers */
  padding-left: 1em;         /* space for the numbers */
  margin-bottom: 1em;
}

ol li {
  counter-increment: ol-counter; /* increment the counter for each li */
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 1.5em;          /* space between circle and text */
}

ol li::before {
  content: counter(ol-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;           /* make it a circle */
  background-color: #60ced8;    /* circle */
  color: white;                 /* number color */
  text-align: center;
  font-weight: bold;
  font-family: var(--heading-font);
  font-size: small;
}


ul {
  list-style: none; /* remove default bullets */
  padding-left: 1.2em; /* give space for custom symbol */
}

ul li::before {
  content: "✦";
  color: #ff8c42;
  margin-right: 6px;
  font-size: 0.9em;
  display: inline-block;
  width: 1em;
}


/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--heading);
  margin-top: 8px;
  margin-bottom: 4px;
}

h1 {
  font-size: var(--font-h1);
  text-align: center;
  font-weight: bolder;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 { font-size: var(--font-h2); }

hr {
  border: 1px solid var(--divider);
  border-radius: 5px;
}

/* h2 scrapbook style {
  display: inline-block;
  padding: 6px 14px;
  margin: 2em auto 1em;
  background: #fff4ec;
  border: 2px dashed #e39764;
  border-radius: 12px;
  color: var(--heading);
  font-weight: bold;
  box-shadow: 3px 3px 0px #e39764;
} */

/* gradient */
.myh {
  margin: 1em 0 1em 0; /* top 1em, right 0, bottom 1em, left 0 */
  padding: 0.6em;
  color: #fff;
  background: linear-gradient(90deg, rgb(217, 94, 178), #fbbf5d);
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  
  border-radius: 2px;    /* rounded edges for a nice effect */
  padding-left: 8px;     /* more spacing inside */
  padding-right: 8px;
}


.section-box {
  background: rgba(255, 255, 255, 0.85); /* semi-transparent panel */
  border-radius: 8px;
  padding: 10px;
  margin: 20px 0;
  border: 2px solid rgba(255,197,167,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative; /* for positioning the title bar */
}

.section-content img {
  display: block;   /* remove default inline spacing */
  margin: 0;        /* remove default margin */
  padding: 0;       /* remove padding */
}

.section-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}

/* Title integrated into section box */
.section-title {
  font-family: var(--heading-font);
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, rgb(217, 94, 178), #fbbf5d);
  padding: 0.6em 12px;
  border-radius: 8px 8px 0 0; /* rounded top corners */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* Add top padding to content so it doesn’t overlap the title */
.section-content {
  margin-top: 3em; /* adjust based on title height */
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}



/* ===== Custom Scrollbar ===== */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  background: var(--heading); /* track color */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #ffc472; /* thumb color */
  border-radius: 10px;
  border: 2px solid var(--heading);
}

::-webkit-scrollbar-thumb:hover {
  background: #ffe2b7; /* hover color */
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #ffc472 var(--heading);
}


/* Dropdown */
.dropdown { position: relative; display: inline-block; }

.dropbtn {
  font-family: var(--heading-font);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 16px;
  color: var(--navtxt);
  background: transparent;
  border: none;
}

.dropbtn:hover { color: rgb(49, 219, 219); }

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  margin-top: -2px;
  background-color: var(--dropdown-bg);
  min-width: 160px;
  box-shadow: var(--shadow-light);
  border-radius: 6px;
  z-index: 1000;
}

.dropdown-content a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 14px;
  box-shadow: var(--shadow-panel);
}

.dropdown-content a:hover { background-color: var(--link-hover-bg); }

.dropdown:hover .dropdown-content { display: block; }

/* Wrap */
.wrap {
  max-width: var(--maxwidth);
  min-width: var(--maxwidth);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--gutter) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Fireflies container */
.fireflies {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden; /*keeps random positions inside bounds*/
  pointer-events: none; /*to avoid interfering with clicks*/
  z-index: 2; 
  }
  
  .firefly {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 238, 0.17);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 176, 0.17);
  animation: move 5s linear infinite, glow 2s ease-in-out infinite;
  }
  
  @keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(calc(100vw * var(--dx)), calc(100vh * var(--dy)));
  }
  }
  
  @keyframes glow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  }
  
  /* Visual Novel Scene */
#vn-scene {
  background: linear-gradient(to bottom, #15002c, #ff758c);
  position: fixed;   /* cubre toda la pantalla */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center; /* centra verticalmente */
  justify-content: center; /* centra horizontalmente */
  overflow: hidden;
  z-index: 1; 
}


/* Landing Page */
.hidden {
  display: none !important;
}

#landing-page {
  display: none; /* oculto hasta que se muestre */
  position: relative;
  z-index: 10; /* más alto que vn-scene cuando se muestre */
  width: 100%;
  height: 100vh; /* ocupa toda la pantalla */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  
}


.dialogue-box {
background-color: rgba(255, 255, 255, 0.821);
padding: 20px;
border-radius: 10px;
width: 60%;
position: relative;
color: rgb(106, 46, 94);
font-style: italic;
z-index: 2;
}

#continue-button {
  display: block;
  margin: 10px auto 0 auto; /* top 10px, auto left/right centers it */
  align-items: center;  /* vertically centers the icon and text */
  justify-content: center; /* horizontally centers */
  margin-top: 10px;
  cursor: pointer;
  animation: blink2 1s infinite;
  background-color: rgb(231, 214, 214);
  color: #7c2d43;
  border-radius: 8px;
  padding: 8px 12px; /* a bit more padding for click area */
  border: none; /* removes default button border */
  font-size: 1rem;
  font-family: var(--heading-font);
}


@keyframes blink2 {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}

#ButtonHov {
  position: relative;
  width: 220px;
  height: 220px;
}

#ButtonHov img {
  position: absolute;
  top: 0;
  left: 0;
}


/* book hover btn */
.hover-btn {
  display: inline-block;
  position: relative;  /* Stack images */
  width: 160px;        
  height: 120px;       
  cursor: pointer;
  overflow: hidden;    /* hide anything outside */
  transition: transform 0.2s ease, filter 0.2s ease;
}

.hover-btn img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 0.2s ease; /* smooth fade */
}

.hover-btn img.hover {
  opacity: 0;  /* Hidden by default */
}

.hover-btn:hover img.hover {
  opacity: 1;  /* Show hover image */
}

.hover-btn:hover img.idle {
  opacity: 0;  /* Hide idle image */
}

/* optional: scale button on hover */
.hover-btn:hover {
  transform: scale(1.05) rotate(2deg);
  filter: brightness(1.15);
}

/*draggable sticker thing*/
#sticker-drag {
  position: absolute;
  z-index: 6;
  cursor: move;
  transition: transform 0.2s ease, brightness 0.2s ease; 
  left: 2%;
  top: 1.5%;
}

#sticker-drag:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  filter: brightness(1.1); /* Make it lighter */
}

/* Tooltip styling */
#sticker-drag::after {
  content: "Psst! Drag me!"; /* Tooltip text */
  position: absolute;
  bottom: 100%; /* Position above the sticker */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none; /* Prevent tooltip from interfering with dragging */
}

#sticker-drag:hover::after {
  opacity: 1;
}

/* Idle wiggle animation */
@keyframes idleWiggle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-5px) rotate(-5deg); }
  40% { transform: translateX(5px) rotate(5deg); }
  60% { transform: translateX(-3px) rotate(-3deg); }
  80% { transform: translateX(3px) rotate(3deg); }
}

/* The class JS toggles */
#sticker-drag.idle-animate {
  animation: idleWiggle 0.6s ease-in-out;
}


#stampys {
  width: 125px;
  border-radius: 8px;
  scrollbar-width: thin;
  scrollbar-color: #fff0d5 #ffc472a0;
}

/* Scrollable Content Box (Left) */
.scrollable-content {
flex: 0 0 450px; /* Fixed width of 300px */
height: 233px; /* Fixed height of 200px */
margin: 20px;
padding: 20px;
background-color: #fff;
color: #333;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
overflow-y: auto;
}

.scrollable-content h2 {
margin-top: 0;
}

  
  /*Feed Container - landing page*/
  .feed-container {
  max-height: 80px; 
  overflow-y: auto; /* Enable vertical scrolling */
  padding: 10px;
  background-color: rgba(101, 242, 239, 0.284); 
  border-radius: 8px; /* Rounded corners */
  scrollbar-width: thin; /* For modern browsers */
  scrollbar-color: #d7f5fa #96deeb; /* Custom scrollbar colors */
  font-size: 0.9rem;
  text-align: justify;
  color: #0d8c98;
  }
  
  .feed-container::-webkit-scrollbar {
  width: 8px; /* Scrollbar width */
  }
  
  .feed-container::-webkit-scrollbar-thumb {
  background: #FAEBD7; /* Scrollbar color */
  border-radius: 4px;
  }
  
  .feed-container::-webkit-scrollbar-track {
  background: #EB9896; /* Scrollbar track color */
  }

  /* When #updates-feed is inside .feed-container, remove its scrollbar */
.feed-container #updates-feed {
  max-height: none;     /* allow it to grow naturally inside container */
  overflow: visible;    /* inner div won’t scroll */
}

/* web updates - homepage */
#updates {
  max-width: 600px;
  margin: 4px auto;
  padding: 10px;
  background: #a0f9ff;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.update .date {
  display: flex;
  align-items: center;
  gap: 8px;
}

.update .update-icon {
  width: 20px; 
  height: auto;    /* keeps the aspect ratio */
  border-radius: 6px;
}


#updates-feed {
  max-height: 153px; /* makes it scrollable */
  overflow-y: auto;
  padding-right: 10px; /* space for scrollbar */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Custom scrollbar for #updates-feed */
#updates-feed::-webkit-scrollbar {
  width: 8px;           /* scrollbar width */
}

#updates-feed::-webkit-scrollbar-track {
  background: #ffc472;  /* track color (matches container) */
  border-radius: 8px;   /* round corners */
}

#updates-feed::-webkit-scrollbar-thumb {
  background: #ffffff;  /* the draggable part (orange) */
  border-radius: 8px;   /* round corners */
  transition: background 0.2s ease;
}

#updates-feed::-webkit-scrollbar-thumb:hover {
  background: #ffc472;  /* darker on hover */
}

#updates-feed {
  scrollbar-width: thin;
  scrollbar-color: #ffffff #ffc472;
}

/* Each update block */
.update {
  background: #ccffff;
  padding: 6px;
  border-radius: 3px;
  transition: transform 0.2s ease;
}

.update:hover {
  transform: scale(1.01);
}

.update .date {
  font-size: 12px;
  color: rgb(221, 184, 105);
  margin-bottom: 5px;
  font-family: var(--heading-font);
}

.update .content {
  font-size: 14px;
  color: rgb(67, 171, 209);
  text-align: justify;
}


/* Image Button Container */
.image-button {
  flex: 0 0 650px;
  height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Hover-style button inside */
.hover-btn-img {
  display: inline-block;
  position: relative;
  width: 600px;
  height: 610px;
  overflow: hidden;
  cursor: url("https://cur.cursors-4u.net/food/foo-6/foo523.cur"), auto;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Idle and Hover Images */
.hover-btn-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 0.3s ease;
}

.hover-btn-img img.hover {
  opacity: 0; /* hidden by default */
}

/* Swap images on hover */
.hover-btn-img:hover img.hover {
  opacity: 1;
}
.hover-btn-img:hover img.idle {
  opacity: 0;
}

/* Optional: subtle zoom & brightness */
.hover-btn-img:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}


/* Banner */
.banner {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  margin: 0;     
  overflow: hidden;
  border: none;
  box-shadow: var(--shadow-medium);
  height: var(--banner-height);
  position: relative; /* important for socials positioning */
/* Make banner span the whole screen */
  width: 100vw;       /* full viewport width */
  max-width: 100vw;   /* override wrap constraint */
  margin-left: calc(-1 * (100vw - 100%) / 2); /* fix centering issues */
}

.banner img {
  width: 100%; 
  height: 100%;
  object-fit: cover;
  object-position: center 90%;
  display: block;
  z-index: 1;
}

/* Social icons overlay */
.banner .socials {
  position: absolute;
  bottom: 10px;
  right: 65px;
  display: flex;
  gap: 10px;
}

.banner .socials a {
  color: white;             
  font-size: 1.7rem;/* icon size */
  transition: transform 0.2s ease, color 0.2s ease;
}

.banner .socials a:hover {
  color: var(--accent);      /* highlight on hover */
  transform: scale(1.2);
}


/* Header */
header.site-header {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--gutter);
  align-items: center;
  background: var(--panel-bg);
  border-radius: 8px;
  padding: 14px;
  box-shadow: var(--shadow-medium);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.brand { display: flex; gap: 10px; align-items: center; }

.avatar {
  width: var(--avatar-size); height: var(--avatar-size);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gradient-btn);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.site-title { font-size: 20px; line-height: 1; }
.site-desc { font-size: var(--font-small); color: #c27283; }

nav.top-nav {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

nav.top-nav a {
  text-decoration: none;
  font-family: var(--heading-font);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 16px;
  color: var(--navtxt);
  background: transparent;
  display: inline-block;            /* needed for transform */
  transition: transform 0.2s ease,  /* smooth zoom */ background 0.2s ease; /* keep your bg hover effect smooth */
}

nav.top-nav a:hover {
  color: rgb(49, 219, 219);
} 

nav.top-nav .dropdown-content a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 14px;
  background-color: #fff; /* force white background */
  color: var(--navtxt);
}

nav.top-nav a:hover,
.dropbtn:hover {
  transform: scale(1.05); /* subtle zoom */
}

nav.top-nav .dropdown-content a:hover {
  background-color: rgb(249, 238, 212); /* force white background */
}

/* Hamburger Button */
.hamburger {
  display: none;        /* hidden on desktop */
  font-size: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--heading);
}


/* Panels */
.panel {
  background: var(--panel-bg);
  /* border-radius: var(--radius); */
  padding: 24px;
  border: none;
  box-shadow: var(--shadow-panel);
}

aside.left {
  border-radius: 8px 0 0 8px; /* topleft  topright  rightbottom  leftbottom*/
  position: relative;
  min-height: 180px;
  background: var(--gradient-left);
  color: #fff;
}

aside.left h2, aside.left h3, aside.left h4, aside.left h5, aside.left h6 {
  color: antiquewhite;
}


aside.right {
  border-radius: 0 8px 8px 0; /* topleft  topright  rightbottom  leftbottom*/
  min-height: 180px;
  background: var(--gradient-right);
  color: #fff;
}

aside.right h2, aside.right h3, aside.right h4, aside.right h5, aside.right h6 {
  color: antiquewhite;
}

.profile { display: flex; gap: 12px; align-items: center; }

.profile .mini-avatar {
  width: var(--mini-avatar-size); height: var(--mini-avatar-size);
  border-radius: 9px;
  overflow: hidden;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
}

.links-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }

.links-list a {
  display: block;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--link);
  border: 1px dashed rgba(0,0,0,0.04);
}

main { min-height: 400px; }

.post { margin-bottom: 18px; }
.post h2 { margin: 0 0 8px 0; font-size: 20px; }
.meta { font-size: var(--font-small); color: var(--muted); margin-bottom: 8px; }
.post .content { line-height: 1.6; font-size: var(--font-base); color: var(--text); }


.mini-card { display: flex; gap: 10px; align-items: center; }

.tag-cloud {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-cloud a {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.04);
}

footer.site-footer {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: var(--font-small);
  margin-top: 8px;
}

.muted { color: var(--muted); }

.btn {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.04);
}

.accent {
  background: var(--gradient-btn);
  color: #fff;
}


  /*txt bounce animation*/
.bounce { 
position: relative;
top: 0;
animation: bounce 0.3s ease infinite alternate;
}

@keyframes bounce {
100% {
top: -.2rem;
}
}

/*highlight*/
::selection {
  /* Change highlight background color */
  background: rgb(255, 197, 167);
  /* Change highlight text color */
  color: #FFFFFF;
  }


  /* Container holding two columns */
  .columns-cont {
  max-width: 800px;
  margin: 0px auto;
  display: flex;
  flex-direction: row; /* Set to row to create a two-column layout */
  gap: 6px; /* Add space between columns */
  padding: 20px; 
  height: auto;
  }  

/* Left Column */
.left-column {
  flex: 1; /* Take up available space */
  padding: 20px;
  }
  
  
  /* Right Column */
  .right-column {
  flex: 1; /* Take up available space */
  padding: 20px;
  text-align: justify;
  }

/* Default: two columns side by side */
.columns-cont {
  max-width: 900px;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 10px;
  height: auto;
}

.left-column,
.right-column {
  padding: 10px; 
}

/* ===================== */
/* VN BOX - Home Page    */
/* ===================== */
#vn-box {
  display: flex;
  justify-content: center;
  text-align: justify;
}

.vnbox-container {
  display: flex;
  max-width: 900px;
  width: 100%;
}

/* Textbox */
.vnbox-textarea {
  flex: 1;
  display: flex;
  flex-direction: row;       /* portrait left, text right */
  align-items: flex-start;
  background-image: url('https://i.ibb.co/0jZfTg0T/textbox-page.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 2rem;
  font-family: var(--heading-font);
  min-height: 240px;
  position: relative;
  box-sizing: border-box;
}

/* Portrait inside textbox */
.vnbox-portrait {
  flex-shrink: 0;            /* don't shrink portrait */
  width: 185px;
  height: 220px;
  position: relative;
  margin-right: 1rem;      /* space between portrait and text */
}

.character img {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 100%;
}

.eyes-open {
  opacity: 1;
  z-index: 1;
}

.eyes-closed {
  opacity: 0;
  z-index: 2;
  animation: blink 4s infinite;
}

@keyframes blink {
  0%, 94%, 100% { opacity: 0; }
  95%, 96% { opacity: 1; }
}

/* Wrapper for name + dialogue */
.vnbox-text-content {
  display: flex;
  flex-direction: column;   /* stack name above dialogue */
  flex: 1;
  padding-top: 1rem;
}

/* Name */
.vnbox-name {
  font-family: var(--heading-font);
  font-size: 1.25rem;
  font-weight: bold;
  color: #b53a50;
  margin-bottom: 6px;
}

/* Dialogue */
.vnbox-dialogue {
  position: relative;
  min-height: 140px;
  font-style: italic;
  overflow-wrap: break-word;
}

#typewriter-text {
  color: #6C1D4F;
}

/* Click-to-continue icon */
.vnbox-textarea #ctc-icon {
  position: absolute;
  bottom: 48px;
  right: 20px;
  width: 50px;
  opacity: 0;
  animation: blinkCTC 1s infinite;
  z-index: 5; /* make sure it's above portrait/text */
}


@keyframes blinkCTC {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

#ctc-icon.hidden {
  display: none;
}



/* ===================== */
/* GUESTBOOK BUTTON      */
/* ===================== */
#gb-btn {
  position: absolute;       
  top: 30px;                
  right: 15px;              
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.6s ease;
  z-index: 10;
}

#gb-btn a {
  position: relative; /* for absolute positioning of <p> */
  display: inline-block;
}

#gb-btn img {
  display: block;
  width: 140px;
  height: auto;
}

#gb-btn p {
  position: absolute;       
  bottom: 5px;        /* a little above the image bottom */
  left: 50%;
  transform: translateX(-50%);  
  font-size: 0.8rem;
  text-align: center;
  background: #ffefbbd6;
  padding: 3px 6px;    
  border-radius: 4px;
  margin: 0;
  pointer-events: none;      
  box-sizing: border-box;
  width: 160px;       /* slightly wider than book image */
  max-width: 180px;   /* in case text is long */
  white-space: normal;       
  line-height: 1.2em; /* keeps it compact vertically */
}




/* Marquee Tooltip */
.marquee-tooltip {
  position: fixed;
  pointer-events: none; /* so it doesn't block hover */
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.15s ease;
}



hr {
  width: 50%;           /* half the width of its container */
  margin: 5px auto;    /* center it with some vertical spacing */
  border: none;         /* remove default border */
  height: 1.5px;          /* make it thinner */
  background-color: rgba(255, 166, 166, 0.46); /* semi-transparent black */
}


/* Navigation button hover slide effect */
#menu {
  color: rgb(161, 83, 83);
  text-decoration: none;
  font-size: 0.95rem;
  font-family: Amaranth, sans-serif;
  padding-top: 10px;
  padding-left: 45px;
  display: block;
  height: 40px;
  width: 140px;
  background-image: url(https://i.ibb.co/FbThFW7/Menu-btn.png);
  transition: transform 0.2s ease; /* Optional animation effect */
}

#menu:hover {
  color: rgb(49, 219, 219);
  transform: translateX(10px); /* Slide the button slightly to the right */
  height: 40px;
  width: 140px;
  background-image: url(https://i.ibb.co/Rg1c8h0/Menu-btn-hover.png);
}

.pet-ani {
  display: inline-block;
  transition: transform 0.2s ease;
  cursor: url("https://cur.cursors-4u.net/food/foo-6/foo523.cur"), auto !important;
}

.pet-ani:hover {
  transform: scale(1.05) rotate(4deg); /* Slight zoom + tilt */
}

/* Wobble animation when going back */
.pet-ani:not(:hover) {
  animation: wobbleBack 0.4s ease;
}

@keyframes wobbleBack {
  0%   { transform: scale(1.05) rotate(4deg); }
  25%  { transform: scale(1) rotate(-3deg); }
  50%  { transform: scale(1) rotate(3deg); }
  75%  { transform: scale(1) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

a.fancy-btn {
  display: inline-block;
  border-radius: 6px;
  background: transparent; /* base color */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.2s ease, 
              filter 0.2s ease;
  cursor: url("https://cur.cursors-4u.net/food/foo-6/foo523.cur"), auto !important;
}

a.fancy-btn:hover {
  transform: scale(1.05) rotate(2deg);
  filter: brightness(1.15); /* brighten on hover */
}

/* base pagedoll style */
.pagedoll {
  position: fixed;
  bottom: 30px;
  width: 230px; 
  z-index: 1000;
  animation: floaty 3s ease-in-out infinite;
  cursor: pointer;
  margin: 0;
}

/* place left and right */
.pagedoll-left {
  left: 0;
}

.pagedoll-right {
  right: 0;
}

/* gentle bouncing animation */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* fun hover wobble */
.pagedoll:hover {
  animation: wobble 0.6s ease;
}

@keyframes wobble {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-6deg); }
  50%  { transform: rotate(6deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}


.side-blockquote {
  background: rgba(255, 255, 255, 0.158);
  padding: 5px;
  margin: auto;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.7rem;
  text-align: center;
  color: white;
}

blockquote {
  background-color: #FFEFBB; 
  padding: 10px;
  border-radius: 8px;
  text-align: justify;
  color: #CA655C;
  font-family: var(--heading-font);
}

 .social-icon {
  display: inline-block;
  color: white;
  transition: transform 0.2s ease; 
  }
  
  .social-icon:hover {
  transform: scale(1.05);
  }


  /* character status */
  .my-status {
  max-height: 95px; /* Set the desired height for the feed */
  padding: 6px;
  background-color: rgba(251, 215, 215, 0.284); 
  border-radius: 8px; /* Rounded corners */
  color: #ffffff;
  text-align: center;
  }


#statuscafe {
    background-color: transparent;
    border: none;
    max-height: 85px;
}
#statuscafe-username {
    margin-bottom: .5em;
    font-family: var(--heading-font);
    font-size: 0.63rem;
    color:#f6e5c2;
}
#statuscafe-username a {
  color:#fffccd;
  text-decoration: none;
  font-size: 0.83rem;
}

#statuscafe-content {
    margin: 0 1em 0.5em 1em;
    font-size: 0.75rem;
    font-style: italic;
}

/* responsive img */
img {
  max-width: 100%; /* responsive */
  height: auto;
}


/*petals*/
@-webkit-keyframes fall {
  0% {
  opacity: 0.9;
  top: 0
  }
  
  100% {
  opacity: 0.2;
  top: 100%
  }
  }
  
  @keyframes fall {
  0% {
  opacity: 0.9;
  top: 0
  }
  
  100% {
  opacity: 0.2;
  top: 100%
  }
  }
  
  @-webkit-keyframes blow-soft-left {
  0% {
  margin-left: 0
  }
  
  100% {
  margin-left: -50%
  }
  }
  
  @keyframes blow-soft-left {
  0% {
  margin-left: 0
  }
  
  100% {
  margin-left: -50%
  }
  }
  
  @-webkit-keyframes blow-medium-left {
  0% {
  margin-left: 0
  }
  
  100% {
  margin-left: -100%
  }
  }
  
  @keyframes blow-medium-left {
  0% {
  margin-left: 0
  }
  
  100% {
  margin-left: -100%
  }
  }
  
  @-webkit-keyframes blow-soft-right {
  0% {
  margin-left: 0
  }
  
  100% {
  margin-left: 50%
  }
  }
  
  @keyframes blow-soft-right {
  0% {
  margin-left: 0
  }
  
  100% {
  margin-left: 50%
  }
  }
  
  @-webkit-keyframes blow-medium-right {
  0% {
  margin-left: 0
  }
  
  100% {
  margin-left: 100%
  }
  }
  
  @keyframes blow-medium-right {
  0% {
  margin-left: 0
  }
  
  100% {
  margin-left: 100%
  }
  }
  
  @-webkit-keyframes sway-0 {
  0% {
  -webkit-transform: rotate(-5deg)
  }
  
  40% {
  -webkit-transform: rotate(28deg)
  }
  
  100% {
  -webkit-transform: rotate(3deg)
  }
  }
  
  @keyframes sway-0 {
  0% {
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg)
  }
  
  40% {
  -ms-transform: rotate(28deg);
  transform: rotate(28deg)
  }
  
  100% {
  -ms-transform: rotate(3deg);
  transform: rotate(3deg)
  }
  }
  
  @-webkit-keyframes sway-1 {
  0% {
  -webkit-transform: rotate(10deg)
  }
  
  40% {
  -webkit-transform: rotate(43deg)
  }
  
  100% {
  -webkit-transform: rotate(15deg)
  }
  }
  
  @keyframes sway-1 {
  0% {
  -ms-transform: rotate(10deg);
  transform: rotate(10deg)
  }
  
  40% {
  -ms-transform: rotate(43deg);
  transform: rotate(43deg)
  }
  
  100% {
  -ms-transform: rotate(15deg);
  transform: rotate(15deg)
  }
  }
  
  @-webkit-keyframes sway-2 {
  0% {
  -webkit-transform: rotate(15deg)
  }
  
  40% {
  -webkit-transform: rotate(56deg)
  }
  
  100% {
  -webkit-transform: rotate(22deg)
  }
  }
  
  @keyframes sway-2 {
  0% {
  -ms-transform: rotate(15deg);
  transform: rotate(15deg)
  }
  
  40% {
  -ms-transform: rotate(56deg);
  transform: rotate(56deg)
  }
  
  100% {
  -ms-transform: rotate(22deg);
  transform: rotate(22deg)
  }
  }
  
  @-webkit-keyframes sway-3 {
  0% {
  -webkit-transform: rotate(25deg)
  }
  
  40% {
  -webkit-transform: rotate(74deg)
  }
  
  100% {
  -webkit-transform: rotate(37deg)
  }
  }
  
  @keyframes sway-3 {
  0% {
  -ms-transform: rotate(25deg);
  transform: rotate(25deg)
  }
  
  40% {
  -ms-transform: rotate(74deg);
  transform: rotate(74deg)
  }
  
  100% {
  -ms-transform: rotate(37deg);
  transform: rotate(37deg)
  }
  }
  
  @-webkit-keyframes sway-4 {
  0% {
  -webkit-transform: rotate(40deg)
  }
  
  40% {
  -webkit-transform: rotate(68deg)
  }
  
  100% {
  -webkit-transform: rotate(25deg)
  }
  }
  
  @keyframes sway-4 {
  0% {
  -ms-transform: rotate(40deg);
  transform: rotate(40deg)
  }
  
  40% {
  -ms-transform: rotate(68deg);
  transform: rotate(68deg)
  }
  
  100% {
  -ms-transform: rotate(25deg);
  transform: rotate(25deg)
  }
  }
  
  @-webkit-keyframes sway-5 {
  0% {
  -webkit-transform: rotate(50deg)
  }
  
  40% {
  -webkit-transform: rotate(78deg)
  }
  
  100% {
  -webkit-transform: rotate(40deg)
  }
  }
  
  @keyframes sway-5 {
  0% {
  -ms-transform: rotate(50deg);
  transform: rotate(50deg)
  }
  
  40% {
  -ms-transform: rotate(78deg);
  transform: rotate(78deg)
  }
  
  100% {
  -ms-transform: rotate(40deg);
  transform: rotate(40deg)
  }
  }
  
  @-webkit-keyframes sway-6 {
  0% {
  -webkit-transform: rotate(65deg)
  }
  
  40% {
  -webkit-transform: rotate(92deg)
  }
  
  100% {
  -webkit-transform: rotate(58deg)
  }
  }
  
  @keyframes sway-6 {
  0% {
  -ms-transform: rotate(65deg);
  transform: rotate(65deg)
  }
  
  40% {
  -ms-transform: rotate(92deg);
  transform: rotate(92deg)
  }
  
  100% {
  -ms-transform: rotate(58deg);
  transform: rotate(58deg)
  }
  }
  
  @-webkit-keyframes sway-7 {
  0% {
  -webkit-transform: rotate(72deg)
  }
  
  40% {
  -webkit-transform: rotate(118deg)
  }
  
  100% {
  -webkit-transform: rotate(68deg)
  }
  }
  
  @keyframes sway-7 {
  0% {
  -ms-transform: rotate(72deg);
  transform: rotate(72deg)
  }
  
  40% {
  -ms-transform: rotate(118deg);
  transform: rotate(118deg)
  }
  
  100% {
  -ms-transform: rotate(68deg);
  transform: rotate(68deg)
  }
  }
  
  @-webkit-keyframes sway-8 {
  0% {
  -webkit-transform: rotate(94deg)
  }
  
  40% {
  -webkit-transform: rotate(136deg)
  }
  
  100% {
  -webkit-transform: rotate(82deg)
  }
  }
  
  @keyframes sway-8 {
  0% {
  -ms-transform: rotate(94deg);
  transform: rotate(94deg)
  }
  
  40% {
  -ms-transform: rotate(136deg);
  transform: rotate(136deg)
  }
  
  100% {
  -ms-transform: rotate(82deg);
  transform: rotate(82deg)
  }
  }
  
  .sakura {
  background: -webkit-linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
  background: linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
  overflow: hidden; /*keeps random positions inside bounds*/
  pointer-events: none; /*to avoid interfering with clicks*/
  position: absolute;
  z-index: -2;
  }


/* Layout - for 3 panels */
.layout {
  display: grid;
  grid-template-columns: 200px auto 200px;
  gap: 0px;
  align-items: start;
}

/* DIY blog */
    #tumblr-archive {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
      margin-top: 2rem;
    }
    .tumblr-post {
      background: #fffffa;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      max-width: 85%;
      margin:auto;
    }
    .tumblr-post img {
      max-width: 100%;
      border-radius: 8px;
    }


/* --------COOKBOOK----------- */

.meta-list {
  /* background-color: #efe8dc83; */
  padding: 10px;
  margin: 4px;
  border-radius: 8px;
  list-style-type: none; /* remove default bullets */
  padding-left: .95em;     /* space for the dash */
}

.meta-list li::before {
  content: "☕︎";           /* add an icon before each item */
  display: inline-block;
  width: 1em;             /* space to align the text */
  margin-left: .01em;      /* pull the dash into the padding */
  color: var(--accent);            /* dash color */
  font-weight: 500;      /* make icon stand out */
}

.meta-list li:hover{
  background-color: #f9f5f5c3;
  border-radius: 4px;
}

.meta-list li b{
  font-weight: 500;
  background-color: #ead9d9;
  line-height: 22px;
  padding-left: 4px;
  padding-right: 4px;
}

.meta-list li b:hover{
  background-color: #f6dede;
}

.meta-list li::after {
  content: "";
  display: block;
  border-bottom: 1px solid #f1dbdb50; /* looks like <hr> */
}

#filters {
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

#filter-btn {
  background-color: #f19721;
  color: white;
  font-family: var(--heading-font);
  border: none;
  border-radius: 8px;
  padding: 10px;
  margin: 2px;
  font-size: medium;
}

#filter-btn:hover {
  background-color: #4bd6e2;
  transition: .08s ease-in ;
}

#pagination button {
  background-color: #efeae2;
  border: none;
  border-radius: 8px;
  padding: 10px;
  margin: 2px;
}

#pagination button:hover {
  background-color: #ffcb7e;
  transition: .08s ease-in ;
}

/* Back button */
#myback-btn {
  padding: 8px;
  background-color: #efeae2;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#myback-btn:hover {
  background-color: #ffcb7e;
  transition: .08s ease-in ;
}

#recipe-detail {
  text-align: justify;
  max-width: 800px;
  margin: 20px auto;
  padding: 16px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* Recipe archive thumbnails */
.recipe-thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  display: block;
}

/* Recipe hero image */
.hero-img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1em;
}

/* Card styles */
.recipe-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  margin: 10px auto;
  width: 100%;
  max-width: 350px;
}

.recipe-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.recipe-card-body {
  padding: 0.5em 1em;
}

.recipe-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
  flex-wrap: wrap;
  gap: 6px;
}

.print-btn {
  background: #f19721;
  color: white;
  border: none;
  padding: 0.5em 1em;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  margin: 1em 0;
  transition: background 0.3s;
}

.print-btn:hover {
  background: #4bd6e2;
}

/* Hide button in print view */
@media print {
  .print-btn {
    display: none;
  }

  /* make the recipe content cleaner */
  body {
    background: white;
    color: black;
  }
}

/* Print setup */
@media print {
  /* Hide everything except the recipe detail */
  body * {
    visibility: hidden;
  }

  #recipe-detail, #recipe-detail * {
    visibility: visible;
  }

  #recipe-detail {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;   /* stretch to full page width */
    padding: 20px;
    background: white;
  }

  /* Hide buttons when printing */
  .recipe-actions {
    display: none !important;
  }

  /* Optional: better print typography */
  body {
    font-size: 14pt;
    line-height: 1.6;
  }

  img.hero-img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1em;
  }
}

#toast {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: var(--background);
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 12px;
  position: fixed;
  z-index: 99999;
  left: 50%;
  top: 10%;
  font-size: 1.2rem;
  opacity: 0;
  font-family: var(--heading-font);
  transition: opacity 0.5s, visibility 0.5s;
}

#toast.show {
  visibility: visible;
  opacity: 1;
}

/* DRAWBOX CSS */
#drawboxcanvas {
  border: 2px solid #8d3f3f; 
  border-radius: 8px;       
  background-color: #faf8f6; /* light page-friendly background */
  max-width: 100%;           /* responsive */
  display: block;
  margin: 0 auto 20px;       /* spacing below canvas */
  
}

/* Container */
#drawbox-container {
  text-align: center;
  margin: 20px auto;
  padding: 10px;
  max-width: 550px;
}

/* Toolbar: color picker, slider, buttons in one line */
#drawbox-toolbar {
  display: flex;
  flex-wrap: nowrap;       /* keep all items on one line */
  justify-content: center; /* center the whole toolbar */
  align-items: center;
  gap: 4px;                /* small gap between items, can set to 0 if you want no space */
  margin-bottom: 10px;
}

/* Brush size slider */
#stroke-width {
  accent-color: var(--preloader-bg);    /* page color */
  width: 120px;              
  height: 8px;               
  border-radius: 5px;        
  cursor: pointer;
}

/* Color picker */
#stroke-color {
  width: 40px;
  height: 40px;
  border: 2px solid #fff;  /* accent border */  
  padding: 0;
  cursor: pointer;
  background-color: #fff;
  transition: transform 0.1s;
}

#stroke-color:hover {
  transform: scale(1.1);
}

/* Buttons */
#drawbox-container button {
  background-color: var(--background);  /* page accent */
  color: white;
  border: none;
  border-radius: 6px;        
  padding: 6px 12px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s, transform 0.1s;
}

#drawbox-container button:hover {
  background-color: var(--accent-2);  /* slightly darker on hover */
  transform: scale(1.05);
}

/* Labels */
#drawbox-container label {
  display: inline-flex;
  align-items: center;
  font-weight: bold;
  margin: 0;
  color: #BB5E5E; /* text color */
  gap: 4px;
}

.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 4px;
  background-color: #faf8f6;
}

.image-container img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.image-container p {
  font-size: 10px;
  margin: 2px 0 0 0;
  color: #555;
  text-align: center;
}


/* Lightbox overlay */
.lightbox-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 9999;
}

/* When visible */
.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Image inside lightbox */
.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}



/* --STICKERS COLLECTION-- */
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  max-width: 600px;
  margin: 20px auto;
}

.sticker-slot {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 8px;
}

.sticker-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: filter 0.3s ease;
}

.sticker-slot img.locked {
  filter: brightness(0.15) grayscale(100%);
}

.sticker-slot img.unlocked {
  filter: none;
}

/*sticker effects*/
.sticker-grid img {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.sticker-grid img:hover {
  transform: scale(1.1); /* zoom in */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* shadow effect */
}

.sticker-grid img:active {
  transform: scale(0.95); /* optional press effect */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.book-box {
  display: flex; 
  flex-direction: column; 
  align-items: center;
  border: 44px solid transparent; 
  border-image-source: url('https://i.ibb.co/kV1VFG5D/notebook-border.png'); 
  border-image-slice: 44 fill; 
  border-image-repeat: repeat; 
  box-sizing: border-box; 
  image-rendering: pixelated; 
  overflow-y: auto;
  overflow-x: hidden;
  height: 250px;
  width: 600px;
}

/* Lightbox overlay */
#sticker-lightbox {
  display: none; /* hidden by default */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Lightbox inner box */
#sticker-lightbox .lightbox-content {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  animation: zoomIn 0.3s ease;
}

#sticker-lightbox img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

#sticker-lightbox h3 {
  font-family: var(--heading-font);
  color: var(--heading);
}

/* Close button */
#sticker-lightbox .close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 32px;
  color: white;
  cursor: pointer;
  transition: color 0.2s ease;
}
#sticker-lightbox .close-btn:hover {
  color: #ffb75f;
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Lightbox navigation buttons */
#sticker-lightbox .nav-btn {
  position: absolute;
  top: 50%;
  font-size: 40px;
  color: white;
  cursor: pointer;
  user-select: none;
  padding: 8px;
  transition: color 0.2s;
}

#sticker-lightbox .nav-btn:hover {
  color: #ffb75f;
}

#sticker-lightbox .prev {
  left: 15px;
  transform: translateY(-50%);
}

#sticker-lightbox .next {
  right: 15px;
  transform: translateY(-50%);
}

#sticker-lightbox.locked-view img {
  filter: blur(6px) grayscale(80%);
  opacity: 0.6;
}

.hint-text {
  margin-top: 8px;
  font-size: 14px;
  font-style: italic;
  color: #7c2d43;
  display: none; /* hidden by default */
}


/* ----- | SHRINES PAGE STYLES | ----- */
@font-face {
  font-family: 'FancyH1'; 
  src: url('/assets/fonts/PORKYS.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Shrine page custom background */
body.shrine-page-body {
  /* Layered background: gradient underneath, pattern on top */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'%3E%3Cpath fill='%239dedda' fill-opacity='0.4' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'%3E%3C/path%3E%3C/svg%3E"),
    linear-gradient(360deg, #fbbf5d 0%, #5de9fb 100%);
  
  /* Pattern layer repeats, gradient layer covers */
  background-repeat: repeat, no-repeat;
  background-size: 80px 40px, cover;
  background-position: 0 0, center;

  /* Animate only the pattern layer */
  animation: shrineBgMove 40s linear infinite;
}

/* Keyframes: animate only the first layer (pattern) */
@keyframes shrineBgMove {
  from { background-position: 0 0, center; }
  to   { background-position: -100% -100%, center; }
}



/* Page wrapper ensures vertical stacking & centering */
.shrine-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 0; /* was 40px 0, removed top space */
  margin-top: 0;
}

/* Title */
.sh1 {
  font-family: 'FancyH1', sans-serif;
  font-size: 55px;
  color: #FFFFFF;
  text-align: center;
  margin: 0;
  /* outline */
  -webkit-text-stroke: 2px #28a7dd; 
  -webkit-text-fill-color: #FFFFFF;
}

.h2-highlight {
  color: white;
  background: linear-gradient(90deg, #EF9470, #fbd15d);
  padding: 0.6em 12px;
  display: block;      
  width: 100%;           /* ensures it spans the container */
  box-sizing: border-box; /* include padding in width */
  border-radius: 6px;    
  margin-bottom: 1em;    
  text-transform: uppercase;
  position: relative; /*needed for pseudo element*/
}

.h3-with-gif {
  color: #98DFC8;
  text-transform: uppercase;
  width: fit-content;
  padding: 1px 8px 1px 1px;
  border-radius: 8px;
}

.h3-with-gif::before {
  content: "";
  display: inline-block;      /* it behaves like an image inline with text */
  width: 30px;                /* pokeball size */
  height: 30px;
  margin-right: 10px;         /* space between gif and text */
  vertical-align: middle;     /* align with the middle of the text */
  background-image: url('https://i.ibb.co/1YkDtgRz/masterball-bynova-Thyme.gif');
  background-size: contain;    /* ensures the whole gif fits the box */
  background-repeat: no-repeat;
}

.h3-with-gif::after {
  content: "";
  display: block;
  width: 100%;               /* same width as the heading */
  height: 3px;               /* thickness of the line */
  background: #98DFC8;    
  border-radius: 2px;        /* rounded ends for a soft look */
  margin-top: 4px;           /* spacing from the heading text */
}

/* Navigation */
.shrine-nav {
  display: flex;
  gap: 12px;
  margin-bottom: 0px;
  margin-top: 20px;
  justify-content: center;
}

/* All buttons */
.shrine-nav button {
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  font-family: var(--heading-font);
  font-weight: bold;
  font-size: 18px;
  background: #28bfdd; /* default blue */
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
}

/* Hover effect for all buttons */
.shrine-nav button:hover {
  background: #f3936e;
  transform: scale(1.05);
}

/* Go Back button (first button) */
.shrine-nav button:first-child {
  background: #b77c63; /* coral/orange contrast */
}

.shrine-nav button:first-child:hover {
  background: #f3936e; 
}


/* Main box (banner + content inside) */
.shrine-box {
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: rgba(255,255,255,0.85);
  border-radius: 12px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  width: 900px;
  height: 600px;
  margin: 20px 0 10px 0; /* smaller bottom margin */
}

/* Banner inside the box (left side) */
.shrine-banner {
  width: 250px;
  height: 600px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* Scrollable content on the right */
.shrine-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  text-align: justify;
  /* Scrollbar customization */
  scrollbar-width: thin;
  scrollbar-color: #69f0ff #47c0e4;
}

.shrine-content img {
  display: block;
  margin: 0 auto; /* top-bottom 0, left-right auto */
  max-width: 100%;   /* images responsive */
}

/* Shrine sections */
.shrine-section {
  display: none;
}

.shrine-section.active {
  display: block;
}

/* Special footer for this page */
.shrine-footer {
  text-align: center;
  margin: 0; /* removed the previous top margin */
  padding: 10px;
  color: white;
  background-color: rgba(250, 235, 215, 0.062);
  border-radius: 8px;
  width: fit-content;
}

/* Text/content boxes inside shrine content */
.scontent-box {
  background: rgba(255, 244, 244, 0.9);  /* slightly transparent white */
  border: 2px solid #EDAC63;             /* matches your h3 color */
  border-radius: 12px;                    /* rounded corners */
  padding: 20px 24px;                     /* space inside */
  margin: 16px 0;                         /* space between boxes */
  transition: transform 0.2s, box-shadow 0.2s;
}


/* style for text inside boxes */
.scontent-box p {
  margin-bottom: 12px;
  line-height: 1.5;
}

.image-caption {
  font-size: 14px;
  color: var(--accent);
  text-align: center;
  margin: 6px 0 16px 0; /* spacing between image and caption */
  font-family: 'Raleway', sans-serif;
  margin-bottom: 25px;
  background-color: #ffefdc7c;
  border-radius: 5px;
}




/* -----------------------------
   OC Hub Layout
------------------------------ */
/* falling leaf */
.leaf {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
  user-select: none;
}

/* Title */
.oh1 {
  font-family: 'FancyH1', sans-serif;
  font-size: 55px;
  color: #fff;
  text-align: center;
  margin: 5px auto;
  /* -webkit-text-stroke: 2px #ba8a4f; */
  -webkit-text-fill-color: #8ed260;
  text-shadow: 0 0 10px rgba(48, 5, 60, 0.4);
}

.och-content {
  background: rgba(243, 255, 209, 0.978);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  padding: 40px;
  margin: 0 auto;
  transition: max-width 0.3s ease;
  height: 500px;
  width: 1100px;
  overflow-y:auto;
}

.och2 {
  text-transform: uppercase;
  background: linear-gradient(0deg, #64de49, #ebcb57);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 25px;
  font-size: 1.7em;
  letter-spacing: 1px;
}

/* Character cards */
.oc-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}
.oc-card {
  background: rgba(219, 255, 160, 0.797);
  border-radius: 18px;
  padding: 10px;
  width: 160px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative; /* required for tooltip positioning */
}
.oc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}


.oc-card img {
  width: 140px;
  height: 140px;
  border-radius: 18px;
  object-fit: cover;
  border: 2px solid white;
}
.oc-card span {
  margin-top: 8px;
  font-weight: bold;
  color: #639634;
  font-family: 'Amaranth', sans-serif;
  display: flex; /*fo aligning bullet and text*/
  font-size: 1.05em;
  align-items: center;
  gap:2px; /*space between bullet and txt*/
  text-align: center;
}

.oc-card span:hover {
  color: #e8b247;
}

.oc-card span::before {
  content: "";
  display: inline-block;
  width: 16px;                 
  height: 16px;
  background-image: url('https://i.ibb.co/cKT0QVSq/sunflower-by-Jennyhue.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.oc-divider {
  display: block;
  text-align: center;
  margin: 15px 0;
}

.oc-divider img {
  max-width: 90%;
  height: auto;
}

.myocbody {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  position: relative; /* needed for pseudo-elements */
  overflow: hidden;
  background-color: #3b2a1a; /* fallback bg color */
  animation: none !important; /* disable moving pattern from other pages */
  background: none !important; /* clear the moving pattern */
}

.myocbody::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('https://i.ibb.co/KzLdH0dD/21337765-6464309.jpg') center/cover no-repeat;
  background-attachment: fixed;
  z-index: 0;
  pointer-events: none;
  transition: filter 0.3s ease;
  filter: blur(0);
}
/* Add blur when hovering cover or when book is opened */
.myocbody.blur-bg::before {
  filter: blur(4px); /* Adjust blur intensity */
}



/* ------------------------- Book Cover with Spine ------------------------- */
.book-cover {
  width: 450px;
  height: 720px;
  background: linear-gradient(to right, #3c2815 0%, #5c3b24 20%, #5c3b24 80%, #3c2815 100%), url('cover.jpg') center/cover no-repeat;
  border-radius: 6px;
  box-shadow: 4px 4px 15px rgba(0,0,0,0.5);
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-cover:hover {
  transform: scale(1.05);
  box-shadow: 6px 6px 25px rgba(0,0,0,0.7);
}

.book-cover::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0;
  width: 22px;
  height: 100%;
  background: linear-gradient(to bottom, #4a2a16, #5c3b24);
  border-radius: 3px 0 0 3px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}

.book-cover::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 25px;
  height: 100%;
  background: linear-gradient(to left, rgba(255,255,255,0.1), transparent);
  pointer-events: none;
}

/* Cover text */
.book-cover .cover-text {
  background: rgba(255, 250, 200, 0.85);
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

/* Book title image (on top of cover) */
.book-cover .book-title-img {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%; 
  pointer-events: none; /* ensures clicking passes through */
  z-index: 2;
  opacity: 0.95;
}

/* Hover tooltip text */
.cover-hover-text {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 246, 210, 0.95);
  color: #4a2a16;
  padding: 10px 18px;
  border-radius: 12px;
  font-family: "Cinzel Decorative", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(255, 225, 160, 0.9);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 230, 140, 0.8), inset 0 0 10px rgba(255, 255, 200, 0.7);
  animation: glow-pulse 3s ease-in-out infinite;
  z-index: 3;
}

/* Show tooltip when hovering over cover */
.book-cover:hover .cover-hover-text {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

/* Magical glowing animation */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 240, 170, 0.6), 0 0 30px rgba(255, 220, 100, 0.4);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 250, 200, 1), 0 0 60px rgba(255, 220, 120, 0.8);
  }
}




/* ------------------------- Opened Book (matches height) ------------------------- */
.book-container {
  display: none;
  width: 1080px;
  height: 720px;
  border-radius: 8px;
  border: 6px solid #4a2a16;
  box-shadow: 4px 4px 25px rgba(0,0,0,0.6);
  background: #fef6e4;
  position: relative;
  display: flex;
}

.page {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
  border-left: 1px solid #d2b48c;
  background: linear-gradient(to right, #fff0ce, #fff5d3);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.05);
  position: relative;
  z-index: 1;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 0.5em;
  font-family: Oxygen, sans-serif;
  font-size: large;
}

.page:first-child {
  border-left: none;
}

.page h1, .page h2, .page h3 {
  font-family: Cinzel Decorative, sans-serif;
} 

/* Bookmarks and close button */
.bookmarks {
  position: absolute;
  right: -145px;
  top: 20%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 0;
}

.bookmarks button {
  color: #fff;
  background: #f6d349;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 0 6px 6px 0;
  border: none;
  font-size: 18px;
  font-weight: bold;
  font-family: var(--heading-font);
  transition: transform 0.2s ease, background 0.2s ease;
  text-align: left;
  padding-left: 20px;
  -webkit-box-shadow: 0px 5px 8px -5px rgba(0,0,0,0.6), inset 33px 5px 37px -30px rgba(179, 42, 0, 0.88); 
  box-shadow: 0px 5px 8px -5px rgba(0,0,0,0.6), inset 33px 5px 37px -30px rgba(179, 42, 0, 0.88);
}

.bookmarks button:hover {
  transform: scale(1.05);
  background: #fab54e;
}

.close-book {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--accent);
  background: #fae4a1;
  border: none;
  cursor: pointer;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-family: var(--heading-font);  
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.close-book:hover {
  background: #fce39a;
  transform: scale(1.1);
}

/* Page navigation buttons */
.page-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 895px;
  z-index: 2;
}

.page-nav button {
  padding: 6px 12px;
  color: var(--accent);
  background: #fae4a1;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--heading-font);
  font-weight: bold;
  transition: transform 0.2s ease, background 0.2s ease;
}

.page-nav button:hover {
  background: #fce39a;
  transform: scale(1.1);
}

/* Wrapper stacks everything vertically */
.page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 20px;
  position: relative;
  z-index: 1; /* keeps the book above the vignette */
}

/* Page Title at the top */
.page-title {
  font-size: 3rem;
  text-align: center;
  color: #3c2815;
  margin: 0;
}

#right-page {
  overflow-y: auto;
  max-height: 720px;
  scrollbar-width: thin;
  scrollbar-color: #caa766 #fff0ce;
}
.page-nav button {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.page-nav button[style*="display: none"] {
  opacity: 0;
}

.cover-wrapper {
  display: flex;
  align-items: center; /* vertical centering */
  gap: 16px;           /* space between button and cover */
  justify-content: flex-start; /* optional, ensures left alignment */
}

.back-btn {
  background-color: #fce9b6;
  border: none;
  padding: 8px 8px 0px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 35px;
  transition: background 0.3s, transform 0.2s;
  color: #83442f;
  font-family: Cinzel Decorative, sans-serif;
}

.back-btn:hover {
  background-color: #b9e065;
  color: #465f0b;
  transform: scale(1.1);
}

.backtohub {
  position: absolute;
  bottom: 20px;
  left: 36%;
  background-color: #fce9b6;
  border: none;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 20px;
  transition: background 0.3s, transform 0.2s;
  color: #83442f;
  font-family: Cinzel Decorative, sans-serif;
}

.backtohub:hover {
  background-color: #b9e065;
  color: #465f0b;
  transform: scale(1.1);
}

.myocli::before {
  content: "✦";
  color: #d8aba2;
  margin-right: 6px;
  font-size: 0.9em;
  display: inline-block;
  width: 1em;
}

















/* ---------------------------------- RESPONSIVE ------------------------------------- */

/* --INDEX PAGE-- */
@media (max-width: 768px) {

  html, body {
    padding: var(--gutter);
    overflow-x: hidden;
  }

  /* Dialogue box: take full width on small screens */
  .dialogue-box {
    width: 90%;
    font-size: 0.9rem;
  }

  /* Landing page layout: stack vertically */
  #landing-page {
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px 0;
    height: auto; /* let it expand naturally */
  }

  /* Scrollable content shrinks */
  .scrollable-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 10px 0;
  }

  /* Feed container text adjusts */
  .feed-container {
    font-size: 0.8rem;
  }

  /* Big enter button resizes */
  .image-button {
    flex: none;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .hover-btn-img {
    width: 80%;
    max-width: 320px;

    /* Maintain aspect ratio */
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .hover-btn-img img {
    position: absolute; /* keep stacking for hover effect */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Text scales down */
  h1 { font-size: 1.2rem; }
  h2 { font-size: 1rem; }
  h3 { font-size: 0.95rem; }
  p, li { font-size: 0.9rem; line-height: 1.4; }
}

@media (max-width: 480px) {
  .dialogue-box {
    padding: 12px;
    font-size: 0.8rem;
  }

  .hover-btn-img {
    width: 90%;
    max-width: 260px;
  }

  h1 { font-size: 1rem; }
  h2 { font-size: 0.9rem; }
  h3 { font-size: 0.85rem; }
  p, li { font-size: 0.8rem; }
}



/* --MAIN PAGE-- */

/* Tablet */
@media (max-width: 1024px) {
  html {
    font-size: 15px; /* scale text slightly down */
  }

  .wrap {
    max-width: 100%;
    min-width: auto;
    padding: 0 var(--gutter);
  }

  nav.top-nav {
    gap: 4px;
  }

  .banner {
    height: 180px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  html {
    font-size: 14px; /* global font shrink */
  }

  /* Hide fireflies layer */
  .fireflies {
    display: none !important;
  }

  /* Hide pagedolls, neko, sheep, draggable sticker */
  .pagedoll,
  #nl,              /* neko container (id=nl in main.html) */
  canvas.esheep,    /* sheep spawns inside canvas */
  #sticker-drag {
    display: none !important;
  }

  body,
  .wrap {
    padding: var(--gutter);
    box-sizing: border-box;
    overflow-x: hidden; /* prevent horizontal scrolling */
  }

  .layout {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  aside.left,
  aside.right {
    display: none !important; /* hide sidebars completely */
  }

  main {
    width: 100%;
    max-width: 100%;
    min-height: auto;
  }

  header.site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-title h2 {
    font-size: 1.2rem;
  }

  .site-desc {
    font-size: 0.85rem;
  }

  nav.top-nav {
    display: none; /* hide nav links, rely on hamburger */
  }


  .hamburger {
    display: block;
    margin-left: auto;
  }

  nav.top-nav {
    display: none; /* hide menu by default */
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
  }

  nav.top-nav a,
  .dropbtn {
    width: 100%;
    text-align: left;
    padding: 10px 16px;
  }

  .dropdown-content {
    position: relative;
    top: 0;
    left: 0;
    min-width: 100%;
    box-shadow: var(--shadow-light);
    border-radius: 6px;
  }

  /* Show menu when active */
  nav.top-nav.active {
    display: flex;
  }

  nav.top-nav {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }

  nav.top-nav a {
    flex: 1 1 auto;
    text-align: center;
    font-size: 14px;
    padding: 6px 8px;
    box-sizing: border-box;
  }

  .banner {
    height: 150px;
  }

  .image-button,
  .hover-btn-img {
    width: 100%;
    height: auto;
  }

  .speech-bubble {
    max-width: 100%;
    font-size: 0.85rem;
    padding: 14px;
  }

  .speech-bubble:after {
    display: none;
  }

  .scrollable-content {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    margin: 10px 0;
    padding: 10px;
  }

  .character-speech {
    display: flex;
    flex-direction: column; /* stack vertically */
    align-items: center;
    gap: 0;                 /* remove extra spacing */
  }

  .character-speech .character {
    margin: 0;
    padding: 0;
    left: 0;
  }

  .character-speech .character img {
    display: block;
    margin: 0 auto;
    max-width: 200px;  /* scale character */
    height: auto;
  }

  .character-speech .speech-bubble {
    margin-top: 0px;   /* tighten the bubble to the image */
    width: 90%;
  }

  #starter-img {
    display: none;
  }

}

/* Very Small Devices */
@media (max-width: 480px) {
  html {
    font-size: 12px;
  }

  .banner {
    height: 120px;
  }

  .banner .socials {
    gap: 6px;
    font-size: 1.2rem;
  }

  .site-title h2 {
    font-size: 1rem;
  }

  .site-desc {
    font-size: 0.75rem;
  }

  nav.top-nav a,
  .dropbtn {
    font-size: 0.8rem;
    padding: 6px 8px;
  }
}