@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Caveat:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root {
  --pink:        #f9bfd0;
  --pink-light:  #fde8ee;
  --pink-dark:   #c9567a;
  --pink-mid:    #f5aac0;
  --green:       #a8d5a2;
  --green-light: #dff0dc;
  --yellow:      #f7e07a;
  --yellow-light:#fef9da;
  --blue-light:  #c8e8f5;
  --cream:       #fdfaf4;
  --warm-white:  #fffef9;
  --ink:         #2c2016;
  --muted:       #7a6555;
  --home-bg:     #f9bfd0;
  --about-bg:    #fce8f5;
  --about-acc:   #d966b0;
  --chars-bg:    #dff0dc;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Lora', Georgia, serif;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ══════════ LOADING ══════════ */
#loading-screen {
  position: fixed; inset: 0; background: var(--pink-light);
  z-index: 9000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.4rem;
  opacity: 1; pointer-events: all; transition: opacity 0.5s ease;
}
#loading-screen.hidden  { opacity: 0; pointer-events: none; }
#loading-screen.visible { opacity: 1; pointer-events: all; }
.loading-inner { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.loading-icon-img { width: 150px; height: auto; animation: loadBounce 0.9s ease-in-out infinite; }
@keyframes loadBounce {
  0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px) scale(1.06); }
}
.loading-blink-text { font-family:'Fredoka',sans-serif; font-size:2rem; font-weight:700; color:var(--pink-dark); letter-spacing:0.15em; display:flex; }
.loading-blink-text span { display:inline-block; animation:letterBlink 1.2s ease-in-out infinite; }
.loading-blink-text span:nth-child(1){animation-delay:0s}
.loading-blink-text span:nth-child(2){animation-delay:.1s}
.loading-blink-text span:nth-child(3){animation-delay:.2s}
.loading-blink-text span:nth-child(4){animation-delay:.3s}
.loading-blink-text span:nth-child(5){animation-delay:.4s}
.loading-blink-text span:nth-child(6){animation-delay:.5s}
.loading-blink-text span:nth-child(7){animation-delay:.6s}
.loading-blink-text span.dot{color:var(--pink-mid)}
.loading-blink-text span.dot:nth-child(8){animation-delay:.8s}
.loading-blink-text span.dot:nth-child(9){animation-delay:1.0s}
.loading-blink-text span.dot:nth-child(10){animation-delay:1.2s}
@keyframes letterBlink {
  0%,100%{opacity:1;transform:translateY(0)} 40%{opacity:0.2;transform:translateY(-4px)}
}

/* ══════════ RAINBOW STRIPE ══════════ */
body::before {
  content:''; display:block; height:7px;
  background: repeating-linear-gradient(90deg,
    var(--pink) 0px,var(--pink) 24px,
    var(--yellow) 24px,var(--yellow) 48px,
    var(--green) 48px,var(--green) 72px);
  position:fixed; top:0; left:0; right:0; z-index:8999;
}

/* ══════════ NAV ══════════ */
nav {
  position:fixed; top:7px; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.5rem 1.8rem;
  background:transparent; border:none; box-shadow:none;
}
.nav-logo { text-decoration:none; display:flex; align-items:center; }
.nav-logo-img { height:52px; width:auto; object-fit:contain; }
.nav-links { list-style:none; display:flex; align-items:center; gap:0.3rem; }
.nav-links > li > a {
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; padding:0.2rem; border:none; background:none;
  transition:transform 0.18s ease, filter 0.18s ease;
}
.nav-links > li > a:hover { transform:translateY(-3px) scale(1.07); filter:drop-shadow(0 3px 6px rgba(44,32,22,0.2)); }
.nav-links > li > a.active { filter:drop-shadow(0 2px 8px rgba(217,106,133,0.55)); transform:scale(1.05); }
.nav-btn-img { width:88px; height:70px; object-fit:contain; display:block; }

