/* 画面1「海」— 全高のステージ / リスト表示（トグル） / 入力

   バブルそのものの見た目（.bub / .skin / 行き先の点 / 長押しメニュー）は
   js/bubble.js 側の CSS が持つ。ここは「海という場所」だけを書く。
   このファイルで .bub に触るのは、整列グリッドの中での置き方（絶対配置をやめる）だけ。 */

/* ---------- ペインの骨格 ----------
   ステージは画面の全高。入力と詳細はその上に重ねる。
   重ねた帯そのものは指を透かして、実際の入力欄とボタンだけが受け取る
   （帯の下に漂っているバブルを掴めなくしないため）。 */
/* 位置の基準は base.css の .pane（position:absolute; inset:0）。
   ここで position を書き直すと同じ詳細度で上書きしてしまい、
   中身が全部 absolute なぶんペインの高さが 0 に潰れる。書かないこと。 */

/* ---------- 海（ステージ） ---------- */
/* 海の底は「思いついたことを書く」の上端。
   入力欄の裏までステージを伸ばすと、落ちたバブルが入力欄の下に隠れて読めない。
   高さは入力欄の実寸なので、sea.js が --sea-floor に書き込む（フォント次第で変わるため）。 */
.sea-stage {
  position: absolute; top: 0; left: 0; right: 0;
  bottom: var(--sea-floor, 76px);
  /* clip はスクロール容器を作らない。hidden だと、中のバブルに focus が当たった拍子に
     ステージ自身がスクロールして、以後ずっと中身がずれる（実際に起きた）。
     clip を知らないブラウザのために hidden を先に書いて上書きさせる。 */
  overflow: hidden;
  overflow: clip;
  /* 水の絵そのものは .sea-view（カメラの窓）が持つ。窓はステージと同じ大きさで
     動かないので、この地の色が見えることはない（窓が必ず覆う）。
     置いてあるのは、窓を作り損ねたときに真っ白にしないための下敷き。 */
  background: var(--bg);
}

/* ---------- カメラの窓 ----------
   ステージいっぱいのまま動かない。**はみ出しを切り落とすだけ**の枠。
   倍率と寄せは中の .sea-world に掛かる（窓のほうを縮めると、世界が画面より
   広くなった途端に窓が先に切り落として、広げたぶんが見えなくなる）。
   水の絵と、流れる光・のぼる粒はここが持つ——カメラが動いても、
   水面の光は画面に対して同じところにあってよい（景色ではなく雰囲気なので）。 */
.sea-view {
  position: absolute; inset: 0;
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(180deg, var(--sea-1), var(--sea-2) 46%, var(--sea-3) 82%, var(--bg));
}

/* ドラッグ中にページが動かないようにするのはバブル側で受け持つ。
   ステージに touch-action:none を置くと、子孫の整列グリッドまで
   スクロールできなくなる（touch-action は先祖ぶんが積で効く）。 */
.sea-pane .bub { touch-action: none; }

/* ゆっくり流れる光のかたまり。要素を大きめに作って transform だけ動かす */
.sea-view::before {
  content: ''; position: absolute; inset: -45%;
  background:
    radial-gradient(closest-side at 30% 28%, var(--drift-a), transparent 72%),
    radial-gradient(closest-side at 72% 62%, var(--drift-b), transparent 70%);
  animation: sea-drift 30s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes sea-drift {
  from { transform: translate(-3.5%, -2.5%) scale(1); }
  to   { transform: translate(3.5%, 4%) scale(1.06); }
}

/* のぼっていく光の粒。パターンの縦周期＝移動量にして継ぎ目なくループさせる */
.sea-view::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -320px;
  background-image:
    radial-gradient(circle, var(--spark) 0 1.4px, transparent 2.6px),
    radial-gradient(circle, var(--spark-2) 0 1px, transparent 2px);
  background-size: 230px 320px, 150px 320px;
  background-position: 42px 30px, 96px 180px;
  opacity: .45;
  animation: spark-rise 26s linear infinite;
  pointer-events: none;
}
@keyframes spark-rise { to { transform: translateY(-320px); } }

/* ---------- 4つの面（追補3 §1） ----------

   　　　  ┌──────┐
   　　　  │ up   │
   ┌──────┼──────┼──────┐
   │ left │center│ right│
   └──────┼──────┼──────┘
   　　　  └──────┘

   面は「世界」の中に十字に並べて置き、世界ごと transform でずらして切り替える。
   ステージは overflow:clip なので、いま見ている面以外ははみ出して見えない。

   .sea-world を position:static のままにすると、中身が全部 absolute なぶん
   高さが 0 に潰れて、drift の relayout が clamp(fy*0, r, -r) を計算し、
   バブルが全部いちばん上に固まる（実際に起きた）。必ず inset:0 で場所を持たせる。 */
.sea-world {
  /* 広さは sea.js が px で入れる（引いた倍率のぶんだけ広がる）。
     位置合わせに負の余白を使うのは、transform の3つの口が
     倍率・寄せ・面の切り替えで埋まっているため。余白ならどれとも喧嘩しない。 */
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  /* 背景から始めた指は面の移動。ブラウザ側のスクロール／引っぱりに取られないようにする。
     整列グリッドは .sea-stage 直下の別の子なので、こちらの指定は届かない（縦になぞれる） */
  touch-action: none;
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
  will-change: transform, scale, translate;
}
/* ボタンで段を飛ぶときだけ滑らせる。ホイールとつまむ指は指に貼り付いていてほしい。
   面の切り替え（transform）の滑りは残したまま、倍率と寄せを足す。 */
