body {
  background-color: #000000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.terminal {
  border: 2px solid #00ff00;
  padding: 2rem;
  width: 500px;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
}
h1 {
  text-shadow: 0 0 10px #00ff00;
  margin-top: 0;
}
input {
  background: #111;
  border: 1px solid #00ff00;
  color: #00ff00;
  padding: 10px;
  width: 90%;
  margin-bottom: 10px;
  font-family: inherit;
}
button {
  background: #00ff00;
  color: #000;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
}
button:hover {
  background: #fff;
}
#result {
  margin-top: 20px;
  white-space: pre-wrap;
}

/* オープニング画面の土台 */
#opening-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff; /* ロゴに合わせて白背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 最前面に表示 */
  transition: opacity 0.5s ease; /* 最後ふわっと消える用 */
}

/* ロゴ画像のアニメーション設定 */
#opening-logo {
  width: 60%; /* スマホでも見やすいサイズ */
  max-width: 500px;
  
  /* 2つのアニメーションを合体させます！ */
  /* 1. drop-sway: 2秒かけて落ちてくる */
  /* 2. pop: 2秒待ってから、0.5秒間隔でポヨンポヨンする */
  animation: 
    drop-sway 2.0s ease-out forwards,
    pop 0.6s ease-in-out 2.0s infinite;
}

/* アニメ1：ゆらゆら落ちてくる動き */
@keyframes drop-sway {
  0% {
    transform: translateY(-120vh) rotate(-15deg) translateX(-50px);
    opacity: 0;
  }
  40% {
    transform: translateY(-20vh) rotate(10deg) translateX(30px);
    opacity: 1;
  }
  70% {
    transform: translateY(5vh) rotate(-5deg) translateX(-10px);
  }
  100% {
    transform: translateY(0) rotate(0) translateX(0);
  }
}

/* アニメ2：中央でポヨンポヨン（ポップ） */
@keyframes pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); } /* 1.15倍に膨らむ */
}

/* 本編（ハッキング画面）の制御 */
.hidden {
  display: none; /* 最初は消しておく */
}

/* ハッキング画面がふわっと現れるアニメ */
.fade-in {
  animation: fadeInTerminal 1s forwards;
}
@keyframes fadeInTerminal {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* --- ▼▼▼ ここから、解説ウィンドウのデザイン ▼▼▼ --- */

dialog {
  background-color: #001100;
  border: 2px solid #00ff00;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  padding: 20px;
  max-width: 500px;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.5);
  margin: auto; /* 画面中央に配置 */
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.8); /* 背景を暗くする */
}

.close-btn {
  display: block;
  margin-top: 20px;
  background: #00ff00;
  color: black;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
}

.explain-btn {
  margin-top: 15px;
  background: transparent;
  border: 1px solid #00ff00;
  color: #00ff00;
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
}

.explain-btn:hover {
  opacity: 1;
  background: rgba(0, 255, 0, 0.1);
}

/* 文中のコード装飾 */
code {
  background: #003300;
  padding: 2px 5px;
  border: 1px solid #005500;
}