:root{
      --ink: #e0e0e0;
      --accent: #b9a5cd;
      --accent-2: #f9fab0;
      --accent-3: #b880dd;
      --bubble: #37333d;
      --bubble2: #dad5f8;
      --bubble3: #d7a6ee;
      --bubble4: #70ffe7;
      --bubble5: #95f3f3;
      --bubble6: #89da96;
      --bubble7: #f9fab0;
      --bubble8: #fcc79c;
      --divider: #9798df;
      --shadow: 0 6px 18px rgba(0, 0, 0, 0.192);
      --radius: 20px;
      --transition: all .25s ease;
    }
    html,body{position:relative;margin-left: 13%;margin-right: 12%;margin-top: 2%;background:#4a4656;color:var(--ink);font-family:"Comic Sans MS","Chalkboard SE"}

    .wrap{max-width:820px;margin:0 auto;padding:72px 20px 120px;position:relative}
    header{position:sticky;top:0;margin-right: -10%;margin-left: -10%;background:#4a4656;z-index:3;padding:16px 0 8px;border-bottom:2px solid rgba(0, 0, 0, 0);display:flex;align-items:center;justify-content:space-between}
    h1{margin:0;font-size:32px;letter-spacing:.5px}

    .home-btn{font-size:28px;text-decoration:none;transition:var(--transition)}
    .home-btn:hover{transform:rotate(20deg) scale(1.2)}

    .meta{margin:20px 0;padding:20px;border:2px dashed var(--divider);border-radius:16px;box-shadow:var(--shadow);background:#bcaddf;transition:var(--transition)}
    .meta:hover{transform:translateY(-2px) scale(1.01)}
    .meta h2{margin-top:0;color:#1b1017}
    .release{font-size:14px;opacity:.8;margin-bottom:12px}

    .characters{margin:12px 0;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
    .characters b{flex-basis:100%;font-size:16px;color:#0e0f1d}
    .characters img{width:48px;height:48px;border-radius:50%;box-shadow:var(--shadow);transition:var(--transition)}
    .characters img:hover{transform:scale(1.15) rotate(-5deg)}

    .nav-btn{position:fixed;top:50%;transform:scale(-50%);z-index:10;border:none;background:rgba(194, 212, 238, 0.116);box-shadow:var(--shadow);width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
    .nav-btn:hover{background:var(--accent);color:white;transform:translateY(-50%) scale(1.15);}
    .nav-prev{left:12px}
    .nav-next{right:72px}
    .nav-page{right:12px}

    .scene{margin:28px 0}
    .line{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:flex-start;margin:18px 0;transition:var(--transition)}
    .line.no-avatar{grid-template-columns:56px 1fr;margin-top:-12px}

    .avatar{width:48px;height:48px;border-radius:50%;background:#37333d center/cover no-repeat;border:3px solid var(--accent);box-shadow:var(--shadow);transition:var(--transition)}
    .avatar.initials{display:flex;align-items:center;justify-content:center;font-weight:bold}
    .avatar:hover{transform:rotate(-6deg) scale(1.1);border-color:var(--accent-2)}

    .bubble-wrap{display:flex;flex-direction:column;align-items:flex-start}
    .bubble-name{font-weight:bold;margin-bottom:4px;margin-left:6px;color:#b9a5cd}

    .bubble{background:var(--bubble);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);position:relative;transition:var(--transition);max-width:600px}
    .bubble::after{content:"";position:absolute;left:-9px;top:10px;width:0;height:0;rotate: 15deg;border-top:10px solid transparent;border-bottom:9px solid transparent;border-right:19px solid var(--bubble)}
    .bubble:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 20px rgba(37, 1, 26, 0.11)}

    .line.no-avatar .bubble::after{display:none}

    .divider{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:30px 0}
    .divider .rule{height:2px;background:linear-gradient(90deg, var(--accent), var(--divider), var(--accent-2));border-radius:6px}
    .divider .chip{background:rgb(128, 164, 181);border:2px dashed var(--divider);padding:6px 14px;border-radius:999px;box-shadow:var(--shadow);font-weight:bold;transition:var(--transition)}
    .divider .chip:hover{background:var(--accent);color:white}

    .figure{position:relative;margin: 40px auto;max-width:90%;text-align:center}
    .figure img{max-width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow);transition:var(--transition)}
    .figure img:hover{transform:scale(1.03)}
    .figure figcaption{font-size:14px;margin-top:6px;opacity:0}

    .figure-inline {
  display: inline-block;
  margin: 10px auto;
}
.figure-wrapper {
  margin: 24px auto;
  padding: 12px;
  text-align: center;
  background: rgba(255,255,255,0.05);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.figure-wrapper figure {
  display: inline-block;
  max-width: 100%;
}

.figure-wrapper img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

blockquote {
  margin: 24px auto;
  padding: 0;                 /* remove padding so image can flush edge to edge */
  max-width: 90%;
  text-align: center;

  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;           /* ensure rounded corners clip the image */
}

/* Let the figure fill the blockquote entirely */
blockquote figure {
  display: block;
  width: 100%;
  margin: 0;
}
.blockquote figure:hover{
  transform:scale(1.15)}

/* Force image to take full width of blockquote */
blockquote img {
  display: block;
  width: 100%;     /* 👈 fills full width */
  height: auto;    /* 👈 scales height proportionally */
  border-radius: 0; /* radius handled by blockquote */
}

/* Optional caption styling */
blockquote figcaption {
  margin: 8px 12px;
  font-size: 14px;
  color: var(--ink);
  opacity: 0.85;
  text-align: center;
}



    .controls{position:relative;bottom:0;display:flex;gap:12px;justify-content:center;padding:14px 0;background:rgba(255, 255, 255, 0)}
    .btn{border:none;background:linear-gradient(135deg, var(--accent), var(--accent-2));color:rgb(0, 0, 0);padding:12px 18px;border-radius:16px;cursor:pointer;box-shadow:var(--shadow);font-weight:bold;transition:var(--transition)}
    .btn:hover{filter:brightness(1.1);transform:translateY(-2px) scale(1.03)}
    .btn:active{transform:translateY(1px)}

    .tl-notes{margin-top:60px;padding:20px;border-top:3px dashed var(--divider);font-size:14px;line-height:1.5;position:relative}
    .tl-notes::before{content:"TL NOTES";position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:rgb(255, 255, 255);padding:0 12px;color:#6a00f4;font-weight:bold;border:2px dashed var(--divider);border-radius:12px;box-shadow:var(--shadow)}
    .tl-notes h2{display:none}

   .note {
  color: var(--accent-3);   /* 👈 word itself is accent--3 */
  font-weight: bold;
}

.note:hover::after {
  left: 50%;
  transform: translateX(-50%);
  content: attr(data-note);
  position: absolute;
  top: auto;
  bottom: 80%; /* default: above the word */
  margin-bottom: 6px;
  background: #c5b679ed;
  border: 1px solid var(--divider);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  white-space: pre-wrap;        /* allow wrapping */
  max-width: 860px;           /* prevent sprawling horizontally */
  line-height: 1.4;
  font-size: 13px;
  color: var(--ink);
  z-index: 9999;              /* keep it on top */
}