/* ============================================================
   うみのウォーターソート — style.css
   リラックスして楽しめる、やわらかな海中の世界
   ============================================================ */

/* ---------- カラーパレット（SPEC.md 色ID契約） ---------- */
:root {
  --c1: #17305f;  /* 1: 深い青（背景より濃くして輪郭を明確に） */
  --c2: #55e6f2;  /* 2: 水色（背景より明るくして識別しやすく） */
  --c3: #35b5a5;  /* 3: ターコイズ */
  --c4: #f2917e;  /* 4: 珊瑚ピンク */
  --c5: #eddec0;  /* 5: 砂ベージュ */
  --c6: #6fae66;  /* 6: 海藻グリーン */
  --c7: #a184cf;  /* 7: イソギンチャク紫 */
  --c8: #f4c136;  /* 8: ひとで黄色 */

  --sea-deep:   #0c3a6e;
  --sea-mid:    #17668d;
  --sea-light:  #3c9db4;
  --sea-glow:   #8fd5df;
  --glass-line: rgba(255, 255, 255, 0.55);
  --text-white: #f4fbff;
}

/* ---------- ベース ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  font-family: "Hiragino Maru Gothic ProN", "HG Maru Gothic M-PRO",
               "Yu Gothic UI", "Meiryo", sans-serif;
  color: var(--text-white);
  background: linear-gradient(180deg,
              var(--sea-glow) 0%,
              var(--sea-light) 22%,
              var(--sea-mid) 55%,
              var(--sea-deep) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

button {
  font-family: inherit;
}

/* ============================================================
   海中の背景（#ocean-bg）
   ============================================================ */
#ocean-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- ゆらめく光のカーテン --- */
.light-ray {
  position: absolute;
  top: -12vh;
  width: 130px;
  height: 78vh;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.20),
              rgba(255, 255, 255, 0.05) 55%,
              rgba(255, 255, 255, 0) 100%);
  transform: skewX(-14deg);
  /* 画面全体が曇って見えないよう、ぼかしは使わない */
  animation: ray-shimmer 9s ease-in-out infinite alternate;
}
.ray1 { left: 12%; animation-delay: 0s;   width: 110px; }
.ray2 { left: 32%; animation-delay: -3s;  width: 160px; opacity: 0.8; }
.ray3 { left: 58%; animation-delay: -6s;  width: 90px; }
.ray4 { left: 78%; animation-delay: -1.5s; width: 140px; opacity: 0.7; }

@keyframes ray-shimmer {
  0%   { opacity: 0.35; transform: skewX(-14deg) translateX(0); }
  50%  { opacity: 0.75; }
  100% { opacity: 0.4;  transform: skewX(-11deg) translateX(24px); }
}

/* --- ゆっくり昇る泡 --- */
.bubble {
  position: absolute;
  bottom: -50px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,
              rgba(255, 255, 255, 0.75),
              rgba(255, 255, 255, 0.12) 45%,
              rgba(255, 255, 255, 0.04) 70%);
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.5),
              0 0 6px rgba(255, 255, 255, 0.12);
  animation: bubble-rise linear infinite;
}
.b1  { left: 6%;  width: 14px; height: 14px; animation-duration: 19s; animation-delay: 0s; }
.b2  { left: 15%; width: 8px;  height: 8px;  animation-duration: 24s; animation-delay: -7s; }
.b3  { left: 24%; width: 20px; height: 20px; animation-duration: 17s; animation-delay: -12s; }
.b4  { left: 37%; width: 10px; height: 10px; animation-duration: 26s; animation-delay: -3s; }
.b5  { left: 48%; width: 16px; height: 16px; animation-duration: 21s; animation-delay: -15s; }
.b6  { left: 58%; width: 7px;  height: 7px;  animation-duration: 28s; animation-delay: -9s; }
.b7  { left: 67%; width: 22px; height: 22px; animation-duration: 18s; animation-delay: -5s; }
.b8  { left: 76%; width: 12px; height: 12px; animation-duration: 23s; animation-delay: -18s; }
.b9  { left: 86%; width: 9px;  height: 9px;  animation-duration: 27s; animation-delay: -2s; }
.b10 { left: 93%; width: 15px; height: 15px; animation-duration: 20s; animation-delay: -11s; }

@keyframes bubble-rise {
  0%   { transform: translate(0, 0) scale(0.85); opacity: 0; }
  8%   { opacity: 0.9; }
  50%  { transform: translate(14px, -55vh) scale(1); }
  92%  { opacity: 0.7; }
  100% { transform: translate(-8px, -110vh) scale(1.1); opacity: 0; }
}

/* --- のんびり泳ぐ小魚 --- */
.fish {
  position: absolute;
  left: 0;
  width: 58px;
  height: 29px;
  opacity: 0.75;
  /* transformだけで動かし、画面配置の再計算を避けて負荷を抑える */
  animation: fish-swim linear infinite;
  will-change: transform;
}
.fish-body { fill: rgba(255, 214, 170, 0.85); }
.fish-tail { fill: rgba(250, 190, 140, 0.8); }
.fish-fin  { fill: rgba(250, 190, 140, 0.7); }
.fish-eye  { fill: rgba(60, 70, 90, 0.8); }