.sea-stage.is-zsmooth .sea-world {
  transition: transform .32s cubic-bezier(.22,.61,.36,1),
              scale .2s cubic-bezier(.22,.61,.36,1),
              translate .2s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .sea-stage.is-zsmooth .sea-world { transition: none !important; }
}
/* 指で追っている間は、なめらかさより追従。離したときだけ滑らせる */
.sea-stage.is-swiping .sea-world { transition: none; }
@media (prefers-reduced-motion: reduce) {
  /* 動かさずに切り替える（指への追従も JS 側で止めている） */
  .sea-world { transition: none !important; }

  /* 面の背景で動き続けている3つも止める（B-5）。
     どれも「見ていなくても動き続ける」ものなので、reduce ではいちばん障る種類。
       ・sea-drift  … 流れる光のかたまり（30秒で行き来）
       ・spark-rise … のぼる光の粒（26秒でループ）
       ・sea-hint-bob … 空のときのヒント文の上下（6秒で行き来）
     止めるだけで、絵そのものは残す（背景の光も粒もヒント文も、静止した状態で見える）。
     spark-rise は translateY で継ぎ目を作っているが、animation を切ると
     初期位置＝継ぎ目の無い状態で止まるので、見た目は崩れない。 */
  .sea-view::before,
  .sea-view::after,
  .sea-hint { animation: none !important; }
}

/* 面は横一列に並ぶ。列の番号は sea.js が --col で渡す（中央 0、海は 1 から）。
   上下の固有枠だけは列とは別の軸で、中央の列の上と下に付く。 */
.sea-face {
  position: absolute; top: 0; left: calc(var(--col, 0) * 100%);
  width: 100%; height: 100%;
}
.sea-face[data-face="up"]    { left: 0; top: -100%; }
.sea-face[data-face="down"]  { left: 0; top: 100%; }

/* タグの海には、そのタグの色をうっすら敷く。名札だけだと、滑っている最中に
   「別の海へ来た」ことが絵として分からない。--face-c は sea.js が入れる */
.sea-face:not([data-face="center"]) {
  background: radial-gradient(120% 74% at 50% 0%,
    color-mix(in srgb, var(--face-c, transparent) 16%, transparent), transparent 72%);
}

/* 下の海（完了）だけは、色を**下から**敷く。上から敷くと、
   面を跨いだ瞬間に濃い側が画面の上端に来て、中央の海と入れ替わったことが
   絵で分からない（どの面も「上が濃い」になるため）。 */
.sea-face[data-face="down"] {
  background: radial-gradient(120% 74% at 50% 100%,
    color-mix(in srgb, var(--face-c, transparent) 16%, transparent), transparent 72%);
}

/* 面が空のときの言葉。読ませる文字なので --text-3 まで落とさない */
.sea-face-empty {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-content: center; text-align: center;
  color: var(--text-2); font-size: 13.5px; line-height: 1.95;
  padding: 0 34px; pointer-events: none;
}

/* ---------- いまどの面にいるか ----------
   常に見えていること（追補3 §1）。中央は「ぜんぶ」。 */
.sea-face-name {
  /* 左は ≡（左のメニュー、44px＋余白）の右。歯車と同じ理由で画面の中ではなく .app に居る */
  position: absolute; top: 16px; left: 62px; z-index: 8;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 40%; min-height: 32px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text); font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  pointer-events: none;
}
.sea-face-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 色の点は飾り（aria-hidden）。意味は必ず隣の名前が持つ */
.sea-face-name .dot,
.sea-edge-btn .dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--edge-c, var(--bub-edge));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent);
}

/* ---------- 端の手がかり ----------
   帯そのものが落とし先の広さを表し、丸い札が「そこに何の海があるか」を言う。
   ふだんは押すと移れる的。バブルを掴んでいる間は、名前を出したまま的ではなくなる
   （指はバブルを持っているので、押されることはない）。
   割り当てが無い向きには、そもそも出さない＝行けない・付かないと分かる。 */
.sea-edge {
  position: absolute; z-index: 7;
  pointer-events: none;                      /* 判定は指先の座標で。帯は当たり判定を持たない */
  transition: background-color .14s, box-shadow .14s;
}
/* 帯は辺の全長ではなく、辺の中央 1/3 だけ（利用者の指示）。深さ 64px は変えない。
   辺の全長だと、重力で底に溜まったバブルを少し横へ動かしただけでタグが付く。
   ここの 33.333% は sea.js の EDGE_SPAN と同じ値。片方だけ変えないこと
   ——見えている範囲と当たる範囲がずれると「光っているのに付かない」が起きる。
   幅の実寸: 375px 幅なら上の帯は 125px、680px 高なら左右の帯は約 227px。
   どちらも 44px を下回らない。 */
/* タグの落とし先の帯。辺の全長にわたり、厚みだけを薄くする（64px の 1/3 = 21px）。
   利用者の指示。JS 側の EDGE_BAND と同じ値なので、片方だけ変えないこと
   （ずれると「光っているのに付かない」が起きる）。 */
/* 帯はステージの子（倍率が掛からない）。海はどの倍率でも画面いっぱいに映るので、
   画面の端＝海の端。寄せ直しは要らない。 */
.sea-edge[data-dir="up"]    { top: 0; left: 0; right: 0; height: 21px; }
.sea-edge[data-dir="down"]  { bottom: 64px; left: 0; right: 0; height: 21px; }
.sea-edge[data-dir="left"]  { left: 0; top: 0; bottom: 0; width: 21px; }
.sea-edge[data-dir="right"] { right: 0; top: 0; bottom: 0; width: 21px; }

.sea-edge-btn {
  position: absolute; pointer-events: auto;
  appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; min-width: 44px; padding: 0 14px;   /* タップ目標は 44 を下回らない */
  max-width: 150px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text); font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transition: transform .1s, border-color .12s, background-color .12s;
}
.sea-edge-btn .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sea-edge-btn:hover { border-color: var(--bub-edge); }
.sea-edge-btn:active { transform: scale(.97); }
.sea-edge-btn:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
/* 掴んでいる間は的ではなくなるが、読める濃さのまま。薄くすると何の海か読めなくなる */
.sea-edge-btn:disabled { cursor: default; color: var(--text); }

