/* =========================================================
  🪶 owls.css（トップページ専用スタイル）
  ---------------------------------------------------------
  このファイルは知識の森トップページ（/owls#index）専用です。
  主な内容：
  - 黒板の中央固定とレイアウト調整
  - フクちゃんの演出
  - タイピング・物語テキスト・スキップボタン
  - 梟カードの一覧・アニメーション
  - 時計・共通ボタン補正
  - レスポンシブ対応
  ---------------------------------------------------------
  基礎的な構造やUIは app.css にて管理されています。
   ========================================================= */

/* =========================================================
  🌱 1. 共通アニメーション・ユーティリティ
   ========================================================= */
.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.hidden {
  display: none !important;
}

/* gentle浮遊アニメーション */
@keyframes gentle-float {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-5px);
  }
}

/* 発光アニメーション */
@keyframes glow {
  from {
    text-shadow: 0 0 5px #e0e056c7, 0 0 10px #dce152bd;
  }
}

/* タイピングカーソル */
.typing-text::after {
  content: '|';
  animation: blink 1s infinite;
  color: #ffaa00;
}

.typing-complete .typing-text::after {
  display: none;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

/* =========================================================
  🦉 2. INDEXページ（知識の森トップ）
   ========================================================= */
.owls-container {
  position: fixed;
  top: 100px;
  right: 4vw;
  /* 余白指定 */
  z-index: 2000;
  width: clamp(280px, 30vw, 400px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

/* 🦉 フクちゃんカード */
.owl-card {
  width: 100%;
  /* containerに追従（固定幅420pxを撤廃） */
  text-align: center;
  padding: 14px;
  margin-bottom: 14px;
  border: 2px solid rgba(66, 246, 105, 0.08);
  border-radius: 12px;
  background-color: rgba(112, 197, 67, 0.35);
  animation: gentle-float 3.5s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(60, 255, 0, 0.07);
  pointer-events: auto;
}

/* 💬 メッセージ部分 */
.owl-message {
  background-color: #91ff0075;
  padding: 14px;
  border-radius: 6px;
  margin: 8px 0;
  width: 100%;
  height: auto;
  min-height: 80px;
  box-sizing: border-box;
}

/* 💻 〜1500px（MacBook前後） */
@media (max-width: 1500px) {
  .owls-container {
    top: 50px;
    right: 2.5vw;
    width: clamp(260px, 28vw, 360px);
  }

  .owl-card {
    padding: 12px;
  }
}

/* 📚 タブレット横（1300px以下） */
@media (max-width: 1300px) {
  html {
    font-size: 80%;
    /* 全体フォントサイズ調整 */
  }

  .owls-container {
    top: 40px;
    right: 2vw;
    width: clamp(220px, 30vw, 300px);
    transform: scale(0.9);
    transform-origin: top right;
    /* 右上基準で縮小 */
  }

  .owl-card {
    font-size: 0.95rem;
    padding: 9px;
  }
}

/* 📱 エクスペリア1 IIIなど超横長スマホ用 */
@media (max-width: 1300px) and (max-height: 700px) {
  html {
    font-size: 70%;
  }

  .owls-container {
    top: 15px;
    right: 4vw;
    width: clamp(200px, 25vw, 260px);
    transform: scale(0.8);
    transform-origin: top right;

    max-height: calc(100vh - 30px);
    overflow-y: auto;
    overflow-x: visible;
    padding-bottom: 12px;
  }

  .owl-card {
    font-size: 0.9rem;
    padding: 8px;
  }
}

/* 📚 iPad Pro用 */
@media (min-width: 1181px) and (max-width: 1366px) {
  .owls-container {
    right: 0.8vw;
    width: clamp(245px, 23vw, 280px);
    transform: scale(0.88);
    transform-origin: top right;
  }
}

/* 📚 iPad帯専用（被り対策） */
@media (min-width: 851px) and (max-width: 1180px) {
  html {
    font-size: 74%;
  }

  .owls-container {
    top: 28px;
    right: 0.8vw;
    width: clamp(190px, 21vw, 230px);
    transform: scale(0.78);
    transform-origin: top right;

    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: visible;
    padding-bottom: 10px;
  }

  .owl-card {
    font-size: 0.88rem;
    padding: 8px;
  }

  .owl-message {
    font-size: 0.8rem;
    min-height: 56px;
    padding: 10px;
  }
}

/* 📱 スマホ横（〜850px） */
@media (max-width: 850px) {
  html {
    font-size: 60%;
  }

  .owls-container {
    top: 70px;
    right: 8px;
    width: 180px;
    transform: scale(0.75); /* 小さくしすぎない */
    transform-origin: top right;

    max-height: calc(100vh - 90px);
    overflow-y: auto;
    padding-bottom: 12px;
  }

  .owl-card {
    padding: 6px 7px;
  }

  .owl-message {
    font-size: 0.75rem;
    min-height: 48px;
  }
}

/* 📱 小型スマホ（〜768px） */
@media (max-width: 768px) {
  html {
    font-size: 55%;
  }

  .owls-container {
    top: 75px;
    right: 6px;
    width: 160px;
    transform: scale(0.7);
    transform-origin: top right;

    max-height: calc(100vh - 95px);
  }

  .owl-card {
    padding: 6px;
  }

  .owl-message {
    font-size: 0.7rem;
    min-height: 44px;
  }
}

/* =========================
  🧭 右側メニュー（遷移図風）
========================= */

/* メニュー用カード */
.owl-menu-card {
  text-align: center;
  /*animation: none; 浮遊が邪魔なら追加。 */
}

.owl-menu-title {
  margin: 8px 0 12px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #0d1a0d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.owl-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.owl-menu-btn {
  display: block;
  width: 100%;
  padding: 12px 10px;
  border-radius: 10px;
  text-decoration: none;
  border: 2px solid rgba(237, 255, 39, 0.35);
  background: rgba(94, 247, 28, 0.25);
  color: #0d1a0d;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
}

.owl-menu-btn:hover {
  transform: translateY(-1px);
}

.owl-menu-btn.primary {
  background: rgba(255, 153, 0, 0.7);
  border-color: rgba(255, 153, 0, 0.4);
  color: #fff;
}

.owl-menu-btn.danger {
  background: rgba(255, 80, 80, 0.55);
  border-color: rgba(255, 80, 80, 0.35);
  color: #fff;
}

/* =========================================================
  🪶 3. 黒板（Boardエリア）
========================================================= */

.blackboard {
  position: absolute;
  top: 40%;
  left: 49%;
  transform: translate(-50%, -50%);
  width: clamp(300px, 50vw, 600px);
  height: clamp(200px, 33vw, 400px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.blackboard .board-title {
  color: #fcc900ff;
  font-size: clamp(18px, 3vw, 26px);
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.blackboard .board-button {
  background-color: #ffffff2f;
  color: rgba(175, 251, 34, 0.897);
  padding: 12px 28px;
  border: none;
  border-radius: 50px;
  box-shadow: 0 0 20px rgba(251, 255, 0, 0.4);
  font-size: clamp(16px, 3vw, 20px);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* =============================
  ボタン演出
============================= */

.blackboard .board-button:hover {
  transform: scale(1.07);
  box-shadow:
    0 0 30px rgba(0, 255, 255, 0.9),
    0 0 50px rgba(0, 255, 255, 0.6);
  background-color: #28ffffc0;
  color: #ff4444;
}

.blackboard .board-button:active {
  transform: scale(0.93);
  box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.7);
  filter: brightness(1.3);
}

/* =============================
  黒板レスポンシブ
============================= */

/* 💻 〜1500px */
@media (max-width: 1500px) {
  .blackboard {
    transform: translate(-50%, -46%) scale(0.75);
  }
}

/* 📚 〜1300px */
@media (max-width: 1300px) {
  .blackboard {
    transform: translate(-50%, -47%) scale(0.68);
  }
}

/* 📱 横長低高さ（Xperiaなど） */
@media (max-width: 1300px) and (max-height: 600px) {
  .blackboard {
    transform: translate(-50%, -50%) scale(0.60);
  }
}

/* 📚 iPad無印（1024×768） */
@media (min-width: 1000px) and (max-width: 1060px) {
  .blackboard {
    height: clamp(260px, 48vh, 480px);
  }

  .blackboard .board-button {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* 📱 中サイズ（iPhone12〜14系） */
@media (max-width: 932px) and (max-height: 430px) {
  .blackboard {
    transform: translate(-50%, -50%) scale(0.54);
    width: clamp(340px, 58vw, 640px);
  }

  .button-container {
    gap: 10px;
    margin-top: 16px;
  }

  .blackboard .board-button {
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* 📱 小サイズ（iPhone SEなど） */
@media (max-width: 768px) {
  .blackboard {
    transform: translate(-50%, -50%) scale(0.50);
    width: clamp(340px, 60vw, 640px);
  }

  .button-container {
    gap: 8px;
    margin-top: 14px;
  }

  .blackboard .board-button {
    padding: 7px 14px;
    font-size: 11px;
  }
}

/* =========================================================
  📱 小さい横画面用：アドバイス表示
========================================================= */

.advice-text {
  position: absolute;
  top: 18%;
  left: 6%;
  width: 88%;
  bottom: 14%;
  overflow-y: auto;

  color: #ffd000;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.8;
  text-align: left;
  white-space: pre-line;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);

  box-sizing: border-box;
  padding-right: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* お気に入りボタンの基本 */
.favorite-button {
  position: absolute;
  top: 36px;
  right: 12px;
  z-index: 20;
  white-space: nowrap;
}

/* 戻るボタンの基本 */
.back-button,
.back-to-categories-button {
  position: absolute;
  right: 12px;
  bottom: 18px;
  z-index: 20;
  white-space: nowrap;
}

/* 📱 iPhone 12 / 14 / Pixel横くらい */
@media (max-width: 932px) and (max-height: 430px) {
  .advice-text {
    top: 16%;
    left: 5%;
    width: 68%;
    bottom: 18%;
    font-size: 12px;
    line-height: 1.55;
    padding-right: 6px;
  }

  .favorite-button {
    top: 34px;
    right: 10px;
    font-size: 10px;
    padding: 5px 8px;
  }

  .back-button,
  .back-to-categories-button {
    right: 8px;
    bottom: 16px;
    font-size: 10px;
    padding: 5px 10px;
  }
}

/* 📱 iPhone SE 横 */
@media (max-width: 768px) {
  .advice-text {
    top: 15%;
    left: 4%;
    width: 64%;
    bottom: 20%;
    font-size: 11px;
    line-height: 1.45;
    padding-right: 4px;
  }

  .favorite-button {
    top: 30px;
    right: 8px;
    font-size: 9px;
    padding: 4px 7px;
  }

  .back-button,
  .back-to-categories-button {
    right: 6px;
    bottom: 14px;
    font-size: 9px;
    padding: 4px 8px;
  }
}

/* =========================
  ランキング表示
========================= */

.ranking-entry-button {
  margin-top: 40px;
  padding: 8px 20px;
  border-radius: 999px;
  border: none;

  background: linear-gradient(135deg,#a6b51b60,#1abc7e61);
  color: rgba(255, 174, 0, 0.945);
  font-weight: 600;
  font-size: 13px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  cursor: pointer;
}

.ranking-entry-button:hover{
  transform: scale(1.05);
}

/* ランキング一覧（黒板内スクロール） */
.ranking-list-container {
  position: absolute;
  top: 35%;
  left: 8%;
  width: 78%;
  bottom: 14%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  padding-right: 6px;
}

/* スクロールバー調整 */
.ranking-list-container::-webkit-scrollbar {
  width: 6px;
}

.ranking-list-container::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.15);
  border-radius: 10px;
}

.ranking-list-container::-webkit-scrollbar-thumb {
  background: rgba(255,208,0,0.35);
  border-radius: 10px;
}

.ranking-list-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255,208,0,0.55);
}

/* ランキングボタン */
.ranking-item-button {
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;

  background: rgba(0,255,106,0.35);
  color: #ffd000;
  font-size: 15px;
  text-align: left;
  cursor: pointer;

  transition: all 0.2s ease;
}

.ranking-item-button:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.02);
}

/* TOP3カラー */

.ranking-item-button--gold {
  background: rgba(255,215,0,0.22);
  border: 1px solid rgba(255,215,0,0.5);
}

.ranking-item-button--silver {
  background: rgba(192,192,192,0.20);
  border: 1px solid rgba(192,192,192,0.5);
}

.ranking-item-button--bronze {
  background: rgba(205,127,50,0.22);
  border: 1px solid rgba(205,127,50,0.5);
}

.ranking-board-title {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 80%;
  text-align: center;
  z-index: 5;
}

/* =========================
  開発中メッセージ
========================= */

/* β版コメント（デスクトップ基準） */
.dev-banner {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-53%);
  z-index: 3000;

  width: min(620px, calc(100% - 40px));

  background: rgba(255, 180, 0, 0.95);
  color: #111;
  font-weight: 500;
  text-align: center;
  padding: 7px 14px;
  font-size: 12px;

  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 💻 タブレット横（〜1300px） */
@media (max-width: 1300px) {
  .dev-banner {
    top: 82px;
    width: min(500px, calc(100% - 56px));
    padding: 6px 12px;
    font-size: 11px;
  }
}

/* 📱 エクスペリア1 IIIなど超横長スマホ用 */
@media (max-width: 1300px) and (max-height: 700px) {
  .dev-banner {
    top: 30px;
    width: min(430px, calc(100% - 40px));
    padding: 5px 10px;
    font-size: 10px;
  }
}

/* 📱 スマホ横（〜850px） */
@media (max-width: 850px) {
  .dev-banner {
    top: 20px;
    width: min(320px, calc(100% - 28px));
    padding: 4px 8px;
    font-size: 9.5px;
    border-radius: 10px;
  }
}

/* 📱 小型スマホ（〜768px） */
@media (max-width: 768px) {
  .dev-banner {
    top: 40px;
    width: min(300px, calc(100% - 24px));
    padding: 4px 6px;
    font-size: 9px;
  }
}

/* =========================================================
  ✏️ 4. タイピング・物語・スキップ・アドバイス関連
   ========================================================= */

/* ✏️ タイピング中ボタン */
.chalk-text-button {
  background: none;
  border: none;
  font-size: 30px;
  color: #fcb900;
  cursor: pointer;
  padding: 1vh 2vw;
  border-radius: 10px;
  transition: all 0.25s ease;
  pointer-events: none;
  opacity: 0.7;
  text-shadow: 0 0 4px rgba(252, 185, 0, 0.4);
}

/* タイピング完了後に有効化 */
.chalk-text-button.typing-complete {
  pointer-events: auto;
  opacity: 1;
  animation: glow 2s ease-in-out infinite alternate;
}

/* 🪶 ホバー時：チョークの粉が舞うように光る */
.chalk-text-button.typing-complete:hover {
  transform: scale(1.08);
  color: #00f7ff;
  text-shadow: 0 0 8px rgba(150, 248, 255, 0.8),
    0 0 20px rgba(255, 255, 200, 0.4);
}

/* クリック時：少し沈んで“トン”と押す感 */
.chalk-text-button.typing-complete:active {
  transform: scale(0.95);
  color: #ffd15a;
  text-shadow: 0 0 4px rgba(255, 220, 120, 0.5);
  transition: transform 0.1s ease;
}

/* 💻 タブレット横（〜1300px） */
@media (max-width: 1300px) {
  .chalk-text-button {
    font-size: 29px;
    padding: 1vh 1.8vw;
  }
}

/* 📱 エクスペリア1 IIIなど超横長スマホ用 */
@media (max-width: 1300px) and (max-height: 700px) {
  .chalk-text-button {
    font-size: 26px;
    padding: 0.8vh 1.6vw;
  }
}

/* 📱 スマホ横（〜850px） */
@media (max-width: 850px) {
  .chalk-text-button {
    font-size: 24px;
    padding: 0.8vh 1.6vw;
  }
}

/* 📱 小型スマホ（〜768px） */
@media (max-width: 768px) {
  .chalk-text-button {
    font-size: 19px;
    padding: 0.6vh 1.4vw;
  }
}

.story-skip-button {
  position: fixed;
  bottom: 25%;
  right: 32%;
  padding: 10px 18px;
  background-color: rgba(181, 184, 26, 0.531);
  color: rgba(0, 0, 0, 0.49);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 3000;
  font-family: "游ゴシック", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

.story-skip-button:hover {
  background-color: #d9ab2ca6;
  color: white;
  transform: scale(1.1);
}

.story-skip-button:active {
  transform: scale(0.95);
}

/* 📱 エクスペリア1 IIIなど超横長スマホ用 */
@media (max-width: 1300px) and (max-height: 700px) {
  .story-skip-button {
    bottom: 19%;
    right: 32%;
  }
}

/* 📱 〜850px（スマホ横） */
@media (max-width: 850px) {
  .story-skip-button {
    bottom: 15%;
    right: 32%;
  }
}

/* 📱 〜768px（スマホSE 横） */
@media (max-width: 768px) {
  .story-skip-button {
    bottom: 20%;
    right: 32%;
  }
}

/* 物語テキスト */
.welcome-message {
  font-size: 24px;
  color: #ffff40ff;
  text-align: center;
  margin-top: 10px;
  line-height: 1.8;
  opacity: 1;
}

/* ❤️ お気に入りボタン（黒板内） */
.favorite-button {
  position: absolute;
  top: 50px;
  right: 14px;
  z-index: 30;
  padding: 6px 10px;
  border-radius: 10px;
  border: none;
  font-size: 12px;
  cursor: pointer;
  background: rgba(178, 252, 109, 0.75);
  color: #1b1b1b;
}
.favorite-button:hover {
  transform: scale(1.05);
}

.advice-text {
  position: absolute;
  top: 18%;
  left: 6%;
  width: 88%;

  /* 黒板内に収めてスクロール */
  bottom: 14%;          /* 戻るボタン分の余白 */
  overflow-y: auto;

  color: #ffd000;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.8;
  text-align: left;
  white-space: pre-line;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);

  box-sizing: border-box;
  padding-right: 8px;   /* スクロールバーと文字の干渉防止 */
}

.advice-text::-webkit-scrollbar {
  width: 10px;
}

.advice-text::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 10px;
}

.advice-text::-webkit-scrollbar-thumb {
  background: rgba(255, 208, 0, 0.28); /* チョーク色っぽく薄く */
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.12);
}

.advice-text::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 208, 0, 0.42);
}

/* 📚 タブレット横（〜1300px） */
@media (max-width: 1300px) {
  .advice-text {
    top: 18%;
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.7;
  }
}

.back-button {
  position: absolute;
  bottom: 2%;
  right: 0%;
  background-color: rgba(0, 255, 115, 0.6);
  color: #e2d930;
  padding: 10px 24px;
  border: none;
  border-radius: 40px;
  box-shadow: 0 4px 10px rgba(0, 255, 255, 0.4);
  font-size: clamp(14px, 2vw, 18px);
  cursor: pointer;
  opacity: 0;
  transform: translate(0, 0);
  /* ホバーずれ防止 */
  transition: all 0.3s ease;
}

.back-button.visible {
  opacity: 1;
}

.back-button:hover {
  background-color: rgba(0, 255, 255, 0.8);
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.9);
  /* ホバー発光を中央に */
  transform: scale(1.05);
}