/* Dropdown */
.nav-dropdown { position:relative; }
.nav-dropdown::after { content:''; position:absolute; bottom:-14px; left:0; right:0; height:14px; background:transparent; }
.dropdown-menu {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  background:#fffef9; border:3px solid var(--ink); border-radius:20px;
  padding:0.6rem 0.4rem; min-width:200px;
  box-shadow:4px 4px 0 var(--ink); list-style:none; z-index:600;
}
.nav-dropdown:hover .dropdown-menu { display:block; animation:popIn 0.18s ease; }
@keyframes popIn { from{opacity:0;transform:scale(0.94) translateY(-4px)} to{opacity:1;transform:scale(1) translateY(0)} }
.dropdown-menu li a {
  display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0.9rem;
  border-radius:12px; font-family:'Fredoka',sans-serif; font-size:0.95rem;
  color:var(--ink); text-decoration:none; transition:background 0.15s;
}
.dropdown-menu li a:hover { background:var(--yellow-light); }
.dropdown-char-img { width:32px; height:32px; object-fit:contain; flex-shrink:0; }

/* ══════════ PAGE SYSTEM ══════════ */
.page { display:none; flex: 1; }
.page.active { display:block; animation:pageIn 0.32s ease; }
@keyframes pageIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ══════════ FLOATING DOODLES ══════════ */
.doodle-float {
  position:absolute; pointer-events:none; user-select:none;
  object-fit:contain;
  animation:doodleWiggle 4s ease-in-out infinite;
  filter:drop-shadow(1px 2px 3px rgba(0,0,0,0.06));
}
@keyframes doodleWiggle {
  0%,100%{transform:rotate(var(--r,-5deg)) scale(1)}
  50%{transform:rotate(calc(var(--r,-5deg) + 9deg)) scale(1.05)}
}

/* ══════════════════════════════════════
   HOME — SNAP SCROLL
══════════════════════════════════════ */
.page#home { overflow: hidden; }
.page#home.active { display: block; }