/* 上の札だけは帯の下へ出す。帯の中に置くと、左上の名札と右上の「リスト表示」に当たる */
.sea-edge[data-dir="up"] .sea-edge-btn {
  left: 50%; top: 100%; transform: translateX(-50%); margin-top: 8px;
}
.sea-edge[data-dir="up"] .sea-edge-btn:active { transform: translateX(-50%) scale(.97); }
.sea-edge[data-dir="down"] .sea-edge-btn {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.sea-edge[data-dir="down"] .sea-edge-btn:active { transform: translate(-50%, -50%) scale(.97); }
/* 左右の札は端に貼り付ける。中央に浮かせるとバブルの上の飾りに見えて、
   「そちらに海がある」に読めない。外側の角を落として、端から生えている形にする */
.sea-edge[data-dir="left"] .sea-edge-btn {
  left: 0; top: 50%; transform: translateY(-50%); max-width: 42vw;
  border-radius: 0 999px 999px 0; border-left: 0; padding: 0 14px 0 11px;
}
.sea-edge[data-dir="left"] .sea-edge-btn:active { transform: translateY(-50%) scale(.97); }
.sea-edge[data-dir="right"] .sea-edge-btn {
  right: 0; top: 50%; transform: translateY(-50%); max-width: 42vw;
  border-radius: 999px 0 0 999px; border-right: 0; padding: 0 11px 0 14px;
}
.sea-edge[data-dir="right"] .sea-edge-btn:active { transform: translateY(-50%) scale(.97); }

/* バブルを掴んでいる間だけ、帯が落とし先として光る */
.sea-stage.is-bubdrag .sea-edge {
  background: color-mix(in srgb, var(--edge-c, var(--bub-edge)) 12%, transparent);
}
.sea-stage.is-bubdrag .sea-edge.is-over {
  background: color-mix(in srgb, var(--edge-c, var(--bub-edge)) 26%, transparent);
  box-shadow: inset 0 0 0 2px var(--edge-c, var(--bub-edge));
}
.sea-stage.is-bubdrag .sea-edge-btn { pointer-events: none; }
.sea-stage.is-bubdrag .sea-edge.is-over .sea-edge-btn {
  border-color: var(--edge-c, var(--bub-edge));
}

@media (prefers-reduced-motion: reduce) {
  .sea-edge, .sea-edge-btn { transition: none !important; }
  .sea-edge[data-dir="up"] .sea-edge-btn:active { transform: translateX(-50%); }
  .sea-edge[data-dir="down"] .sea-edge-btn:active { transform: translate(-50%, -50%); }
  .sea-edge[data-dir="left"] .sea-edge-btn:active,
  .sea-edge[data-dir="right"] .sea-edge-btn:active { transform: translateY(-50%); }
}

/* 空のときのヒント。読ませる文字なので --text-3 まで落とさない（4.5:1 を切る） */
.sea-hint {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-content: center; text-align: center;
  color: var(--text-2); font-size: 14px; line-height: 1.95;
  padding: 0 34px; pointer-events: none;
  animation: sea-hint-bob 6s ease-in-out infinite alternate;
}
@keyframes sea-hint-bob { to { transform: translateY(7px); } }

/* ---------- リスト表示（トグル） ----------
   押している間ではなく、押したら並ぶ。だから文字が「リスト表示」⇄「もどす」に変わる
   ——解除の仕方が画面に見えていること。 */
.sea-gather {
  position: absolute; top: 60px; right: 66px; z-index: 8;
  appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px;      /* タップ目標は 44 を下回らない */
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text-2);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .1s, color .12s, border-color .12s;
  user-select: none; -webkit-user-select: none;
}
.sea-gather .ic { font-size: 13px; line-height: 1; }
.sea-gather:hover { color: var(--text); }
.sea-gather:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
.sea-gather.is-on {
  color: var(--text);
  border-color: var(--bub-edge);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bub-edge) 26%, transparent);
}

/* ---------- フィルター（中央の海だけ／追補4 §2） ----------
   面の名前のすぐ下。名前（いま何が浮かんでいるか）と切り替えが縦に並んで対で読める。
   「リスト表示」と同じ形・同じ言い方（もどす）にそろえる——押したら戻る、が同じ操作だから。
   右上の「リスト表示」とは離して置く。2つのモードのボタンを隣り合わせない。 */
.sea-narrow {
  position: absolute; top: 60px; left: 10px; z-index: 8;
  appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px;      /* タップ目標は 44 を下回らない */
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text-2);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .1s, color .12s, border-color .12s;
  user-select: none; -webkit-user-select: none;
}
.sea-narrow .ic { font-size: 11px; line-height: 1; }
.sea-narrow:hover { color: var(--text); }
.sea-narrow:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
.sea-narrow.is-on {
  color: var(--text);
  border-color: var(--bub-edge);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bub-edge) 26%, transparent);
}
/* 絞っている間はタグの名前が入るので、長い名前で画面を跨がせない */
.sea-narrow .lb { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- しぼりこみの選び札（利用者の指示） ----------
   前は「しぼる」⇄「もどす」の2択トグルだった。タグごとに絞れるようになって
   2択では足りないので、ボタンの真下に小さな一覧を出す。
   **戻し方は一覧の先頭（ぜんぶ）**——別のボタンにすると、
   絞っている間だけ現れる的が増える。 */
.sea-narrow-pop {
  position: absolute; top: 98px; left: 10px; z-index: 12;
  display: flex; flex-direction: column;
  min-width: 168px; max-width: min(72vw, 260px);
  max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 5px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--surface);
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.10);
}
.sea-narrow-row {
  appearance: none; cursor: pointer; font: inherit; text-align: left;
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 10px;
  font-size: 13.5px; color: var(--text);
  border: 0; border-radius: 8px; background: transparent;
}
.sea-narrow-row:hover { background: var(--surface-2); }
.sea-narrow-row:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: -2px; }
/* 選ばれている行を起こす。選ばれていないほうを薄くはしない（§0）。
   重ねて選べるので、印は「いくつ入っているか」が読める形にする */
