@charset "UTF-8";

body {
  font-family: "Kiwi Maru", sans-serif;
  text-align: center;
  /* 水中っぽく — 上を明るく、下を濃く、可愛いパステル寄り */
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,0.06), transparent 12%),
    radial-gradient(circle at 84% 92%, rgba(255,255,255,0.04), transparent 18%),
    linear-gradient(180deg, #e8fbff 0%, #c6f0fb 30%, #6fc4e6 65%, #023b50 100%);
  background-attachment: fixed;
  background-size: 140% 140%, 160% 160%, cover;
  color: #07374f;
  transition: background 0.6s ease;
  margin: 0;
}

/* DotGothic16 用クラス（ピクセル風の等幅フォント） */
.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* ゆっくり動く光のゆらぎ（カースティクス風） */
@keyframes bgShift {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%; }
  50% { background-position: 5% 3%, -5% -3%, 0% 0%; }
  100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
}

body {
  animation: bgShift 40s linear infinite;
}

.kiwi-maru-regular {
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: normal;
}

:root {
  --wave-color: #0088DD;
}

html {
  font-size: 62.5%;
}

.waveBorder {
  background: white;
  padding: 10px;
  position: relative;
  margin-bottom: 3rem;
}

.waveBorder_title {
  color: #0b66b3;
  text-align: center;
  font-size: 4rem;
}

.waveBorder::after {
  content: '';
  position: absolute;
  bottom: -2rem;
  left: 0;
  right: 0;
  height: 2rem;
  background:
    radial-gradient(
      circle at center 200%,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,1) 50%,
      rgba(255,255,255,1) 100%
    ) 0 0 / 4rem 1rem repeat-x,
    radial-gradient(
      circle at center top,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 50%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,0) 100%
    ) 2rem 0 / 4rem 2rem repeat-x;
}


#game-container {
  margin-top: 8rem;
}

#character-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 20px auto;
  max-width: 600px;
  margin-bottom: 2rem;
}

#character {
  width: 300px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* 吹き出しスタイル */
.speech-bubble {
  background: white;
  border: none;
  border-radius: 20px;
  padding: 16px 20px;
  position: relative;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(100, 180, 220, 0.3);
}

/* 吹き出しの三角（左向き） */
.speech-bubble::after {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid white;
}

#message {
  font-size: 16px;
  margin: 0;
  font-weight: bold;
  color: #2e7fb8;
}

#used-words {
  margin-top: 6rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(100, 180, 220, 0.2);
  display: none;
}

#used-words h3 {
  font-size: 2.2rem;
  margin: 0 0 0.6rem 0;
  color: #053a5a;
}

#used-words p {
  font-size: 1.8rem;
  line-height: 1.4;
  word-break: break-word;
}

/* 再スタートボタンのスタイル（元の丸いグラデーションボタンに戻す） */
#restart-btn {
  padding: 12px 26px;
  font-size: 18px;
  font-family: "DotGothic16", sans-serif;
  font-weight: 700;
  background: linear-gradient(135deg, #ffb3b3 0%, #ff7f7f 60%, #ff4d4d 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 6px 14px rgba(255,80,80,0.18), inset 0 -6px 18px rgba(255,255,255,0.06);
  display: none;
}

#restart-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 22px rgba(255,100,100,0.22), inset 0 -8px 22px rgba(255,255,255,0.08);
}

#restart-btn:active {
  transform: translateY(-1px) scale(0.995);
  box-shadow: 0 6px 14px rgba(255,80,80,0.18), inset 0 -4px 12px rgba(0,0,0,0.04);
}

/* 背景の泡エフェクト */
.bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* メインコンテンツを泡より手前に表示 */
header, #game-container {
  position: relative;
  z-index: 1;
}

.bubble {
  /* ピクセルアート風の泡に変更
     - 背景は 8x8 のピクセルSVG を使い、image-rendering: pixelated で等倍拡大を鮮明に表示
     - サイズは JS 側で 8 の倍数にし、background-size も合わせて拡大する */
  position: absolute;
  bottom: -120px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'><rect x='2' y='0' width='4' height='1' fill='%23e6f7ff'/><rect x='1' y='1' width='6' height='1' fill='%23e6f7ff'/><rect x='0' y='2' width='8' height='3' fill='%23e6f7ff'/><rect x='1' y='5' width='6' height='1' fill='%23e6f7ff'/><rect x='2' y='6' width='4' height='1' fill='%23e6f7ff'/><rect x='2' y='1' width='2' height='2' fill='%23ffffff'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  /* background-size は createBubble() で要素に合わせて設定する（等倍拡大を維持するため） */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  opacity: 0.95;
  /* ピクセルアートでは角を丸めない（ピクセルの角を見せる） */
  border-radius: 0;
  /* 変形はスケールを使わず位置だけ移動する */
  transform: translateX(var(--drift, 0px)) translateY(0);
  animation-name: bubble-rise;
  animation-timing-function: linear;
  will-change: transform, opacity;
}

@keyframes bubble-rise {
  0% {
    transform: translateX(var(--drift, 0px)) translateY(0);
    opacity: 0.95;
  }
  60% {
    transform: translateX(calc(var(--drift, 0px) + 8px)) translateY(-80vh);
    opacity: 0.7;
  }
  100% {
    transform: translateX(calc(var(--drift, 0px) + 12px)) translateY(-140vh);
    opacity: 0.08;
  }
}


/* 小さいスクリーンでは泡を少なめに見せる */
@media (max-width: 480px) {
  .bubble { opacity: 0.92; }
}