@keyframes fadeInAdvice {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes fadeInBack {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 梟カード登場演出 */
.hidden-init {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-in-out;
}

.showing {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
  👤 ミニプロフィール（トップ右側カード用）
  - 右上カードの最上部に出る「アイコン + 名前 + ひとこと」
  - 未設定でも見た目が自然 / 文字のはみ出し防止
========================================================= */

.user-mini-profile--link {
  display: flex;
  align-items: center;
  gap: 10px;

  width: fit-content;
  max-width: 100%;

  /* 右寄せ + メニューとの隙間 */
  margin: 6px 0 14px auto;
  padding: 8px 12px;

  text-decoration: none;
  color: inherit;

  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10);

  /* ガラス感 */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.user-mini-profile--link:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

.user-mini-profile--link:active {
  transform: translateY(0);
}

/* 右側テキスト */
.user-mini-profile__text {
  text-align: right;
  min-width: 0;
}

/* 名前 */
.user-mini-profile__name {
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;

  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ひとこと（1行で省略して崩れ防止） */
.user-mini-profile__bio {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.2;

  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* アイコン枠 */
.user-mini-profile__avatar {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  overflow: hidden;

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);

  flex: 0 0 44px;

  /* 画像をきれいに見せる系（効くことがある） */
  transform: translateZ(0);
}

/* 画像 */
.user-mini-profile__img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;

  /* 変なフィルタで滲むの防止 */
  filter: none;

  /* ちょい安定（効く環境がある） */
  backface-visibility: hidden;
}

/* プレースホルダー（頭文字） */
.user-mini-profile__placeholder {
  font-weight: 900;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.78);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* スマホ微調整 */
@media (max-width: 768px) {
  .user-mini-profile__name,
  .user-mini-profile__bio {
    max-width: 140px;
  }

  .user-mini-profile__avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .user-mini-profile__placeholder {
    font-size: 16px;
  }
}

/* =========================================================
  ミニプロフィール遷移先ページスタイル
========================================================= */

.profile-page {
  width: min(1040px, calc(100% - 32px));
  margin: 60px auto;
}

/* 見出し帯 */
.profile-page .page-header {
  margin-bottom: 18px;
}

.profile-page .page-header h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #1e2a1f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* 本体カード（※重複してたので1つに統合） */
.profile-page .profile-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* 上部ヘッダー */
.profile-page .profile-card::before {
  content: "";
  display: block;
  height: 110px;
  background: radial-gradient(circle at 30% 20%, rgba(120, 255, 170, 0.35), transparent 55%),
    linear-gradient(90deg, rgba(60, 200, 120, 0.22), rgba(255, 200, 80, 0.18));
}

.profile-page .profile-card .profile-avatar,
.profile-page .profile-card .profile-info,
.profile-page .profile-card .form-actions,
.profile-page .profile-card .settings-subnav {
  padding: 18px 24px;
}

/* アバター：丸＋縁＋浮かせる */
.profile-avatar {
  margin-top: -55px;
  display: grid;
  place-items: center;
  padding-bottom: 6px;
}

.profile-avatar .avatar-img,
.profile-avatar .avatar-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 9999px;
  overflow: hidden;

  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.35);
}

.profile-avatar .avatar-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.profile-avatar .avatar-placeholder {
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 34px;
  color: rgba(20, 40, 25, 0.75);
}

/* 情報：見出しっぽく整える */
.profile-info p {
  margin: 10px 0;
  line-height: 1.7;
  color: #172317;
}

.profile-info strong {
  display: inline-block;
  width: 70px;
  color: rgba(20, 40, 25, 0.75);
}

/* ボタン類 */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.primary-btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;

  background: rgba(255, 153, 0, 0.85);
  border: 1px solid rgba(255, 153, 0, 0.45);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);

  transition: transform 0.15s ease, filter 0.15s ease;
}