.sea-narrow-row[aria-checked="true"] { background: var(--surface-2); font-weight: 600; }
.sea-narrow-row[aria-checked="true"]::after {
  content: '✓'; margin-left: auto; padding-left: 8px;
  font-size: 12px; color: var(--text-2);
}
/* 「ぜんぶ」は選択の取り消し。ほかの行と区切って、印も持たせない */
.sea-narrow-row.is-clear { border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; }
.sea-narrow-row .dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--tcd, var(--bub-edge));
  box-shadow: inset 0 0 0 1px var(--line);
}
/* タグではない行（ぜんぶ／まだどこにも）。色を持たないので輪郭だけ */
.sea-narrow-row .dot.is-none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.sea-narrow-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 絞っている間は面の名前も変わる（「ぜんぶ」→「まだどこにも」）。
   文字だけだと見落とすので、名札の縁も一緒に立てる。意味は必ず文字が持つ */
.sea-face-name.is-narrow {
  border-color: var(--bub-edge);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bub-edge) 22%, transparent);
}

/* ---------- ランダムスタート ----------
   いま開いている面から1つ、無作為に選んで5分だけ集中する。
   おすすめではないので、目立つ色は付けない（「リスト表示」と同じ静かな見た目）。
   「リスト表示」の下。押せないときは形（点線）でも伝える。 */
.sea-random {
  position: absolute; top: 58px; right: 10px; z-index: 8;
  appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;   /* タップ目標は 44 を下回らない */
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text-2);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .1s, color .12s, border-color .12s;
}
.sea-random svg { display: block; width: 22px; height: 22px; }
.sea-random:not(:disabled):hover { color: var(--text); border-color: var(--bub-edge); }
.sea-random:not(:disabled):active { transform: scale(.95); }
.sea-random:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
/* 押せないときは形（点線の縁）で伝える。薄くしない
   ——このファイルの他の disabled と同じ扱い（薄くすると印が読めなくなる） */
.sea-random:disabled { cursor: default; border-style: dashed; color: var(--text-2); }

/* ---------- ランダムスタートのシャッフル（追補5 §4） ----------
   押した瞬間に「決まりました」ではなく、玉が混ざって、そこから1つが選ばれると見えるように。
   輪が減速しながら回り（＝止まりかけ）、光が玉から玉へ次々に移り、
   最後に着いた玉だけが大きく残る。全体で 0.63 秒。
   当たりを演出しない——金色も紙吹雪も音も出さない。海の色のまま静かに決まる。
   ここに置く玉は候補そのものではなく「候補が混ざっている」ことの絵。だから文字を持たない。
   時間と回る速さは sea.js が入れる（ホップの合計に合わせるため）。 */
.sea-shuffle {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  /* 混ぜている 0.6 秒は指を受け止める（下のバブルを二重に触らせない） */
  background: color-mix(in srgb, var(--bg) 64%, transparent);
}
/* 読み上げにだけ渡す言葉。目には出さないが、消しもしない */
.sea-shuffle .sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.sea-shuffle .rnd-ring {
  position: relative;
  animation-name: sea-rnd-spin;
  animation-timing-function: cubic-bezier(.1,.72,.22,1);   /* 速く回って、ゆっくり止まる */
  animation-fill-mode: both;
}
@keyframes sea-rnd-spin { from { transform: rotate(0); } to { transform: rotate(316deg); } }

/* 玉。--a = 輪のどこに置くか、--r = 輪の半径（どちらも sea.js が入れる）。
   46px は sea.js の SHUF_D と同じ値。片方だけ変えないこと */
.sea-shuffle .rnd-b {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
  animation: sea-rnd-bob 620ms ease-in-out infinite alternate;
}
/* 玉ごとに位相をずらして息をさせる。輪の回転だけだと「一枚の板が回る」に見えて混ざらない */
@keyframes sea-rnd-bob {
  from { transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
  to   { transform: rotate(calc(var(--a) + 13deg)) translateY(calc(-0.84 * var(--r)))
                    rotate(calc(-1 * var(--a) - 13deg)); }
}

/* 光る・大きくなるのは内側。位置と息は外側が持つ（同じ transform を二人で書かない） */
.sea-shuffle .rnd-face {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--bub-edge);
  background: color-mix(in srgb, var(--bub-edge) 12%, var(--surface));
  box-shadow: inset 0 2px 6px var(--bub-glow);
}
@keyframes sea-rnd-lit {
  from { background: color-mix(in srgb, var(--bub-edge) 58%, var(--surface)); transform: scale(1.12); }
  to   { background: color-mix(in srgb, var(--bub-edge) 12%, var(--surface)); transform: scale(1); }
}
@keyframes sea-rnd-win {
  from { background: color-mix(in srgb, var(--bub-edge) 58%, var(--surface)); transform: scale(1.12); }
  60%  { transform: scale(1.44); }
  to   { background: color-mix(in srgb, var(--bub-edge) 62%, var(--surface)); transform: scale(1.32);
         box-shadow: inset 0 2px 6px var(--bub-glow),
                     0 0 0 3px color-mix(in srgb, var(--bub-edge) 30%, transparent); }
}
@keyframes sea-rnd-dim { to { opacity: .18; transform: scale(.86); } }

/* 混ぜないときは盤ごと出さない（sea.js も reduce のときは作らない。二重の保険） */
@media (prefers-reduced-motion: reduce) {
  .sea-shuffle { display: none; }
}

/* ---------- リスト表示（文字の一覧。利用者の指示） ----------
   海は新しいほうから 50 までしか出さなくなったので、**ここが「ぜんぶ読む場所」**。
   読む場所は絵ではなく文字のほうが速いので、バブルは組まずに行にした
   （バブル1個は DOM 5ノード＋グラデーション7層。行は3ノード）。
   並びは古い順のまま＝海から隠れたものが先頭に来る。 */
.sea-grid {
  position: absolute; inset: 0; z-index: 6;
  overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y;                    /* 余白を縦になぞればスクロールできる */
  /* 上は 60 → 112。右上のボタン（「もどす」は 60〜104px）の下から始める。
     さがす欄をいちばん上に置いたので、60 のままだとボタンの下に潜って重なる。
     下は入力欄のぶん。 */
  padding: 112px 14px 88px;
  display: flex; flex-direction: column; gap: 2px;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--sea-1), var(--sea-2) 46%, var(--sea-3) 82%, var(--bg));
}
.sea-grid-cap,
.sea-grid-empty {
  margin: 0 0 6px; font-size: 12.5px; letter-spacing: .04em;
  color: var(--text-2);
}
.sea-grid-empty { line-height: 1.8; }

