body{
  padding-bottom: env(safe-area-inset-bottom);
}

.home.main-panel {
    height: calc(100dvh - 50px);
    min-height: 0px;
    overflow: hidden;
}

.home.container-fluid {
    height: 100%;
}

.home.content {
    height: 100%
}

.home-card {
    height: 20vh;
    width: 20vh;
    border-radius: 10px;
    object-fit: cover;
    cursor: pointer;
}

@media (max-width: 768px) {
    .home.main-panel {
        height: calc(100dvh - 50px);
        overflow: hidden;
    }
}

.home-card {
    background-clip: content-box;
    background-size: cover;
}

.home-footer {
    left: 260px;
    background-color: white;
    height: 60px;
    width: 100%;
    position: absolute;
    bottom: 0%;
}

.bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* 泡の見た目 */
.bubble {
  position: absolute;
  bottom: -5vh;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
   border: 1px solid white;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  animation: rise linear forwards;
}

/* 泡が上がるアニメーション */
@keyframes rise {
  0% {
    transform: translate(var(--sway, 0px), 0) scale(1);
    opacity: 1;
  }
   70% {
    transform: translate(var(--sway, 0px), -70vh) scale(1.1);
    opacity: 0.9;
  }
  80% {
    opacity: 0.4;
  }
  90% {
    transform: translate(var(--sway, 0px), -90vh) scale(1.2);
    opacity: 0;
  }
  100% {
    /* 👈 最終フレームを必ず固定（位置もopacityも変えない） */
    transform: translate(var(--sway, 0px), -100vh) scale(1.12);
    opacity: 0;
  }
}

.home.avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  z-index: 2;
}

.home.avatar img {
  width: auto; /* 自動で縦横比を保つ */
  height: 100vh;
  filter: drop-shadow(0 0 5px rgba(20, 70, 180, 0.8)) drop-shadow(0 0 20px rgba(100, 200, 255, 0.4));
}

/* 立ち絵が水の中でふわふわ揺れる（2026-09-27）。
 * 上下（translate）と傾き（rotate）を別々のプロパティ・別々の周期（7秒と11秒）で動かし、alternate で行って戻るだけにする。
 * 周期がそろわないので同じ動きのくり返しに見えず、折り返しもなめらか（はじめは4つの区切りを1つの周期で回していて、かくかくして不自然だった） */
.home.avatar img {
  transform-origin: 50% 100%;
  animation: hm-bob 7s ease-in-out infinite alternate, hm-sway 11s ease-in-out infinite alternate;
}
/* タップしたとき（home.js が .is-tap を付ける）は、ぴょんと弾む（transform の scale だけなので、揺れとは重ならない） */
.home.avatar img.is-tap { animation: hm-bob 7s ease-in-out infinite alternate, hm-sway 11s ease-in-out infinite alternate, hm-tap .5s ease-out; }
@keyframes hm-bob { from { translate: 0 0; } to { translate: 0 -1.4%; } }
@keyframes hm-sway { from { rotate: -.5deg; } to { rotate: .5deg; } }
@keyframes hm-tap {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.025, .975); }
  65% { transform: scale(.99, 1.012); }
  100% { transform: scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) { .home.avatar img, .home.avatar img.is-tap { animation: none; } }

/* =====================================================================
 * ホームのボタン（2026-09-27 に作り直し。立ち絵・泡・背景・並びはそのまま）
 * 海の背景になじむよう、すりガラス（紺の半透明＋ぼかし）の札に白い線のアイコン。
 * 採集だけはいちばん目立つ橙。bootstrap の .btn は使わない（hm-*）
 * ===================================================================== */
