html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

#stars {
  position: fixed;
  inset: 0;
  z-index: -1;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px;
  line-height: 1.85;
}

h1 {
  text-align: center;
  color: #ffd700;
  text-shadow: 0 0 8px #ffcc33;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  margin: 16px 0 18px;
}

.letter {
  border: 2px solid #d4af37;
  border-radius: 12px;
  background: linear-gradient(145deg, #1b1b1b 0%, #0e0e0e 100%);
  color: #f5f5dc;
  padding: 18px 22px;
  margin: 28px auto;
  max-width: 780px;
  box-shadow: 0 0 20px rgba(255, 255, 200, 0.18);
  text-align: center;
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  position: relative;
  animation: fadeIn 1.5s ease both;
}
.letter h2 {
  margin: 0 0 8px;
  color: #ffd700;
  text-shadow: 0 0 6px #ffdd77;
}

.puzzle-image img {
  max-width: 95%;
  border: 2px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.22);
  opacity: 0;
  animation: imgIn 1.2s ease 0.4s forwards;
}

.controls {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.controls input[type="text"] {
  padding: 10px;
  font-size: 18px;
  border-radius: 8px;
  border: none;
  width: min(420px, 80vw);
}

.btn {
  padding: 10px 16px;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}
.btn-primary { background: #ff6600; color: #fff; }
.btn-primary:hover { background: #ffaa00; }
.btn-hint { background: #0077ff; color: #fff; }
.btn-hint:hover { background: #33aaff; }
.btn-answer { background: #ff4444; color: #fff; }
.btn-answer:hover { background: #ff7777; }

#message {
  text-align: center;
  margin-top: 10px;
  min-height: 1.4em;
}

.hint {
  display: none;
  text-align: center;
  color: #ffcc00;
  font-size: 1.05rem;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.explain, #ending {
  display: none;
  opacity: 0;
  transition: opacity 1s ease;
  background: rgba(0,0,0,0.7);
  border: 2px solid #ffd700;
  border-radius: 12px;
  padding: 18px;
  color: #fff9d6;
  margin-top: 20px;
}

.next a {
  text-decoration: none;
  background: #ffcc00;
  color: #000;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 8px;
  transition: 0.3s;
}
.next a:hover {
  background: #ffee88;
  box-shadow: 0 0 14px #fff08a;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes imgIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }

@media (max-width: 540px) {
  .controls { flex-direction: column; align-items: center; }
  .btn { width: 100%; margin-top: 6px; }
}

.optics-rules {
  background: rgba(0, 0, 20, 0.6);
  border: 1px solid #44aaff;
  border-radius: 16px;
  padding: 20px;
  margin: 40px 0;
  box-shadow: 0 0 10px #00bfff33;
  line-height: 1.8;
}

.optics-rules h2 {
  color: #66ccff;
  text-align: center;
  margin-bottom: 16px;
  font-weight: 600;
}

.optics-rules ul {
  list-style: none;
  padding-left: 0;
}

.optics-rules li {
  margin-bottom: 14px;
  color: #eeeeee;
}

/* === キャラ演出共通設定 === */

.scene-visual {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  padding: 40px 20px;
  margin: 20px 0 40px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  background-color: #000;
  overflow: hidden;
}

/* 背景の上に薄いフィルターで夜っぽさを出す */
.scene-visual::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.05), rgba(0,0,0,0.8));
  z-index: 0;
}

.dialogue {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 16px 0;
  z-index: 1;
}

.dialogue.left {
  justify-content: flex-start;
  animation: fadeInLeft 1.2s ease;
}

.dialogue.right {
  justify-content: flex-end;
  animation: fadeInRight 1.2s ease;
}

.char-face {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #00ccff;
  box-shadow: 0 0 10px #00ccff55;
  background: #001020;
}

.speech {
  max-width: 70%;
  background: rgba(255,255,255,0.08);
  border-left: 3px solid #00ccff;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 12px;
  color: #e8faff;
  font-size: 1.05em;
  backdrop-filter: blur(4px);
}

/* 左右配置に応じた調整 */
.dialogue.left .char-face { margin-right: 12px; }
.dialogue.right .char-face { margin-left: 12px; border-color: #ff66cc; }

/* === 登場アニメーション === */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* === キャラ名ラベル（ネームタグ） === */
.char-name {
  display: inline-block;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.9em;
  margin-bottom: 4px;
  color: #fff;
}

/* キャラ別の色分け */
.char-name.conan {
  background: linear-gradient(90deg, #007bff, #00aaff);
  box-shadow: 0 0 8px #007bffaa;
}
.char-name.haibara {
  background: linear-gradient(90deg, #b84bff, #e07fff);
  box-shadow: 0 0 8px #b84bffaa;
}
.char-name.agasa {
  background: linear-gradient(90deg, #ffb300, #ff8800);
  box-shadow: 0 0 8px #ffbb00aa;
}
.char-name.ayumi {
  background: linear-gradient(90deg, #ff69b4, #ff99cc);
  box-shadow: 0 0 8px #ff99ccaa;
}
.char-name.genta {
  background: linear-gradient(90deg, #d35400, #ff7043);
  box-shadow: 0 0 8px #ff7043aa;
}
.char-name.mitsuhiko {
  background: linear-gradient(90deg, #2ecc71, #58d68d);
  box-shadow: 0 0 8px #58d68daa;
}
.char-name.kid {
  background: linear-gradient(90deg, #ffffff, #a0a0a0);
  color: #111;
  box-shadow: 0 0 8px #ffffffaa;
}

/* 名前を吹き出し上に自然に配置 */
.speech {
  position: relative;
  background: rgba(255,255,255,0.07);
  border-left: 3px solid #00ccff;
  border-radius: 8px;
  padding: 8px 14px;
  margin: 0 12px;
  color: #e8faff;
  backdrop-filter: blur(4px);
  max-width: 70%;
}

.dialogue.left .speech { text-align: left; }
.dialogue.right .speech { text-align: left; }

.learn-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,255,204,0.3);
  border-radius: 12px;
  padding: 1.5em;
  margin-top: 2em;
  color: #eee;
  box-shadow: 0 0 10px rgba(0,255,204,0.2);
}
.learn-box h3 {
  color: #00ffcc;
  margin-bottom: 0.5em;
}
.learn-box a {
  color: #00ffee;
  text-decoration: underline;
}
.learn-box a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px #00ffcc;
}

#explanation, #ending, #learn-box {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.creator-box {
  margin-top: 50px;
  padding: 25px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e0f7ff;
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.25);
}

.creator-box h3 {
  text-align: center;
  font-size: 1.3em;
  color: #00ccff;
  margin-bottom: 20px;
}

.creator-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

.creator-photo-square {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px; /* 少し丸みを残して柔らかく */
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}

.creator-text {
  max-width: 480px;
  font-size: 0.95em;
  line-height: 1.6em;
}

.creator-box a {
  color: #7fe8ff;
  text-decoration: none;
  border-bottom: 1px dotted #66d9ff;
  transition: color 0.2s;
}

.creator-box a:hover {
  color: #00ffff;
}

.creator-signature {
  margin-top: 15px;
  font-style: italic;
  color: #a6f2ff;
  text-align: right;
}