.sea-row {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font: inherit; text-align: left;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px;     /* タップ目標は 44 を下回らない */
  border: 0; border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
}
.sea-row:hover { background: var(--surface); }
.sea-row:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: -2px; }
.sea-row:active { background: var(--surface-2); }

/* つまんで運べる（A-65）。**縦は素直にスクロールさせる**ので pan-y。
   横は空いているので、そちらへ動いたら「運ぶ」に回す（sea.js の onRowDown）。
   長押しから運ぶ道もあるが、そのときは幽霊のほうが指に付いてくる。 */
.sea-row { touch-action: pan-y; -webkit-user-select: none; user-select: none; }

/* 運んでいる間、元の行は**その場に残して**薄くする。
   行そのものを動かすと下の行がずれて、どこから持ってきたかが読めなくなる */
.sea-row.is-lifted { opacity: .35; }

/* 指に付いてくる幽霊。1行ぶんの見た目だけを持つ軽い札。
   .drag-layer と同じ高さ（60）より上に置く——掴んでいる間はこれが最前面 */
.sea-ghost {
  position: fixed; left: 0; top: 0; z-index: 61;
  pointer-events: none;                    /* 指の下の判定を邪魔しない */
  max-width: 60vw; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  padding: 10px 14px; border-radius: 10px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 10px 24px -10px var(--bub-shadow), 0 0 0 1px var(--line);
  transform: translate(-9999px, -9999px);  /* 置き場所が決まる前は画面の外 */
}

.sea-row-dots { flex: none; display: inline-flex; gap: 3px; }
.sea-row-dots .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tcd, var(--bub-edge));
  box-shadow: inset 0 0 0 1px var(--line);   /* 地に近い色でも輪郭が残る */
}
/* タグの付いていないもの。無彩色は「タグ無し」の意味なので、輪郭だけにする */
.sea-row-dots .dot.is-none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }

.sea-row-tx {
  flex: 1; min-width: 0; font-size: 14px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 「はじめた」は数えない印（回数は出さない）。付いていることだけを言う */
.sea-row-st {
  flex: none; font-size: 11px; letter-spacing: .04em;
  color: var(--text-2);
}

/* ---------- 出し切れていないときの1行（利用者の指示） ----------
   海の底（入力欄の上）に小さく置く。**数は出さない**——
   「あと◯件」は、やっていないことの数を突き返すのと同じになる。 */
.sea-more {
  position: absolute; left: 50%; z-index: 7;
  bottom: calc(var(--sea-floor, 64px) + 8px);
  transform: translateX(-50%);
  max-width: calc(100% - 28px);
  margin: 0; text-align: center; pointer-events: none;
  padding: 6px 14px; border-radius: 12px;
  /* バブルの上に重なるので、地を敷かないと読めない（実測で読めなかった）。
     押す的ではないので縁は付けない——押せるものと見分けが付くように */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-size: 11.5px; line-height: 1.6; color: var(--text-2);
}

/* ---------- 詳細（最初の一手 / URL / 開始した） ----------
   入力欄の上に重ねる。ノードは JS 側で使い回す（入力中の値を落とさないため）。 */
.sea-sheet {
  position: absolute; left: 10px; right: 10px; bottom: 70px; z-index: 9;
  max-height: 52%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 16px 38px -14px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.12);
}
.sea-sheet-head { display: flex; align-items: center; gap: 10px; }
.sea-sheet-head .tt {
  flex: 1; min-width: 0; margin: 0;
  font-size: 15px; font-weight: 600; line-height: 1.5;
  overflow-wrap: anywhere;
}
.sea-sheet-head .cl {
  flex: none; appearance: none; cursor: pointer; font: inherit;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  font-size: 13px; font-weight: 600;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--text-2);
}
.sea-sheet-head .cl:hover { color: var(--text); background: var(--surface-2); }
.sea-sheet-head .cl:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: -2px; }

.sea-detail { display: flex; flex-direction: column; gap: 10px; }
.sea-detail .lb {
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--text-2);
}
.sea-detail .in {
  width: 100%; appearance: none; font: inherit; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--bg);
  padding: 8px 10px;
}
/* プレースホルダも読ませる文字なので --text-3 まで落とさない */
.sea-detail .in::placeholder { color: var(--text-2); }
.sea-detail .in:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 1px; }
.sea-detail .fs .in { font-size: 15px; }
.sea-detail .ur .in { font-size: 13px; }
.sea-detail .ur .rw { display: flex; align-items: center; gap: 7px; }
.sea-detail .ur .rw .in { flex: 1; min-width: 0; }
/* 色を足さずにリンクだと分かるようにする（--accent-a は本文色としては 4.5:1 に届かない） */
.sea-detail .open {
  flex: none; display: grid; place-items: center;
  min-width: 44px; min-height: 44px; padding: 0 4px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text); text-decoration: underline;
}
.sea-detail .open:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 1px; }
/* 弾かれたことは静かに伝える。読めないと意味がないので --text-2 */
.sea-detail .err { margin: 5px 0 0; font-size: 11.5px; color: var(--text-2); }

/* 「開始した」。5分を使わずに始めた場合の別ルート */
.sea-detail .sea-done {
  align-self: flex-start;
  appearance: none; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent; color: var(--text-2);
  transition: background .12s, color .12s, border-color .12s, transform .08s;
}
.sea-detail .sea-done:hover { color: var(--text); }
.sea-detail .sea-done:active { transform: scale(.97); }
.sea-detail .sea-done:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
/* 押せないときは形で伝える。文字を薄くして 4.5:1 を切らせない */
.sea-detail .sea-done:disabled { cursor: default; border-style: dashed; }
/* 押せない理由は、読める濃さで小さく置く（--text-3 は 4.5:1 を切る） */
.sea-detail .why { margin: -4px 0 0; font-size: 11.5px; color: var(--text-2); }
.sea-detail .sea-done.on {
  border-color: color-mix(in srgb, var(--bub-edge) 60%, transparent);
  background: color-mix(in srgb, var(--bub-edge) 14%, transparent);
  color: var(--text);
}