.home {
  /* すりガラス（うしろを ぼかす）を やめ、ほぼ 不透明の 紺に（2026-10-04 ユーザー判断＝見本の B。うしろの 立ち絵と 泡が ずっと 動くので、
     ぼかしを 毎コマ 計算し直していた。性能の 洗い出しの 11）。以前は rgba(6,36,60,.52)＋blur(10px) */
  --hm-glass: rgba(8, 40, 66, .9);
  --hm-glass-hi: rgba(18, 70, 108, .92);
  --hm-edge: rgba(255, 255, 255, .38);
  --hm-text: #f2fbff;
}
.hm-round, .hm-pill, .hm-collect, .hm-dock {
  -webkit-tap-highlight-color: transparent;
  border: 1px solid var(--hm-edge);
  color: var(--hm-text);
  background: var(--hm-glass);
  box-shadow: 0 6px 18px rgba(0, 20, 40, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .04em;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.hm-round:hover, .hm-pill:hover, .hm-dock:hover { background: var(--hm-glass-hi); }
.hm-round:active, .hm-pill:active, .hm-collect:active, .hm-dock:active { transform: translateY(2px) scale(.98); }
.hm-round:focus-visible, .hm-pill:focus-visible, .hm-collect:focus-visible, .hm-dock:focus-visible { outline: 3px solid #ffd84a; outline-offset: 2px; }
.hm-ic { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 1) 左上：設定（丸）とクエスト（札） */
.settings {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  z-index: 5;
}
.hm-round { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; }
.hm-pill { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 14px; border-radius: 999px; font-size: 15px; }
.hm-quest { border-color: rgba(255, 216, 74, .75); }
.hm-quest .hm-ic { color: #ffd84a; }

/* 左上の設定と「？」（ホームの使い方。js/hometour.js）を横に並べる */
.hm-toprow { display: flex; align-items: center; gap: 8px; }
.hm-help { width: 30px; height: 30px; font-size: 16px; font-weight: 900; line-height: 1; }

/* 左下：お知らせのメガホン（js/news.js）。下の台のすぐ上。まだ見ていないお知らせがあると赤い点 */
.hm-news { position: absolute; left: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 3; }
.hm-news.has-unread::after { content: ""; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #ff4d4d; border: 2px solid #fff; }
/* 左下：先生への おしらせ（メガホンの 右の ベル。home.php が staff 以上に 出す、数字は js/teachernotice.js。2026-10-04）。大きさは メガホンと 同じ（.hm-round。2026-10-04 ユーザー判断） */
.hm-round.hm-teacher { position: absolute; left: 66px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 3; }
.hm-teacher[hidden] { display: none; }
@media (max-width: 480px) { .hm-round.hm-teacher { left: 62px; } }
/* PC では メガホンと ベルを 大きく（ほかの ボタンと くらべて 小さく 見えた。2026-10-04 ユーザー指摘。スマホは そのまま） */
@media (min-width: 900px) {
  .hm-news { left: 28px; bottom: 120px; }
  .hm-round.hm-news, .hm-round.hm-teacher { width: 56px; height: 56px; }
  .hm-round.hm-teacher { left: 94px; bottom: 120px; }
  .hm-news .hm-ic, .hm-teacher .hm-ic { width: 27px; height: 27px; }
  .hm-news.has-unread::after { width: 14px; height: 14px; }
  .hm-teacher .tn-badge { min-width: 20px !important; height: 20px !important; line-height: 20px !important; font-size: 11px !important; }
}

/* 2) 右下：採集（大きく橙）と生物登録 */
.actionA {
  position: absolute;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  width: min(300px, 44%);
  z-index: 3;
}
.hm-register { justify-content: center; height: 50px; font-size: 15px; }
.hm-collect {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 84px; border-radius: 24px;
  font-size: 26px; font-weight: 900; color: #fff;
  border: 2px solid rgba(255, 255, 255, .75);
  /* 単色の橙（グラデーションの形で書くのは、ほかの CSS に background-color を上書きされて色が付かなかったため） */
  background: linear-gradient(#f28c1e, #f28c1e);
  box-shadow: 0 8px 20px rgba(0, 40, 60, .35);
}
.hm-collect .hm-ic { width: 34px; height: 34px; stroke-width: 2.2; }
.hm-collect:hover { filter: brightness(1.05); }
/* 下のふちに白い波がゆっくり流れる（2026-09-27。はじめの光の筋と脈打つ光は「中華っぽい」のでやめた。ユーザー判断） */
.hm-collect::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: calc(100% + 20px); height: 14px; pointer-events: none;
  background: radial-gradient(circle at 10px -4px, transparent 9px, rgba(255, 255, 255, .38) 10px) 0 0 / 20px 14px repeat-x;
  animation: hm-wave 4s linear infinite;
}
@keyframes hm-wave { from { transform: translateX(0); } to { transform: translateX(-20px); } }
@media (prefers-reduced-motion: reduce) { .hm-collect::after { animation: none; } }

/* 3) 最下部：バケツ・図鑑・ツリー（1本のすりガラスの台に並べる） */
.actionB {
  position: absolute; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 6px; padding: 6px;
  border-radius: 22px;
  background: var(--hm-glass);
  border: 1px solid var(--hm-edge);
  box-shadow: 0 8px 24px rgba(0, 20, 40, .3);
  z-index: 4;
}
.hm-dock {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 62px; border-radius: 16px; font-size: 13px;
  background: transparent; border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hm-dock .hm-ic { width: 26px; height: 26px; }
.hm-dock:hover { background: rgba(255, 255, 255, .12); }

@media (min-width: 900px) {
  .actionB { max-width: 560px; margin: 0 auto; }
  .actionA { right: 28px; bottom: 120px; width: 280px; }
}
@media (max-width: 480px) {
  .hm-pill { height: 42px; font-size: 14px; padding: 0 14px 0 12px; }
  .hm-round { width: 42px; height: 42px; }
  .actionA { gap: 10px; }
  .hm-collect { height: 72px; font-size: 22px; border-radius: 20px; gap: 8px; }
  .hm-collect .hm-ic { width: 28px; height: 28px; }
  .hm-register { height: 44px; font-size: 14px; padding: 0 10px; }
}

/* セリフの吹き出し（script.css の見た目をホームだけ少し整える。出し方は js/script.js のまま） */
.home .serif {
  border: 3px solid #06293a;
  outline: none;
  border-radius: 16px;
  font-weight: 700;
  color: #06293a;
  box-shadow: 0 5px 0 rgba(6, 41, 58, .25), 0 10px 24px rgba(0, 20, 40, .25);
}
.home .serif.side-bottom::after { border-left: 3px solid #06293a; border-top: 3px solid #06293a; }

@media (max-width: 768px) {
    .home-footer {
        left: 0px;
    }
}
/*
    .home-card.sampling {
        background-image: url("../../assets/img/others/home-card-sampling.jpg");
    }
    .home-card.buckets {
        background-image: url("../../assets/img/others/home-card-buckets.jpg");
    }
    .home-card.dictionary {
        background-image: url("../../assets/img/others/home-card-dictionary.jpg");
    }
    .home-card.quest {
        background-image: url("../../assets/img/others/home-card-quest.jpg");
    }
    .home-card.tree {
        background-image: url("../../assets/img/others/home-card-tree.jpg");
    }
    .home-card.ranking {
        background-image: url("../../assets/img/others/home-card-ranking.jpg");
    }
    .home-card.register {
        background-image: url("../../assets/img/others/home-card-register.jpg");
    }
    .home-card.login {
        background-image: url("../../assets/img/others/home-card-login.jpg");
    }
    .home-card.top {
        background-image: url("../../assets/img/others/home-card-top.jpg");
    }
*/

/* 毎日のミッションのボタン（home.php に はじめから置く。js/daily.js の addStyle と同じ。読みこみ前から 位置が決まるように 2026-10-04） */
.hm-daily{position:relative;margin-top:8px}
.hm-daily .dm-dot{position:absolute;top:2px;right:4px;width:10px;height:10px;border-radius:50%;background:#ff4d6a;box-shadow:0 0 0 2px #fff}
.hm-daily .dm-dot[hidden]{display:none}