.primary-btn:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.settings-subnav {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.sub-link {
  color: rgba(20, 40, 25, 0.75);
  text-decoration: none;
  font-weight: 700;
}

.sub-link:hover {
  text-decoration: underline;
}

/* =========================================================
  🕊️ 5. SHOWページ
   ========================================================= */
body.owl-show-page {
  background-image: url("/assets/tisikinomori_winter-25c0ba62.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 🕊️ プロフィールページではスクロールを許可 */
html.owl-show-page,
body.owl-show-page {
  overflow-y: auto !important;
  /* 縦スクロールだけ有効に */
  overflow-x: hidden !important;
  /* 横スクロール防止 */
  height: auto !important;
  min-height: 100%;
}

/*  showページ専用に限定（漏れ防止） */
body.owl-show-page .owl-profile {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px;
}

body.owl-show-page .profile-card {
  border: 3px solid #b5dbff8b;
  border-radius: 15px;
  padding: 30px;
  background-color: rgba(245, 245, 220, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

body.owl-show-page .owl-messages {
  margin: 30px 0;
}

body.owl-show-page .action-buttons {
  text-align: center;
  margin-top: 30px;
}

body.owl-show-page h1 {
  color: #00f2ff;
  font-size: 2.2em;
  font-weight: bold;
  text-align: center;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.9),
    1px -1px 0 rgba(0, 0, 0, 0.9),
    -1px 1px 0 rgba(0, 0, 0, 0.9),
    1px 1px 0 rgba(0, 0, 0, 0.9);
}

body.owl-show-page .profile-details,
body.owl-show-page .message-box {
  background-color: #b5dbff8b;
  border-radius: 10px;
  color: #000000;
  text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.8),
    1px -1px 0 rgba(255, 255, 255, 0.8),
    -1px 1px 0 rgba(255, 255, 255, 0.8),
    1px 1px 0 rgba(255, 255, 255, 0.8);
}

body.owl-show-page .profile-details {
  margin: 20px 0;
  padding: 20px;
  font-size: 1.1em;
}

body.owl-show-page .message-box {
  padding: 15px;
  margin: 10px 0;
  font-size: 1.2em;
  line-height: 1.6;
}

/* =========================================================
  ⏰ 6. 共通ボタン・時計
   ========================================================= */
.btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.owls-container .btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
}

/* 🟢 詳しく見るボタン */
.owls-container .btn-primary {
  background-color: #ff9900b4;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: normal;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

/* 🟡 ホバー時：ふんわり浮く＆明るく光る */
.owls-container .btn-primary:hover {
  background-color: #4dffe1bf;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(77, 255, 216, 0.486);
}

/* 🟠 クリック時：軽く沈む（押し感） */
.owls-container .btn-primary:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
  filter: brightness(1.1);
}

.owl-profile .btn {
  padding: 12px 24px;
  font-weight: bold;
}

.owl-profile .btn-secondary {
  background-color: #6c757d;
  color: white;
}

.owl-profile .btn-secondary:hover {
  background-color: #5a6268;
}

/* 🟣 押したときに少し沈む（クリック感） */
.owl-profile .btn-secondary:active {
  transform: translateY(2px) scale(0.97);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
  filter: brightness(1.1);
}

/* リアルタイム時計 */
.clock-display {
  background: linear-gradient(135deg, #66ea7c18 0%, #4ba26525 100%);
  color: rgb(217, 255, 0);
  padding: 8px 12px;
  border-radius: 6px;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.205);
  margin: 0 !important;
  display: inline-block;
  position: fixed !important;
  bottom: 0 !important;
  left: 0px !important;
  z-index: 2000;
  transform: none !important;
}