/* ---------- 入力（いちばん下） ----------
   ステージに重ねるので、帯そのものは指を透かす。 */
.sea-composer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; gap: 8px; align-items: center;
  padding: 14px 12px 12px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 72%, transparent) 46%, var(--bg));
}
.sea-composer input,
.sea-composer button { pointer-events: auto; }
.sea-composer input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px;
  padding: 11px 15px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
}
.sea-composer input::placeholder { color: var(--text-2); }
.sea-composer input:focus { outline: 2px solid var(--bub-edge); outline-offset: 1px; }
.sea-composer button {
  flex: none; appearance: none; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  min-width: 44px; min-height: 44px; padding: 0 19px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  color: var(--accent-text);
  transition: transform .08s, opacity .12s;
}
.sea-composer button:active { transform: scale(.94); }
.sea-composer button:disabled { opacity: .32; cursor: default; }
.sea-composer button:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }

/* 書いて、すぐ始める（送信の右）。
   送信と同じ色・同じ形で2つ並べない。送信は塗りつぶしの角丸、こちらは縁だけの丸。
   印は sea.js が描くインライン SVG（外部画像は読まない／契約 §15）。
   色は明暗どちらでも定義されているトークンだけを使う。 */
.sea-composer .sea-quick {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
}
.sea-composer .sea-quick svg { display: block; width: 22px; height: 22px; }
.sea-composer .sea-quick:not(:disabled):hover {
  border-color: var(--bub-edge);
  background: color-mix(in srgb, var(--bub-edge) 12%, var(--surface));
}

@media (prefers-reduced-motion: reduce) {
  .sea-gather, .sea-narrow, .sea-random,
  .sea-detail .sea-done, .sea-composer button { transition: none !important; }
  .sea-detail .sea-done:active, .sea-composer button:active,
  .sea-random:not(:disabled):active { transform: none; }
}

/* リスト表示の間は、ステージ直下に drift のものが残っていても出さない。
   全件はグリッドが並べるので、浮遊ぶんが残ると同じものが2つ見える。
   sea.js が setItems([]) で降ろしているが、drift 側が自分の都合で
   （独自の整列や飛沫で）足したものまで含めて、ここで確実に止める。
   4面（.sea-world）・名札・端の手がかりも、この一手で一緒に消える。
   ヒントは .sea-face の中へ移ったので、ここで名指しする必要はなくなった。

   **残すもの**（A-64・A-65。利用者の指示「見え方だけの違いにしたい」）。
   消すのは水と、水の中に居るものだけ。海の道具は全部そのまま残す：

     .sea-grid .sea-gather … 一覧そのものと、海へ戻るボタン
     .sea-narrow(-pop)     … フィルターと、その札
     .sea-face-name        … いまどの海を見ているか
     .sea-edge             … 左右の端＝隣の海への行き先。掴んでいる間は落とし先
     .sea-dropoff          … 掴んでいる間の「タグを外す枠」
     .sea-random .sea-shuffle … さいころと、その混ぜる盤
     .sea-cal              … はじめた日のカレンダー

   A-64 で踏んだ穴：A-57 で「リスト表示にもフィルターを掛ける」と決めて
   `syncNarrowBtn` は直したのに、**この規則が `!important` で消していた**——
   JS では `hidden=false`、CSS では `display:none`。決めたはずの機能に手が届かない。
   **ここに足し忘れると、JS 側でいくら出しても画面には出ない。** */
.sea-stage.is-gathering > :not(.sea-grid):not(.sea-gather):not(.sea-narrow):not(.sea-narrow-pop):not(.sea-face-name):not(.sea-edge):not(.sea-dropoff):not(.sea-random):not(.sea-shuffle):not(.sea-cal) {
  display: none !important;
}

/* ---------- 矢印看板（A-9 / A-8 / A-10） ----------

   行ける向きに、矢印とその海の名前を出す。
   **面の中の、バブルより後ろ**（JS が面のいちばん先頭に足す＝先に描かれる）。

   ・後ろにあるので、上にバブルが来ても指はバブルに当たる（A-8 の直し）
   ・面と一緒に動くので、なぞっている最中も景色として付いてくる
   ・空いているところを押せば移れる（押す的が無くなった問題も同時に解ける）
   ・そこから指を滑らせれば、ふつうに面が動く（JS の isBackground が例外にしている）

   景色として置くが、**文字は読ませる**ので --text-2 まで（--text-3 は使わない）。
   バブルより後ろにあるぶん、色を薄くして引っ込める必要は無い。 */
.sea-sign {
  position: absolute; z-index: 0;
  appearance: none; -webkit-appearance: none;
  cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;          /* タップ目標は 44 を下回らない */
  max-width: 46%;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--text-2);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  white-space: nowrap;
  transition: border-color .12s, background-color .12s, color .12s;
}
.sea-sign .ar {
  flex: none; font-size: 15px; line-height: 1;
  color: var(--sign-c, var(--text-2));        /* その海の色を1点だけ載せる（1.4.1） */
}
.sea-sign .nm { overflow: hidden; text-overflow: ellipsis; }
.sea-sign:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.sea-sign:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }

/* 置き場所。上は左上の名札・右上の「リスト表示」を避けて、そのぶん下げる。
   下は入力欄の上（--sea-floor が面の底）。左右は辺に貼り付ける。 */
/* 上の看板は、右上の2段目（リスト表示・さいころ）の下まで下げる。
   あれらは面の外（.sea-stage の子）で、看板より手前に描かれるため、
   重ねると看板が隠れる。さいころの下端が 104px なので 112px。 */
.sea-sign[data-dir="up"]    { top: 112px; left: 50%; transform: translateX(-50%); }
.sea-sign[data-dir="down"]  { bottom: 14px; left: 50%; transform: translateX(-50%); }
/* 左右は上下の真ん中ではなく、やや上に置く。理由は2つ：
     ・真ん中だと、空のときの案内文（.sea-hint。上下中央に置く）と重なる
     ・重力でバブルは下に溜まるので、上のほうが隠れにくい */
