.nav-img-btn:hover {
  filter: brightness(1.1) drop-shadow(0 0 6px rgba(255,255,255,0.6));
  transform: scale(1.02);
  transition: 0.2s ease-in-out;
}

  
  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
    /* ===== Base & Reset ===== */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; }
    body {
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;

  background-image: url("/IMG/bg_main.gif");  /* your tile image */
  background-repeat: repeat;
  background-position: top left;
      color: #333;
      line-height: 1.4;
      
    }
    a { color: inherit; text-decoration: none; }
  
    /* ===== Container & Centering ===== */
    .container {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      position: relative;
      padding-bottom: 40px;
    }
  
    /* ===== Flower border effect ===== */
    .flower-left, .flower-right {
  position: fixed; /* stays stuck to page edges */
  top: 0;
  bottom: 0;
  width: 66px;              /* match your strip width */
  pointer-events: none;     /* so they don’t block clicks */
  background-repeat: repeat-y;
}

.flower-left {
  left: 0;
  background-image: url("IMG/flo_left.jpg");
}

.flower-right {
  right: 0;
  background-image: url("IMG/flo_righ.jpg");
}
/* On mobile: shrink them down */
@media (max-width: 600px) {
  .flower-left,
  .flower-right {
    background-size: 26px auto; /* shrink more on small screens */
    width: 26px;                /* container matches scaled width */
    opacity: 0;  /* optional: slightly lighter */
  }
}
  
    /* ===== Header / Logo / Title ===== */
    .header {
      text-align: center;
      margin-top: 20px;
    }
    .logo {
      width: 490px;
      height: auto;
      margin: 0 auto 8px;
    }
     @media (max-width: 790px) {
       .logo {
      width: 335px;
      height: auto;
      margin: 0 auto 8px;
    }
     }
    .title-text {
      font-size: 1.3em;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }
  
    /* ===== Main character / hero / center area ===== */
   
.pictochat-box {
  margin: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Base bubble style */
.pictochat-message {
  max-width: 70%;
  padding: 12px 14px;
  font-size: 0.95em;     /* smaller text */
  line-height: 1.4;
  border: 2px solid #444;
  border-radius: 14px;
  position: relative;
  box-shadow: 2px 2px 0 #888;
}

/* Left (odd bubbles) */
.pictochat-message:nth-child(odd) {
  align-self: flex-start;
  background: #f0f0f8;
}

/* Right (even bubbles) */
.pictochat-message:nth-child(even) {
  align-self: flex-end;
  background: #e8f8ff;
}

/* Bubble tails pointing OUTWARD */
.pictochat-message:nth-child(odd)::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 20px;  /* tail OUTSIDE on left */
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #f0f0f8;
  filter: drop-shadow(-1px 1px 0 #444);
}

.pictochat-message:nth-child(even)::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: 20px;  /* tail OUTSIDE on right */
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #e8f8ff;
  filter: drop-shadow(1px 1px 0 #444);
}


  
    /* ===== Movie buttons row ===== */
    .movies {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 16px 0;
    }
    .movie-btn {
      flex: 1;
      max-width: 45%;
      background: #7c3f00; /* placeholder bluish tone */
      color: #fff;
      font-weight: bold;
      font-size: 0.95em;
      padding: 10px 0;
      border-radius: 6px;
      text-align: center;
      box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    }
  
    /* ===== Navigation / section buttons ===== */
    .nav-buttons {
      margin-top: 20px;
    }
.nav-buttons {
  margin-top: 20px;
  text-align: center;
}

.nav-img-btn {
  display: block;
  margin: 10px auto;
  width: 90%;     /* scale for mobile */
  max-width: 360px; /* match your design */
  height: auto;
  image-rendering: crisp-edges; /* keeps retro pixel vibe */
}

    
    .nav-btn::before {
      content: "";
      position: absolute;
      top: -4px; left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 4px;
      background: rgba(255,255,255,0.6);
      border-radius: 2px;
    }
  
    /* ===== Footer ===== */
    footer {
      margin-top: 30px;
      text-align: center;
      font-size: 0.85em;
      color: #666;
    }
  
    /* ===== Responsive tweaks ===== */
    @media (min-width: 360px) {
      .info-box { margin: 12px 24px; }
      .nav-btn { width: 85%; }
    }
    
    
    
  /* DS NAV */
.ds-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

.ds-nav a {
  display: inline-block;
  text-decoration: none;
  color: #000;
  background: linear-gradient(to bottom, #fdfdfd, #d9d9e8);
  border: 2px solid #333;
  border-radius: 8px;
  padding: 6px 16px;
  font-family: "Press Start 2P", monospace; /* retro pixel font */
  font-size: 12px;
  box-shadow: 2px 2px 0 #888;
  cursor: pointer;
  transition: transform 0.1s box-shadow 0.1s;
}

.ds-nav a:hover {
  transform: translateY(-2px);
  box-shadow: 2px 4px 0 #666;
}

.ds-nav a:active {
  transform: translateY(1px);
  box-shadow: 1px 1px 0 #444;
}


/* PICTOCHAT BUBBLES */
.pictochat-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px;
}

.pictochat-message {
  background: #fdfdfd;
  border: 2px solid #444;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  color: #111;
  box-shadow: 2px 2px 0 #999;
  max-width: 75%;
  margin: 10px 0;
}

/* bubble tails */
.pictochat-message.left::after,
.pictochat-message.right::after {
  content: "";
  position: absolute;
  bottom: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

/* left bubble — tail on the RIGHT side */
.pictochat-message.left::after {
  right: 20px;
  border-top: 10px solid #fdfdfd;
  filter: drop-shadow(1px 1px 0 #444);
}

/* right bubble — tail on the LEFT side */
.pictochat-message.right::after {
  left: 20px;
  border-top: 10px solid #fdfdfd;
  filter: drop-shadow(-1px 1px 0 #444);
}

/* expandable container */
.expandable .link-list {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
  margin: 0;
  padding-left: 16px;
}

.expandable.open .link-list {
  max-height: 500px; /* enough to reveal links */
  opacity: 1;
  margin-top: 8px;
}