:root {
    --bg: #0b1020;
    --panel: rgba(255,255,255,0.08);
    --panel-blur: blur(8px);
    --text: #f4f8ff;
    --accent: #8ab4ff;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: radial-gradient(1200px 800px at 70% 20%, #132046 0%, #0b1020 40%, #070b17 100%);
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
    overflow: hidden; /* 川のエリアは全画面 */
  }

  /* 滝エリア */
  #river {
    position: fixed;
    inset: 0;
    overflow: hidden;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
  }

  /* 流れる単語 */
  .word {
    position: absolute;
    top: -20vh; /* 画面外から登場 */
    white-space: nowrap;
    pointer-events: none; /* マウスを素通り */
    opacity: 0;
    transform: translateY(-10vh) translateX(0) rotate(0deg);
    animation-name: fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  @keyframes fall {
    0% { opacity: 0; transform: translateY(-12vh) translateX(var(--drift-start)) rotate(var(--rotate)); }
    8% { opacity: .95; }
    100% { opacity: 0; transform: translateY(110vh) translateX(var(--drift-end)) rotate(var(--rotate)); }
  }

  /* ぼかしで奥行き */
  .depth-0 { filter: blur(0px);   opacity: .95; }
  .depth-1 { filter: blur(1px);   opacity: .85; }
  .depth-2 { filter: blur(2px);   opacity: .75; }
  .depth-3 { filter: blur(3px);   opacity: .65; }

  /* コントロールパネル */
  .panel {
    position: fixed; inset: 16px auto auto 16px;
    min-width: 300px;
    padding: 14px 16px;
    background: var(--panel);
    backdrop-filter: saturate(120%) blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  .row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; margin: 8px 0; }
  .row label { font-size: 12px; opacity: .85; }
  .row input[type="range"] { width: 160px; }
  .btns { display:flex; gap:8px; margin-top: 8px; flex-wrap: wrap; }
  button, select {
    appearance: none; border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06); color: var(--text);
    padding: 8px 10px; border-radius: 12px; cursor: pointer; font-weight: 600;
  }
  button:hover { border-color: rgba(255,255,255,0.35); }
  .badge { font-size: 11px; opacity: .7; }
  .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; opacity: .8; }

  /* 右下: ヘルプ */
  .help {
    position: fixed; right: 16px; bottom: 16px; opacity: .7; font-size: 12px;
    background: var(--panel); border: 1px solid rgba(255,255,255,.12); padding: 8px 10px; border-radius: 12px;
  }

  /* スクロール抑止（モバイル）*/
  @media (hover:none) and (pointer:coarse) {
    .row input[type="range"] { width: 120px; }
    .panel { min-width: 260px; }
  }