.sea-sign[data-dir="left"]  { left: 10px; top: 34%; transform: translateY(-50%); }
.sea-sign[data-dir="right"] { right: 10px; top: 34%; transform: translateY(-50%); }

/* 文字を縮める上書きはもう要らない。面ごと scale が掛かるので、
   文字もバブルも枠も同じ率で小さくなる（それがズームという言葉の意味）。
   --sea-zoom は sea.js が .sea-stage に入れたままにしてある（見た目の分岐用）。 */

/* ---------- タグを外す枠（利用者の指示） ----------
   バブルを掴んでいる間だけ、下の真ん中に出る。少し置いてから離すと外れる。
   ぜんぶの海には出さない（外す相手が1つに決まらないので。JS 側で hidden にする）。

   置き場所はステージの下端の少し上。左右の帯（.sea-edge、厚み 21px）とは
   重ならない——枠の幅は最大 260px なので、375px 幅でも両脇に 57px ずつ残る。

   指は透かす。判定は指先の座標でやるので当たり判定は要らず、
   持たせると真下のバブルを掴めなくなる（A-8 と同じ理由）。 */
.sea-dropoff {
  position: absolute; z-index: 9;
  left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(260px, 62%); min-height: 60px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1.5px dashed var(--line-strong);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-2);
  font-size: 12.5px; line-height: 1.45; text-align: center; letter-spacing: .02em;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}
.sea-dropoff .lb { position: relative; z-index: 1; }

/* 置いている間の手応え。左から満ちて、満ちたら外れる合図になる。
   時間そのもの（0.5秒）は数字で出さない——満ち具合が、そのまま残り時間 */
.sea-dropoff::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: color-mix(in srgb, var(--bub-edge) 22%, transparent);
  transform: scaleX(0); transform-origin: left center;
}
.sea-dropoff.is-over::before { animation: dropoff-fill .5s linear forwards; }
.sea-dropoff.is-armed::before { animation: none; transform: scaleX(1); }
@keyframes dropoff-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 満ちたら、点線をやめて「いま離せば外れる」の姿にする。
   色ではなく**線の種類**も変える（色だけに頼らない。1.4.1） */
.sea-dropoff.is-armed {
  border-style: solid;
  border-color: var(--bub-edge);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  /* 満ちる動きは出さない。満ちた姿（＝離せば外れる）だけを、そのとき出す */
  .sea-dropoff.is-over::before { animation: none; }
}

/* ---------- 海の引き（利用者の指示） ----------
   海の背景を長押しすると開く、全部の海の一覧。
   Android のホームでページを長押ししたときと同じ役目。 */
.seamap-back {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--text) 34%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.seamap {
  width: min(400px, 100%); max-height: 100%; overflow-y: auto;
  background: var(--surface); color: var(--text);
  border-radius: 18px; padding: 14px 14px 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.seamap-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.seamap-head .tt { font-size: 15px; font-weight: 600; }
.seamap-head .ct { flex: 1; font-size: 12.5px; color: var(--text-2); }
.seamap-head .cl {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  min-height: 44px; padding: 0 12px; border: 0; background: transparent;
  color: var(--text-2); font-size: 12.5px; font-weight: 600; border-radius: 10px;
}
.seamap-head .cl:hover { color: var(--text); }

.seamap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.seamap-fixed {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}

/* 1枚の海。押すとそこへ入る。掴むと並べ替え */
.seamap-tile {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  position: relative; display: grid; align-content: start; gap: 3px;
  min-height: 84px; padding: 10px 10px 8px; text-align: left;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  color: var(--text);
  touch-action: none;                       /* 掴んで動かすので、ブラウザに取られない */
  transition: border-color .12s, background-color .12s;
}
.seamap-tile:hover { border-color: var(--bub-edge); }
.seamap-tile:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
.seamap-tile.is-here { border-color: var(--bub-edge); background: var(--surface); }
.seamap-tile.is-here::after {
  content: 'いまここ'; position: absolute; right: 8px; bottom: 6px;
  font-size: 10.5px; color: var(--text-2); letter-spacing: .04em;
}
.seamap-tile.is-grab { z-index: 2; box-shadow: 0 10px 24px rgba(0,0,0,.22); border-color: var(--bub-edge); }
.seamap-tile.is-gap { border-style: dashed; border-color: var(--bub-edge); }
.seamap-tile .sw {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--tc, var(--bub-edge));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent);
}
.seamap-tile .nm { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.seamap-tile .sub { font-size: 11.5px; color: var(--text-2); }
.seamap-tile .tools { display: flex; gap: 2px; margin-top: 2px; }
.seamap-tile .tools button {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  width: 32px; height: 32px; padding: 0; border-radius: 8px;
  border: 1px solid var(--line); background: transparent; color: var(--text-2);
  font-size: 14px; line-height: 1;
}
.seamap-tile .tools button:hover:not(:disabled) { color: var(--text); border-color: var(--bub-edge); }
.seamap-tile .tools button:disabled { opacity: .35; cursor: default; }
.seamap-tile.is-fixed { cursor: pointer; }

.seamap-add {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  display: grid; align-content: center; justify-items: center; gap: 4px;
  min-height: 84px; padding: 10px; border-radius: 12px;
  border: 1px dashed var(--line-strong); background: transparent; color: var(--text-2);
  font-size: 12.5px; font-weight: 600;
}
.seamap-add:hover { color: var(--text); border-color: var(--bub-edge); }
.seamap-add:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
.seamap-add .pl { font-size: 17px; line-height: 1; }
.seamap-full { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; color: var(--text-2); }
.seamap-note { margin: 12px 0 0; font-size: 11.5px; color: var(--text-2); line-height: 1.7; }

/* 名前と色の板（＋も⋮も同じ形） */
.seamap-sheet-back {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: color-mix(in srgb, var(--text) 30%, transparent);
}
.seamap-sheet {
  width: min(320px, 100%); background: var(--surface); color: var(--text);
  border-radius: 16px; padding: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.3);
  display: grid; gap: 10px;
}
.seamap-sheet .tt { margin: 0; font-size: 13.5px; font-weight: 600; }
.seamap-sheet .in {
  appearance: none; font: inherit; font-size: 15px;
  min-height: 44px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
}
.seamap-sheet .in:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 1px; }
.seamap-sheet .cols { display: flex; flex-wrap: wrap; gap: 6px; }
.seamap-sheet .col {
  appearance: none; cursor: pointer; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--tc, var(--bub-edge));
}
.seamap-sheet .col.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--bub-edge); }
.seamap-sheet .col:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
.seamap-sheet .row { display: flex; align-items: center; gap: 8px; }
.seamap-sheet .drop {
  appearance: none; cursor: pointer; font: inherit; font-size: 12.5px;
  margin-right: auto; min-height: 44px; padding: 0 10px; border: 0;
  background: transparent; color: var(--text-2); border-radius: 10px;
}
.seamap-sheet .drop:hover { color: var(--text); }
.seamap-sheet .ca, .seamap-sheet .ok {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text);
}
.seamap-sheet .ok { border-color: var(--bub-edge); background: var(--surface); }