.fish1 { top: 26%; animation-duration: 55s; animation-delay: -10s; }
.fish2 { top: 46%; width: 40px; height: 20px; animation-duration: 70s; animation-delay: -40s; }
.fish2 .fish-body { fill: rgba(170, 220, 235, 0.8); }
.fish2 .fish-tail { fill: rgba(140, 200, 225, 0.75); }
.fish3 { top: 64%; width: 30px; height: 15px; animation-duration: 62s; animation-delay: -25s; }
.fish3 .fish-body { fill: rgba(200, 235, 210, 0.75); }
.fish3 .fish-tail { fill: rgba(170, 220, 190, 0.7); }

@keyframes fish-swim {
  0%   { transform: translate3d(105vw, 0, 0); }
  25%  { transform: translate3d(75vw, -16px, 0); }
  50%  { transform: translate3d(45vw, 6px, 0); }
  75%  { transform: translate3d(15vw, -10px, 0); }
  100% { transform: translate3d(-12vw, 0, 0); }
}

/* --- 海底 --- */
#seafloor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
}
.sand-back  { fill: rgba(226, 205, 156, 0.28); }
.sand-front { fill: rgba(233, 214, 164, 0.38); }

/* 海藻・イソギンチャクのゆらぎ */
.sway-a, .sway-b {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.sway-a { animation: kelp-sway 7s ease-in-out infinite alternate; }
.sway-b { animation: kelp-sway 9s ease-in-out infinite alternate-reverse; }

@keyframes kelp-sway {
  from { transform: rotate(-3.5deg); }
  to   { transform: rotate(3.5deg); }
}

/* ============================================================
   ヘッダー
   ============================================================ */
#game-header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 18px 26px 8px;
  max-width: 1100px;
  margin: 0 auto;
}

#game-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 10px rgba(10, 50, 100, 0.45),
               0 0 24px rgba(168, 226, 239, 0.35);
}
#game-title::before {
  content: "🌊 ";
}

#level-label {
  padding: 6px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 6px rgba(10, 50, 100, 0.4);
}

#controls {
  display: flex;
  gap: 10px;
}

/* ---------- ボタン共通 ---------- */
#btn-undo,
#btn-reset,
#btn-next {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-white);
  background: linear-gradient(180deg, #4fa8c9 0%, #2d7bb0 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(8, 40, 80, 0.35),
              inset 0 -3px 6px rgba(8, 40, 80, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#btn-undo:hover,
#btn-reset:hover,
#btn-next:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(8, 40, 80, 0.4),
              inset 0 -3px 6px rgba(8, 40, 80, 0.2);
  filter: brightness(1.08);
}

#btn-undo:active,
#btn-reset:active,
#btn-next:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(8, 40, 80, 0.35),
              inset 0 2px 6px rgba(8, 40, 80, 0.25);
}

#btn-undo:focus-visible,
#btn-reset:focus-visible,
#btn-next:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

/* ============================================================
   ゲーム盤（チューブ）
   ============================================================ */
#game-board {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 34px 22px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 46px 18px 120px;
  min-height: 340px;
}

/* --- チューブ --- */
.tube {
  cursor: pointer;
  padding: 14px 6px 10px;  /* 当たり判定を少し広めに */
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
              filter 0.28s ease;
  -webkit-tap-highlight-color: transparent;
}

.tube:hover {
  transform: translateY(-5px);
}

.tube.selected {
  transform: translateY(-18px);
  filter: drop-shadow(0 0 7px rgba(210, 246, 255, 0.5));
}

/* 選択中は試験管そのものの縁を明るく光らせる */
.tube.selected .tube-glass {
  border-color: rgba(225, 250, 255, 0.9);
  box-shadow: inset -6px 0 10px rgba(20, 60, 110, 0.14),
              0 0 0 2px rgba(205, 244, 255, 0.28),
              0 0 13px 4px rgba(190, 238, 255, 0.42),
              0 12px 24px rgba(6, 34, 70, 0.42);
}

/* --- ガラスの試験管 --- */
.tube-glass {
  position: relative;
  width: 62px;
  height: 232px;
  display: flex;
  flex-direction: column-reverse;   /* 下から積む（SPEC契約） */
  overflow: hidden;
  border: 2px solid var(--glass-line);
  border-radius: 12px 12px 32px 32px;
  background: linear-gradient(105deg,
              rgba(255, 255, 255, 0.26) 0%,
              rgba(255, 255, 255, 0.08) 30%,
              rgba(255, 255, 255, 0.02) 55%,
              rgba(255, 255, 255, 0.14) 85%,
              rgba(255, 255, 255, 0.22) 100%);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.18),
              inset -6px 0 10px rgba(20, 60, 110, 0.18),
              0 10px 22px rgba(6, 34, 70, 0.4);
}