.home-snap-container {
  height: calc(100vh - 7px);
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.home-snap-container::-webkit-scrollbar { display: none; }

.home-panel {
  width: 100%;
  height: calc(100vh - 7px);
  background: var(--home-bg);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* Panel 1 */
.home-panel-1-content {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: min(860px, 78vw);
  height: 100%;
  padding: 90px 0 1rem;
}

.home-title-row {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
}
.home-title-img { height: 110px; width: auto; object-fit: contain; filter:drop-shadow(2px 2px 0 rgba(0,0,0,0.08)); }
.home-logo-img  { height: 130px; width: auto; object-fit: contain; filter:drop-shadow(2px 2px 0 rgba(0,0,0,0.08)); }

/* ── FIX 1: home-main-box — overflow:hidden already present, image inside fixed ── */
.home-main-box {
  width: 100%; flex: 1; min-height: 0;
  max-height: calc(100vh - 380px);
  border: 6px solid var(--ink); border-radius: 14px;
  background: var(--home-bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;                  /* images never bleed past the border */
}
/* Image inside home-main-box: fill the container, no bleed */
.home-gallery-img {
  width: 100%; height: 100%;
  object-fit: cover;                 /* cover fills box; contain leaves letterbox — use cover */
  display: block;
}
.home-gallery-placeholder {
  display:flex; align-items:center; justify-content:center;
  padding:2rem; text-align:center;
  font-family:'Caveat',cursive; font-size:1.1rem; color:var(--muted); line-height:1.7;
}

/* SCROLL BUTTON */
.scroll-btn {
  display:flex; flex-direction:column; align-items:center; gap:0.1rem;
  background:none; border:none; cursor:pointer; padding:0.3rem 1rem;
  flex-shrink: 0;
}
.scroll-btn-up { flex-direction:column-reverse; }
.scroll-label { font-family:'Fredoka',sans-serif; font-size:1.5rem; font-weight:700; color:var(--pink-dark); letter-spacing:0.12em; }
.scroll-arrow { font-size:1.6rem; color:var(--pink-dark); animation:arrowBounce 1.2s ease-in-out infinite; }
.scroll-btn-up .scroll-arrow { animation-direction:alternate-reverse; }
@keyframes arrowBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
.scroll-btn:hover .scroll-label { text-decoration:underline; }

/* Panel 2 */
.home-panel-2-content {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start;
  gap: 1.4rem;
  width: 100%; height: 100%;
  padding: 80px 2rem 1.5rem;
  overflow: hidden;
}
.home-panel-2-content .scroll-btn-up        { margin-top: 0; }
.home-panel-2-content .home-chars-row       { margin-top: auto; margin-bottom: auto; }
.home-panel-2-content .home-gallery-section { margin-top: 0; }

.home-chars-row {
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-end;
  gap:0.8rem; width:100%; overflow-x:auto; padding:0.3rem 0.5rem;
  flex-shrink: 0;
}
.home-chars-row::-webkit-scrollbar { height:4px; }
.home-chars-row::-webkit-scrollbar-thumb { background:var(--pink-dark); border-radius:2px; }
.home-char-item {
  display:flex; flex-direction:column; align-items:center; gap:0.3rem;
  cursor:pointer; text-decoration:none;
  transition:transform 0.2s ease; flex-shrink:0;
}
.home-char-item:hover { transform:translateY(-8px) scale(1.05); }
.home-char-img { width:110px; height:140px; object-fit:contain; filter:drop-shadow(2px 3px 4px rgba(0,0,0,0.12)); }
.home-char-name { font-family:'Fredoka',sans-serif; font-size:1.1rem; font-weight:700; color:var(--pink-dark); text-align:center; }

.home-gallery-section { width:100%; max-width:860px; flex-shrink:0; }
.home-gallery-title-row {
  display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:0.8rem;
}
.home-gallery-title-img { height:170px; width:auto; object-fit:contain; }
.home-gallery-doodle    { height:90px;  width:auto; object-fit:contain; }

.home-gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.home-gallery-box {
  border:5px solid var(--pink-dark); border-radius:12px;
  background:var(--home-bg); aspect-ratio:4/3;
  overflow:hidden;                   /* FIX 1: images cannot bleed past border */
  display:flex; align-items:center; justify-content:center;
}
/* Images inside home gallery boxes */
.home-gallery-box-img {
  width:100%; height:100%;
  object-fit: cover;                 /* fill box cleanly */
}
.gallery-box-placeholder {
  display:flex; align-items:center; justify-content:center; padding:0.8rem;
  text-align:center; font-family:'Caveat',cursive; font-size:0.95rem; color:var(--pink-dark); line-height:1.5;
}

/* ══════════════════════════════════════
   ABOUT PAGE
   FIX 2: Abandon 3-col grid.
   New stacked layout:
     Row 1 — gallery images (centered flex)
     Row 2 — main text box (full width)
     Row 3 — methodologies (full width)
══════════════════════════════════════ */
.page#about { background:var(--about-bg); min-height:100vh; }

.about-header {
  background:var(--about-bg);
  padding:5rem 2rem 1.5rem;
  text-align:center;
  border-bottom:3px solid var(--about-acc);
}
.about-title {
  font-family:'Fredoka',sans-serif; font-size:clamp(2rem,6vw,3.5rem);
  font-weight:700; color:var(--about-acc);
  display:inline-flex; align-items:center; gap:0.7rem;
}
.about-title-doodle { height:55px; width:auto; object-fit:contain; }

.about-body { position:relative; padding:2rem 0 5rem; }

/* Edge doodles — behind content (z-index 1) */
.about-doodle {
  position:absolute; pointer-events:none; user-select:none; object-fit:contain;
  z-index:1;
}
.about-doodle-float {
  position:absolute; pointer-events:none; user-select:none; object-fit:contain;
  z-index:1;
  animation:doodleWiggle 4s ease-in-out infinite;
}

/* Content column — sits above doodles (z-index 2).
   Horizontal padding clears the edge doodle zone (~120px). */
.about-content {
  padding: 0 140px;
  position: relative; z-index: 2;
}

/* ── ROW 1: Gallery images — centered, aesthetically spaced ── */
/* Replace the old .about-top 3-col grid with a new stacked approach */
.about-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  /* No grid — just a flex row of: large image + 2x2 grid.
     Text box is now in Row 2, below. */
}

/* FIX 1 + FIX 2: about-gallery-large — overflow:hidden so image stays in box */
.about-gallery-large {
  border: 5px solid var(--about-acc); border-radius: 10px;
  background: var(--about-bg);
  width: 340px; height: 340px;        /* fixed square, looks clean */
  flex-shrink: 0;
  overflow: hidden;                   /* FIX 1: image cannot bleed past border */
  display: flex; align-items: center; justify-content: center;
}

/* 2x2 grid of small gallery boxes */
.about-mid-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.9rem;
  width: 300px; height: 340px;        /* match height of large box */
  flex-shrink: 0;
}

/* FIX 1: about-gallery-med — overflow:hidden so image stays in box */
.about-gallery-med {
  border: 5px solid var(--about-acc); border-radius: 10px;
  background: var(--about-bg);
  overflow: hidden;                   /* FIX 1: image cannot bleed past border */
  display: flex; align-items: center; justify-content: center;
}

/* Images inside about gallery boxes */
.about-img {
  width: 100%; height: 100%;
  object-fit: cover;                  /* fill box, no bleed */
  display: block;
}
.about-ph {
  display:flex; align-items:center; justify-content:center; padding:1rem;
  text-align:center; font-family:'Caveat',cursive; font-size:0.9rem; color:var(--about-acc); line-height:1.5;
}

/* ── ROW 2: Main description text box — full width, auto height ── */
.about-text-box {
  border: 5px solid var(--about-acc); border-radius: 10px;
  background: var(--about-bg); padding: 2rem 2.2rem;
  font-family: 'Lora', serif; font-size: 1.02rem; color: var(--ink); line-height: 1.95;
  /* height: auto — grows freely with content */
  height: auto;
  overflow: visible;
}

/* about-text-right is now a full-width stacked block (not a column) */
.about-text-right {
  width: 100%;
  margin-bottom: 2.5rem;
  display: block;                     /* block, not flex, for natural paragraph flow */
}

/* Paragraphs inside text boxes */
.about-text-box p + p { margin-top: 1.1rem; }
.about-text-box h3 {
  font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 600;
  margin: 1.6rem 0 0.6rem; color: inherit;
}
.about-text-box ul, .about-text-box ol { padding-left: 1.4rem; margin: 0.8rem 0; }
.about-text-box li { margin-bottom: 0.4rem; line-height: 1.85; }
.sources-list { list-style: disc; padding-left: 1.5rem; margin-top: 0.8rem; }
.sources-list li { font-size: 0.93rem; line-height: 1.75; margin-bottom: 0.3rem; }

/* ── ROW 3: Methodologies — full width, matches Row 2 ── */
.about-method { width: 100%; }
.about-method-title-row {
  display:flex; align-items:center; justify-content:center; gap:0.8rem; margin-bottom:1rem;
}
.about-method-icon { height:65px; width:auto; object-fit:contain; }
.about-method-heading {
  font-family:'Fredoka',sans-serif; font-size:clamp(1.8rem,5vw,2.8rem);
  font-weight:700; color:var(--about-acc);
}
.about-method-box {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
  text-align: left;
}

/* ══════════════════════════════════════
   CHARACTERS PAGE
══════════════════════════════════════ */
.page#characters { background:var(--chars-bg); min-height:100vh; }

.chars-header {
  background:var(--chars-bg);
  padding:5rem 2rem 2rem;
  display:flex; align-items:center; justify-content:center;
  gap:2rem; border-bottom:3px solid var(--ink); flex-wrap:wrap;
}
.chars-title {
  font-family:'Fredoka',sans-serif; font-size:clamp(1.8rem,5vw,3rem);
  font-weight:700; color:var(--pink-dark); text-align:center;
}
.chars-doodle-side { height:80px; width:auto; object-fit:contain; flex-shrink:0; }

.char-img-grid {
  background:var(--chars-bg);
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:2rem 2.5rem;
  padding:2rem 2rem 3rem;
  min-height:calc(100vh - 230px);
}
.char-img-grid-item {
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  cursor:pointer; text-decoration:none; transition:transform 0.2s ease;
}
.char-img-grid-item:hover { transform:translateY(-8px) scale(1.05); }
.char-grid-img { width:140px; height:180px; object-fit:contain; filter:drop-shadow(2px 4px 6px rgba(0,0,0,0.15)); }
.char-grid-name { font-family:'Fredoka',sans-serif; font-size:1.3rem; font-weight:700; color:var(--pink-dark); text-align:center; }

/* ══════════════════════════════════════
   CHARACTER DETAIL PAGES
   FIX 3:
   - .char-body-grid max-width → 90vw (fills screen)
   - center column wider (320px) for bigger plushie
   - .char-plushie-glow → 300×380px
   - Text boxes get height:auto + overflow:visible
══════════════════════════════════════ */
.char-detail { display:none; }
.char-detail.active { display:block; animation:pageIn 0.32s ease; }

.char-banner {
  padding:5rem 2rem 3rem; text-align:center; position:relative;
}
.char-banner-back {
  position:absolute; top:4rem; left:1.4rem;
  font-family:'Fredoka',sans-serif; font-size:0.95rem;
  background:rgba(255,255,255,0.85); border:2.5px solid var(--ink);
  border-radius:40px; padding:0.35rem 0.9rem; box-shadow:2px 2px 0 var(--ink);
  cursor:pointer; text-decoration:none; color:var(--ink);
  display:inline-flex; align-items:center; gap:0.3rem;
  transition:all 0.15s; z-index:5;
}
.char-banner-back:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.char-banner-name {
  font-family:'Fredoka',sans-serif; font-size:clamp(3rem,9vw,6rem); font-weight:700; line-height:1;
}

.char-body-section {
  position:relative;
  padding:3rem 2rem 4rem;            /* narrower side padding now that grid is wider */
  overflow:hidden;
}

/* Background pseudo-elements — unchanged */
.char-body-section::before {
  content:'';
  position:absolute; top:0; left:0;
  width:calc(50% + 1px); height:100%;
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;
}
.char-body-section::after {
  content:'';
  position:absolute; top:0; right:0;
  width:calc(50% + 1px); height:100%;
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;
  transform:scaleX(-1);
}

/* FIX 3A: Much wider grid so text columns can breathe */
.char-body-grid {
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1fr 320px 1fr;  /* wider center for bigger plushie */
  gap: 2rem;
  width: 90%;                             /* was max-width:1300px — now 90% of screen */
  max-width: 1800px;                      /* hard cap at 1800px on very wide screens */
  margin: 0 auto;
  align-items: start;                     /* columns size to own content */
}

/* WHO AM I column */
.char-left-col { display:flex; flex-direction:column; }

.char-col-title {
  font-family:'Fredoka',sans-serif; font-size:1.8rem; font-weight:700;
  margin-bottom:1rem; text-align:center;
}

/* FIX 3B: Text boxes expand freely with content — no clipping */
.char-text-box {
  border-radius:10px; padding:2rem 1.8rem;
  font-family:'Lora',serif; font-size:0.98rem; line-height:1.9; color:var(--ink);
  height: auto;                           /* grows with content */
  overflow: visible;                      /* no clipping */
  flex: 1 1 auto;
}

/* Paragraph and heading styles inside char text boxes */
.char-text-box p + p   { margin-top: 1.1rem; }
.char-text-box h3      { font-family:'Fredoka',sans-serif; font-size:1.05rem; font-weight:600; margin:1.4rem 0 0.5rem; }
.char-text-box ul, .char-text-box ol { padding-left:1.4rem; margin:0.6rem 0; }
.char-text-box li      { margin-bottom:0.35rem; line-height:1.8; }
.char-text-box blockquote { margin:1rem 0; padding-left:1rem; border-left:4px solid currentColor; opacity:0.85; font-style:italic; }

/* FIX 3C: Bigger plushie, centered vertically */
.char-center-col {
  display:flex; flex-direction:column; align-items:center;
  justify-content: center;             /* vertically centered, not pinned to top */
  padding-top: 2rem;
  /* stays sticky in view while text scrolls on desktop */
  position: sticky;
  top: 90px;                           /* ~nav height */
  align-self: start;
}
.char-plushie-glow {
  width: 300px;                        /* was 220px */
  height: 380px;                       /* was 280px */
  object-fit: contain;
  animation:charFloat 3.5s ease-in-out infinite;
}
@keyframes charFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

/* Right column */
.char-profile-col { display:flex; flex-direction:column; gap:1rem; }
.char-gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.char-gallery-box {
  border-radius:8px; aspect-ratio:1;
  overflow:hidden;                     /* FIX 1: images stay in box */
  display:flex; align-items:center; justify-content:center;
}
.char-gallery-box img {
  width:100%; height:100%;
  object-fit: cover;                   /* fill box without stretching */
}
.char-gallery-placeholder {
  display:flex; align-items:center; justify-content:center; padding:0.8rem;
  text-align:center; font-family:'Caveat',cursive; font-size:0.82rem; line-height:1.5;
}

/* ── Per-character color schemes — UNCHANGED ── */
.char-palangga .char-banner      { background:#5b7fa6; }
.char-palangga .char-banner-name { color:#1a2e4a; }
.char-palangga .char-body-section{ background-color:#b8cce0; }
.char-palangga .char-col-title   { color:#1a2e4a; }
.char-palangga .char-text-box    { border:5px solid #1a2e4a; background:rgba(208,223,240,0.88); }
.char-palangga .char-gallery-box { border:4px solid #1a2e4a; background:rgba(208,223,240,0.88); }
.char-palangga .char-gallery-placeholder{ color:#1a2e4a; }
.char-palangga .char-plushie-glow{ filter:drop-shadow(0 0 22px rgba(180,210,255,0.95)) drop-shadow(0 0 8px rgba(100,160,220,0.7)); }

.char-katto .char-banner         { background:#f5a0c0; }
.char-katto .char-banner-name    { color:#7a0040; }
.char-katto .char-body-section   { background-color:#fdd8ea; }
.char-katto .char-col-title      { color:#7a0040; }
.char-katto .char-text-box       { border:5px solid #7a0040; background:rgba(254,232,242,0.88); }
.char-katto .char-gallery-box    { border:4px solid #7a0040; background:rgba(254,232,242,0.88); }
.char-katto .char-gallery-placeholder{ color:#7a0040; }
.char-katto .char-plushie-glow   { filter:drop-shadow(0 0 22px rgba(255,150,200,0.95)); }

.char-malaya .char-banner        { background:#ffe066; }
.char-malaya .char-banner-name   { color:#4a5200; }
.char-malaya .char-body-section  { background-color:#fff4b0; }
.char-malaya .char-col-title     { color:#4a5200; }
.char-malaya .char-text-box      { border:5px solid #4a5200; background:rgba(255,250,210,0.88); }
.char-malaya .char-gallery-box   { border:4px solid #4a5200; background:rgba(255,250,210,0.88); }
.char-malaya .char-gallery-placeholder{ color:#4a5200; }
.char-malaya .char-plushie-glow  { filter:drop-shadow(0 0 22px rgba(255,230,80,0.95)); }

.char-shutdown .char-banner      { background:#5cb88a; }
.char-shutdown .char-banner-name { color:#0d3320; }
.char-shutdown .char-body-section{ background-color:#b8e0cc; }
.char-shutdown .char-col-title   { color:#0d3320; }
.char-shutdown .char-text-box    { border:5px solid #0d3320; background:rgba(212,240,225,0.88); }
.char-shutdown .char-gallery-box { border:4px solid #0d3320; background:rgba(212,240,225,0.88); }
.char-shutdown .char-gallery-placeholder{ color:#0d3320; }
.char-shutdown .char-plushie-glow{ filter:drop-shadow(0 0 22px rgba(100,220,160,0.95)); }

.char-small .char-banner         { background:#4a8c5c; }
.char-small .char-banner-name    { color:#f0ffe8; }
.char-small .char-body-section   { background-color:#c2dfc8; }
.char-small .char-col-title      { color:#1a3a22; }
.char-small .char-text-box       { border:5px solid #1a3a22; background:rgba(218,238,222,0.88); }
.char-small .char-gallery-box    { border:4px solid #1a3a22; background:rgba(218,238,222,0.88); }
.char-small .char-gallery-placeholder{ color:#1a3a22; }
.char-small .char-plushie-glow   { filter:drop-shadow(0 0 22px rgba(120,200,140,0.95)); }

.char-appearance .char-banner      { background:#a0c8f0; }
.char-appearance .char-banner-name { color:#1a2060; }
.char-appearance .char-body-section{ background-color:#d4e8f8; }
.char-appearance .char-col-title   { color:#1a2060; }
.char-appearance .char-text-box    { border:5px solid #1a2060; background:rgba(232,244,255,0.88); }
.char-appearance .char-gallery-box { border:4px solid #1a2060; background:rgba(232,244,255,0.88); }
.char-appearance .char-gallery-placeholder{ color:#1a2060; }
.char-appearance .char-plushie-glow{ filter:drop-shadow(0 0 22px rgba(160,200,255,0.95)); }

.char-evidence .char-banner        { background:#e8c888; }
.char-evidence .char-banner-name   { color:#4a2e00; }
.char-evidence .char-body-section  { background-color:#f4dfa8; }
.char-evidence .char-col-title     { color:#4a2e00; }
.char-evidence .char-text-box      { border:5px solid #4a2e00; background:rgba(255,248,224,0.88); }
.char-evidence .char-gallery-box   { border:4px solid #4a2e00; background:rgba(255,248,224,0.88); }
.char-evidence .char-gallery-placeholder{ color:#4a2e00; }
.char-evidence .char-plushie-glow  { filter:drop-shadow(0 0 22px rgba(240,200,100,0.95)); }

/* ══════════ GALLERY PAGE ══════════ */
.page-header { padding:5rem 2rem 4rem; text-align:center; position:relative; overflow:hidden; border-bottom:2.5px solid var(--ink); }
.page-header::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:50px; background:var(--cream); clip-path:ellipse(60% 100% at 50% 100%); }
.page-header.yellow-bg { background:var(--yellow-light); }
.page-header.green-bg  { background:var(--green-light); }
.eyebrow { font-family:'Caveat',cursive; font-size:1.1rem; color:var(--pink-dark); letter-spacing:0.06em; display:block; margin-bottom:0.5rem; }
.page-title { font-family:'Fredoka',sans-serif; font-size:clamp(2.5rem,7vw,5rem); font-weight:700; color:var(--ink); line-height:1.05; margin-bottom:1rem; }
.page-desc { max-width:500px; margin:0 auto; font-size:1rem; color:var(--muted); line-height:1.85; font-style:italic; }

.gallery-grid { max-width:1100px; margin:0 auto; padding:3rem 2rem 5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.gallery-item { border:2.5px solid var(--ink); border-radius:18px; overflow:hidden; box-shadow:4px 4px 0 var(--ink); aspect-ratio:1; background:var(--warm-white); display:flex; align-items:center; justify-content:center; transition:transform 0.25s, box-shadow 0.25s; cursor:pointer; }
.gallery-item:nth-child(3n+1){transform:rotate(-1.2deg)}
.gallery-item:nth-child(3n+2){transform:rotate(0.8deg)}
.gallery-item:nth-child(3n){transform:rotate(-0.4deg)}
.gallery-item:hover { transform:rotate(0) scale(1.03) !important; box-shadow:6px 6px 0 var(--ink); }
.gallery-item img { width:100%; height:100%; object-fit:cover; }

#lightbox { display:none; position:fixed; inset:0; background:rgba(44,32,22,0.85); z-index:7000; align-items:center; justify-content:center; padding:2rem; }
#lightbox.open { display:flex; }
#lightbox img { max-width:90vw; max-height:85vh; border-radius:16px; border:3px solid var(--warm-white); box-shadow:0 8px 40px rgba(0,0,0,0.5); }
#lightbox-close { position:absolute; top:1.5rem; right:1.5rem; font-family:'Fredoka',sans-serif; font-size:1rem; background:var(--warm-white); border:2px solid var(--ink); border-radius:40px; padding:0.4rem 1rem; cursor:pointer; box-shadow:2px 2px 0 var(--ink); }

/* ══════════ RESOURCES — Soft Red/Ruby Palette ══════════ */
.page-header.resources-header-bg {
  background: #fde8e8; /* light blush/pastel red */
  border-bottom-color: #a01030;
}
.resources-title { color: #a01030; }

.resources-wip-body {
  position: relative;
  min-height: calc(100vh - 220px);
  background: #f0b8c0; /* muted medium rose/red */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  overflow: hidden;
}

.res-doodle {
  position: absolute;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  opacity: 0.82;
  animation: doodleWiggle 5s ease-in-out infinite;
  max-width: 12vw;
}

.resources-wip-box {
  position: relative;
  z-index: 2;
  background: #fde8e8;
  border: 4px solid #a01030;
  border-radius: 22px;
  padding: 2.2rem 3rem;
  box-shadow: 5px 5px 0 #a01030;
  text-align: center;
  max-width: 480px;
  width: 90%;
}

.resources-wip-box p {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: #000;
  font-weight: 500;
  line-height: 1.6;
}

/* ══════════ FOOTER ══════════ */
footer { background:var(--ink); color:var(--cream); text-align:center; padding:2.5rem; font-family:'Caveat',cursive; font-size:1.1rem; }
.footer-brand { color:var(--pink); }

/* ══════════════════════════════════════
   MOBILE — @media queries
══════════════════════════════════════ */
@media (max-width: 1100px) {
  /* Character grid switches to single column stack */
  .char-body-grid {
    grid-template-columns: 1fr;
    width: 92%;
  }
  .char-center-col {
    order: -1;
    padding-top: 0;
    position: static;        /* remove sticky on small screens */
    align-items: center;
  }
  .char-plushie-glow { width: 200px; height: 260px; }

  /* About gallery row stacks */
  .about-top {
    flex-direction: column;
    align-items: center;
  }
  .about-gallery-large { width: 100%; height: 280px; }
  .about-mid-grid      { width: 100%; height: auto; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  .about-content { padding: 0 90px; }
}

@media (max-width: 700px) {
  nav { padding:0.4rem 0.8rem; }
  .nav-logo-img { height:38px; }
  .nav-btn-img  { width:55px; height:44px; }
  .home-panel-1-content { width:92vw; }
  .home-title-img { height:70px; }
  .home-logo-img  { height:85px; }
  .home-char-img  { width:75px; height:95px; }
  .home-char-name { font-size:0.85rem; }
  .home-gallery-title-img { height:110px; }
  .home-gallery-doodle    { height:65px; }
  .home-gallery-grid { grid-template-columns:1fr; }
  .chars-header { flex-direction:column; gap:0.8rem; padding-top:4.5rem; }
  .chars-doodle-side { height:50px; }
  .char-img-grid { gap:1.2rem; padding:1.5rem 1rem; }
  .char-grid-img { width:90px; height:120px; }
  .about-content { padding: 0 1rem; }
  .about-doodle { display:none; }
  .about-doodle-float { display:none; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); padding:2rem 1rem; }
  .char-plushie-glow { width: 160px; height: 200px; }
  /* Resources mobile */
  .res-doodle { max-width: 18vw; }
  .resources-wip-box { padding: 1.6rem 1.4rem; }
}

@media (max-width: 480px) {
  .resources-wip-body { padding: 3rem 1rem; min-height: 60vh; }
  .res-doodle { max-width: 22vw; opacity: 0.6; }
  .resources-wip-box { padding: 1.4rem 1.2rem; border-radius: 16px; }
  .resources-wip-box p { font-size: 1rem; }
}