/* ---------- さがす（レビューの指摘） ----------
   「リスト表示」＝ぜんぶ読む場所の先頭に置く。新しい画面もタブも増やさない。
   さがしている間は長期保留も完了も出す（探し物が見つからないほうが困る）。 */
/* 上に貼り付く。地は透かさない（下の行が透けて読めなくなる）。
   .sea-grid の padding-top が 112px なので、貼り付く先は -112px ではなく 0
   ——グリッドの内容の先頭で止まる。 */
.sea-find {
  position: sticky; top: 0; z-index: 2; padding: 0 0 8px;
  background: linear-gradient(180deg, var(--sea-1) 70%, transparent);
}
.sea-find .in {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 14px;
  width: 100%; box-sizing: border-box;
  min-height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text);
}
.sea-find .in::placeholder { color: var(--text-2); }
.sea-find .in:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 1px; }
/* さがした行の右端に出る「いまどこに居るか」。長期保留・完了だけ付く */
.sea-row-where {
  flex: none; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-2);
  font-size: 11px; white-space: nowrap;
}

/* ---------- はじめた日のカレンダー（利用者の指示） ----------
   1段目の右、歯車（right:10px）の左どなり。**海に置く**のが肝で、
   積み上がったものが日々使う面から見えるようにするため。 */
.sea-cal {
  position: absolute; z-index: 8; top: 10px; right: 62px;
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text-2);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .1s, color .12s, border-color .12s;
}
.sea-cal svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* 濃淡の粒は塗り。中身が「日ごとの濃さ」だと絵で分かる */
.sea-cal svg .dot { stroke: none; fill: currentColor; }
.sea-cal svg .dot.a { opacity: .30; }
.sea-cal svg .dot.b { opacity: .58; }
.sea-cal svg .dot.c { opacity: .88; }
.sea-cal:hover { color: var(--text); border-color: var(--bub-edge); }
.sea-cal:active { transform: scale(.95); }
.sea-cal:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
/* 掴んでいる間は薄くする。落とし先ではないので狙わせない */
body.is-dragging .sea-cal { opacity: .25; pointer-events: none; }

/* 開いた板。濃さは1色の濃度だけで作る（ふりかえりの直近7日と同じ約束）。
   0件の日は無彩色。赤は使わない。 */
.cal-back {
  position: fixed; inset: 0; z-index: 92;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: color-mix(in srgb, var(--text) 34%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.cal {
  --cal-ink: #2b87a6;
  --cal-zero: rgba(128,128,128,.10);
  --cal-l1: color-mix(in srgb, var(--cal-ink) 22%, transparent);
  --cal-l2: color-mix(in srgb, var(--cal-ink) 42%, transparent);
  --cal-l3: color-mix(in srgb, var(--cal-ink) 66%, transparent);
  --cal-l4: color-mix(in srgb, var(--cal-ink) 90%, transparent);
  width: min(400px, 100%); max-height: 100%; overflow-y: auto;
  background: var(--surface); color: var(--text);
  border-radius: 18px; padding: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
@media (prefers-color-scheme: dark) {
  .cal { --cal-ink: #7cc4e2; --cal-zero: rgba(255,255,255,.08); }
}
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-head .tt { flex: 1; font-size: 15px; font-weight: 600; }
.cal-head .cl {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  min-height: 44px; padding: 0 12px; border: 0; background: transparent;
  color: var(--text-2); font-size: 12.5px; font-weight: 600; border-radius: 10px;
}
.cal-head .cl:hover { color: var(--text); }

/* 横に長いので、外側だけがスクロールする */
.cal-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
.cal-grid { display: flex; gap: 4px; width: max-content; }
.cal-dows {
  display: grid; grid-template-rows: 12px repeat(7, 14px); gap: 3px;
  padding-top: 15px;                       /* 月名の行ぶん下げる */
}
.cal-dow { font-size: 9.5px; line-height: 14px; color: var(--text-2); }
.cal-cols { display: flex; gap: 3px; }
.cal-col { display: grid; grid-template-rows: 12px repeat(7, 14px); gap: 3px; }
.cal-mon { font-size: 9.5px; line-height: 12px; color: var(--text-2); white-space: nowrap; }
.cal-cell {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--cal-zero);
}
.cal-cell.is-pad { background: transparent; }
.cal-cell[data-lv="1"] { background: var(--cal-l1); }
.cal-cell[data-lv="2"] { background: var(--cal-l2); }
.cal-cell[data-lv="3"] { background: var(--cal-l3); }
.cal-cell[data-lv="4"] { background: var(--cal-l4); }
.cal-empty { margin: 8px 2px; font-size: 13px; color: var(--text-2); line-height: 1.8; }
.cal-foot { margin: 10px 2px 0; font-size: 12.5px; color: var(--text-2); }