/* ガラスの縦ハイライト（水より手前に光る） */
.tube-glass::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 14px;
  left: 9px;
  width: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.55),
              rgba(255, 255, 255, 0.12) 60%,
              rgba(255, 255, 255, 0.3));
  pointer-events: none;
  z-index: 2;
}

/* 口元のうっすらした光沢 */
.tube-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.5),
              rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 2;
}

/* --- 海水 --- */
.water {
  flex: 0 0 25%;          /* 1マス = 内側の25%（SPEC契約） */
  max-height: 25%;
  width: 100%;
  position: relative;
  /* 水面のつや */
  background-image: linear-gradient(180deg,
                    rgba(255, 255, 255, 0.3) 0%,
                    rgba(255, 255, 255, 0.05) 30%,
                    rgba(255, 255, 255, 0) 60%,
                    rgba(6, 30, 60, 0.14) 100%);
  box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.12),
              inset -3px 0 6px rgba(6, 30, 60, 0.1),
              inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* いちばん下の水は丸底に沿わせる */
.water:first-child {
  border-radius: 0 0 28px 28px;
}

/* 色ID → CSS変数（SPEC契約） */
.water[data-color="1"] { background-color: var(--c1); }
.water[data-color="2"] { background-color: var(--c2); }
.water[data-color="3"] { background-color: var(--c3); }
.water[data-color="4"] { background-color: var(--c4); }
.water[data-color="5"] { background-color: var(--c5); }
.water[data-color="6"] { background-color: var(--c6); }
.water[data-color="7"] { background-color: var(--c7); }
.water[data-color="8"] { background-color: var(--c8); }

/* ============================================================
   クリアオーバーレイ
   ============================================================ */
#win-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 45, 85, 0.55);
  backdrop-filter: blur(5px);
}

#win-overlay.hidden {
  display: none;
}

#win-card {
  position: relative;
  text-align: center;
  padding: 46px 60px 40px;
  border-radius: 28px;
  background: linear-gradient(165deg,
              rgba(230, 248, 255, 0.97) 0%,
              rgba(190, 228, 244, 0.97) 55%,
              rgba(170, 216, 238, 0.97) 100%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 50px rgba(4, 26, 55, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 0 60px rgba(168, 226, 239, 0.35);
  animation: card-pop 0.5s cubic-bezier(0.34, 1.45, 0.64, 1);
}

/* 貝殻と真珠の飾り */
#win-card::before {
  content: "🐚";
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 46px;
  filter: drop-shadow(0 4px 8px rgba(4, 26, 55, 0.35));
}
#win-card::after {
  content: "🫧 ⭐ 🫧";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 0.4em;
  opacity: 0.85;
}

@keyframes card-pop {
  0%   { transform: scale(0.7) translateY(30px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

#win-message {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #135a86;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8),
               0 4px 14px rgba(90, 180, 220, 0.4);
  margin-bottom: 22px;
}

#btn-next {
  padding: 13px 34px;
  font-size: 1.1rem;
  background: linear-gradient(180deg, #ffb07c 0%, #f2917e 100%);
  box-shadow: 0 5px 14px rgba(160, 70, 50, 0.35),
              inset 0 -3px 6px rgba(160, 70, 50, 0.25);
}
#btn-next:hover {
  box-shadow: 0 9px 20px rgba(160, 70, 50, 0.4),
              inset 0 -3px 6px rgba(160, 70, 50, 0.25);
}

/* ============================================================
   レスポンシブ（スマホ縦）
   ============================================================ */
@media (max-width: 640px) {
  #game-header {
    justify-content: center;
    text-align: center;
    padding: 14px 12px 4px;
  }

  #game-title { font-size: 1.2rem; width: 100%; }

  #game-board {
    gap: 22px 10px;
    padding: 30px 8px 110px;
  }

  .tube {
    padding: 10px 3px 8px;
  }

  .tube-glass {
    width: 46px;
    height: 176px;
    border-radius: 10px 10px 24px 24px;
  }

  .tube-glass::after { left: 6px; width: 6px; }

  .water:first-child { border-radius: 0 0 20px 20px; }

  #win-card { padding: 38px 34px 32px; }
  #win-message { font-size: 1.9rem; }

  .fish1 { width: 44px; }
  #seafloor { height: 150px; }
}

/* ============================================================
   動きを減らす設定の尊重（酔いやすい方への配慮）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .light-ray, .bubble, .fish,
  .sway-a, .sway-b {
    animation: none;
  }
  .bubble { opacity: 0.4; bottom: auto; top: 30%; }
  .fish { left: 20%; }
  .fish2 { left: 65%; }
  .fish3 { left: 45%; }
  .tube, .water, #win-card,
  #btn-undo, #btn-reset, #btn-next {
    transition: none;
    animation: none;
  }
}