/* 【最新のprofile-modal.css】 */

/* プロフィールアイコン（右上の丸） */
.profile-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}

/* モーダル本体 */
.profile-modal {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 300px;
  background-color: rgba(0, 0, 0, 0.85);   /* 黒＋少し透過 */
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); 
  font-family: 'Roboto', 'Arial', sans-serif;  /* YouTube風フォント */
  color: white;
  z-index: 9999;
  overflow: hidden;
}

/* リスト全体 */
.profile-modal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各メニュー項目 */
.profile-modal li {
  padding: 0;
  border-bottom: none; /* 各 .modal-item で制御 */
  display: block;
  cursor: default;
}

/* ホバー効果 */
.profile-modal li:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.profile-modal li:last-child {
  border-bottom: none;
}

/* 共通リンクスタイル（モーダル内） */
.profile-modal a {
  color: inherit;
  text-decoration: none;
  display: block;
}


/* ✅ 共通の行スタイル */
.modal-item {
  position: relative;
  display: flex;                                  /* アイコンとテキストを横並びに */
  align-items: center;                            /* 縦中央揃え */
  padding: 12px 16px;                             /* 上下左右の余白（タッチしやすく） */
  font-size: 14px;                                /* 標準テキストサイズ */
  line-height: 1.5;                               /* 行間をやや広めにして見やすく */
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); 下線で区切り */
  color: white;                                   /* テキストの色（白） */
  transition: background-color 0.2s;              /* ホバー時の背景色変化をなめらかに */
  gap: 10px;                                      /* emojiと文字の間にスペース */
}

.modal-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
}


.modal-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ✅ モーダル内のリンク・ボタン・名前・残り時間の共通スタイル */
.modal-item a,
.modal-item button,
.modal-item span {
  color: white;                                   /* テキスト色 */
  text-decoration: none;                          /* 下線を消す（リンク） */
  background: none;                               /* 背景色なし（ボタン） */
  border: none;                                   /* 枠線なし（ボタン） */
  font-size: 14px;                                /* 統一フォントサイズ */
  line-height: 1.5;                               /* 行間 */
  padding: 0;                                     /* 内側余白なし */
  margin: 0;                                      /* 外側余白なし */
  flex-grow: 1;                                   /* 横幅を自動で広げて親要素にフィット */
  text-align: left;                               /* テキスト左揃え */
  display: flex;                                  /* 中身もflexで揃える */
  align-items: center;                            /* emojiとテキストを縦中央揃え */
  gap: 10px;                                      /* 内部の間隔 */
  cursor: pointer;                                /* ホバー時にポインター表示 */
}


/* ✅ 最後の項目の区切り線を消す */
.profile-modal li:last-child .modal-item {
  border-bottom: none !important;
}

/* ✅ ボタン特有のブラウザ初期スタイルを完全リセット */
.modal-item button {
  all: unset;                                     /* 全スタイルをリセット（button特有の余白・枠線など） */
  display: flex;                                  /* 中身をflexで整列 */
  align-items: center;                            /* 中央揃え */
  gap: 10px;                                      /* emojiとテキストの間隔 */
  width: 100%;                                    /* ボタンを行全体に広げる */
  cursor: pointer;                                /* ポインター表示 */
}

/* ✅ ログアウトボタン */
#logoutBtn {
  font-size: 14px;
  line-height: 1.5;
  color: white;
  background: none;
  border: none !important;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  vertical-align: middle;
  gap: 10px;
  cursor: pointer;
}


/* 非表示状態 */
.hidden {
  display: none;
}


@media (max-width: 768px) {
  .profile-modal {
    width: 90%;
    right: 5%;
    top: 60px;
    font-size: 14px;
    border-radius: 10px;
    padding: 8px 0;
  }

  .profile-modal li {
    padding: 12px 16px;
    font-size: 14px;
  }

  .profile-icon {
    width: 32px;
    height: 32px;
  }
}


@media (max-width: 480px) {
  .profile-modal {
    width: 90vw;       /* ← 80vw → 90vw の方が余白少なくて自然 */
    right: 5vw;        /* ← 20px固定より相対指定が柔軟で安全 */
    height: auto;      /* ← 必要なときのみ自動調整。固定85vhだと溢れる可能性あり */
    max-height: 85vh;
    overflow-y: auto;  /* ← 必要に応じて縦スクロール */
  }
}