/* =========================
   フォント読み込み（Dropbox）
   ========================= */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Edu+SA+Hand:wght@400..700&display=swap');

@font-face {
  font-family: 'neko';
  src: url('https://www.dropbox.com/scl/fi/uj27kr0p0juk5gcne2olf/PeperritoOrnaments-Regular.ttf?rlkey=jlr08hjw1kpb2c4ekpei7guev&st=hf9crupu&dl=1')
       format('truetype');
  font-weight: normal;
  font-style: normal;
}

.neko {
  font-family: 'neko', sans-serif;
  font-size: 30px;
  line-height: 0.75;
  margin: 0;
  margin-bottom: -8px;
  display: block;
  letter-spacing: -0.15em;
  color: rgba(255,255,255,0.8);

  /* 光 */
  text-shadow:
    0 0 6px rgba(255,255,255,0.35),
    0 0 12px rgba(255,255,255,0.2);

  /* フェードイン準備 */
  opacity: 0;
  transform: translateY(6px);

  animation: nekoFadeIn 1.6s ease-out forwards;
}

@keyframes nekoFadeIn {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.neko {
  display: block;   /* または inline-block */
}

a { text-decoration: none; }

 hr { border:0; }

/* ===== タイトル全体 ===== */
.title {
  position: relative;
  display: block;
  width: fit-content;
  margin: 30px auto;
  font-family: "Edu SA Hand", serif;
  font-size: 15px;
  color: #ffffff;
  text-align: center;
  line-height: 1.2;

  /* 発光 */
  text-shadow:
    0 0 6px rgba(255,255,255,0.4),
    0 0 14px rgba(180,220,255,0.4);

  animation: titleGlow 3.5s ease-in-out infinite;
}

/* ===== 発光アニメーション ===== */
@keyframes titleGlow {
  0%, 100% {
    text-shadow:
      0 0 6px rgba(255,255,255,0.4),
      0 0 14px rgba(180,220,255,0.4);
  }
  50% {
    text-shadow:
      0 0 10px rgba(255,255,255,0.7),
      0 0 22px rgba(180,220,255,0.7);
  }
}

/* ===== 十字星（縦） ===== */
.title::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 12%;
  width: 2px;
  height: 14px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 8px rgba(255,255,255,0.85);
  animation: starTwinkle 2.8s ease-in-out infinite;
}

/* ===== 十字星（横） ===== */
.title::after {
  content: "";
  position: absolute;
  top: -5px;
  left: calc(12% - 6px);
  width: 14px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 8px rgba(255,255,255,0.85);
  animation: starTwinkle 2.8s ease-in-out infinite;
}

/* ===== 星の瞬き ===== */
@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================
   全体（夜空グラデーション）
   ========================= */

body {
  margin: 0;
  padding: 24px 14px;
  font-family: "Hina Mincho";
  font-size: 14px;
  line-height: 2;
  color: #eaf0ff;
  background: linear-gradient(
    180deg,
    #091025,
    #162C67,
    #6077B6
  );
}

/* =========================
   上線基準・日記テキストボックス
   ========================= */

.textbox {
  --line-width: 65%;          /* ← 横線の長さ（基準） */

  max-width: 420px;
  margin: 0 auto 3em;
  position: relative;
  padding-top: 14px;
  font-size: 13px;
  line-height: 2;
}

/* 上の横線 */
.textbox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--line-width);
  height: 0.5px;
  background: rgba(255,255,255,0.8);
  transform: translateX(-50%);
}

/* 日付：線の右上に合わせる */
.textbox .date {
  position: absolute;
  top: -1.4em;
  left: 50%;
  transform: translateX(calc(var(--line-width) / 2));
  font-size: 11px;
  opacity: 0.6;
  white-space: nowrap;
}

/* 本文：線より少し内側 */

.textbox {
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.textbox > *:not(.date) {
  width: var(--line-width);
  margin: 0 auto;
  padding: 0 12px;              /* ← 左右完全一致 */
  box-sizing: border-box;       /* ← これ超重要 */
  text-align: left;
}

/* =========================
   リンク対策（色変わり防止）
   ========================= */

a {
  color: inherit;
  text-decoration: none;
}

a:visited,
a:hover,
a:active {
  color: inherit;
}

/* ===== 折りたたみ全体 ===== */
.fold {
  text-align: center;
  margin: 30px auto;
}

/* ===== 折りたたみボタン（星） ===== */

.fold summary {
  cursor: pointer;
  list-style: none;

  display: flex;              /* ← ここが決定打 */
  justify-content: center;    /* ← 横中央 */
  align-items: center;        /* ← 縦中央 */

  width: 100%;
  padding: 0.5em 0;
}

/* デフォルト三角を消す */
.fold summary::-webkit-details-marker {
  display: none;
}

/* 星アイコン（閉じている時） */

.fold summary::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f005"; /* fa-star */

  font-size: 14px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 0 6px rgba(255,255,255,0.6);

  display: block;
}

/* 開いたら星を少し薄く */

.fold[open] summary::before {
  opacity: 0.4;
  transform: scale(0.9);
}

/* ===== 折りたたみ中身 ===== */
.fold-content {
  margin-top: 16px;
  font-size: 0.85em;        /* 本文より小さめ */
  line-height: 1.7;
  text-align: left;
  color: rgba(255,255,255,0.85);

  /* アニメーション初期状態 */
  opacity: 0;
  transform: translateY(-6px);
}

/* ===== フェードイン ===== */
.fold[open] .fold-content {
  animation: foldFade 0.5s ease forwards;
}

/* ===== アニメーション定義 ===== */
@keyframes foldFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.playlist{width:85%;max-width:360px;margin:20px auto;padding:16px 14px 18px;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,0.15);color:#fff;overflow:hidden}
.track-wrap{width:100%;overflow:hidden;white-space:nowrap}
.track{display:inline-block;padding-left:100%;animation:scroll-track 10s linear infinite;font-size:14px;opacity:0.95}
@keyframes scroll-track{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.controls{margin-top:12px;display:flex;justify-content:center;gap:22px;font-size:16px;opacity:0.85}
.controls i{cursor:pointer}
.progress{margin:12px auto 0;width:70%;height:2px;background:rgba(255,255,255,0.35);border-radius:999px}

.onetrack{position:relative;width:90%;max-width:360px;margin:14px auto;padding:8px 12px 8px 34px;background:rgba(255,255,255,0.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:10px;overflow:hidden}
.onetrack-textwrap{width:100%;overflow:hidden;white-space:nowrap}
.onetrack-text{display:inline-block;padding-left:100%;font-size:12px;opacity:0.9;animation:onetrack-scroll 9s linear infinite}
@keyframes onetrack-scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* 音波 */
.onetrack-wave{position:absolute;left:10px;top:50%;display:flex;gap:3px;transform:translateY(-50%)}
.onetrack-wave span{display:block;width:3px;height:10px;background:rgba(255,255,255,0.7);border-radius:2px;animation:wave 1.2s ease-in-out infinite}
.onetrack-wave span:nth-child(2){animation-delay:.2s;height:14px}
.onetrack-wave span:nth-child(3){animation-delay:.4s;height:18px}

@keyframes wave{
0%{transform:scaleY(0.6)}
50%{transform:scaleY(1.2)}
100%{transform:scaleY(0.6)}
}

/* ===== 折りたたみ全体（users） ===== */
.fold-users {
  text-align: center;
  margin: 30px auto;
}

/* ===== 折りたたみボタン（人アイコン） ===== */
.fold-users summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.5em 0;
}

/* デフォルト三角を消す */
.fold-users summary::-webkit-details-marker {
  display: none;
}

/* 人アイコン（閉じている時） */
.fold-users summary::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0c0"; /* fa-users */

  font-size: 14px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 0 6px rgba(255,255,255,0.6);

  display: block;
}

/* 開いたら少し薄く */
.fold-users[open] summary::before {
  opacity: 0.4;
  transform: scale(0.9);
}

/* ===== 折りたたみ中身 ===== */
.fold-users .fold-content {
  margin-top: 16px;
  font-size: 0.85em;
  line-height: 1.7;
  text-align: left;
  color: rgba(255,255,255,0.85);

  opacity: 0;
  transform: translateY(-6px);
}

/* ===== フェードイン ===== */
.fold-users[open] .fold-content {
  animation: foldFade 0.5s ease forwards;
}

/* ===== アニメーション定義（既存流用OK） ===== */
@keyframes foldFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== チャットウィンドウ ===== */
.chat-window{
  width:85%;
  max-width:460px;
  height:95px;
  margin:25px auto;
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,0.7);
  border-bottom:1px solid rgba(255,255,255,0.7);
  overflow-y:auto;
  box-sizing:border-box;
}

/* ===== メッセージ行 ===== */
.chat-message{
  display:flex;
  margin:8px 0;
  padding:0 8px;   /* ← 左右に空間を追加 */
}

/* ===== 吹き出し ===== */
.chat-balloon{
  position:relative;
  max-width:60%;   /* ← さらに小さく */
  padding:7px 11px; /* 少しコンパクト */
  font-size:13px;
  line-height:1.5;
  word-break:break-word;
}

/* ===== 右 ===== */
.chat-message.right{
  justify-content:flex-end;
}

.chat-message.right .chat-balloon{
  background:#6B65D6;
  color:#fff;
  border-radius:16px 16px 4px 16px;
}

.chat-message.right .chat-balloon:after{
  content:"";
  position:absolute;
  right:-6px;
  bottom:6px;
  width:12px;
  height:12px;
  background:#6B65D6;
  clip-path:polygon(0 0,100% 50%,0 100%);
}

/* ===== 左 ===== */
.chat-message.left{
  justify-content:flex-start;
}

.chat-message.left .chat-balloon{
  background:#CAD37C;
  color:#222;
  border-radius:16px 16px 16px 4px;
}

.chat-message.left .chat-balloon:after{
  content:"";
  position:absolute;
  left:-6px;
  bottom:6px;
  width:12px;
  height:12px;
  background:#CAD37C;
  clip-path:polygon(100% 0,0 50%,100% 100%);
}

/* ===== 折りたたみ全体 ===== */
.fold-warning {
  text-align: center;
  margin: 30px auto;
}

/* ===== 折りたたみボタン（⚠） ===== */
.fold-warning summary {
  cursor: pointer;
  list-style: none;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  padding: 0.5em 0;
}

/* デフォルト三角を消す */
.fold-warning summary::-webkit-details-marker {
  display: none;
}

/* ⚠アイコン（閉じている時） */
.fold-warning summary::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f071"; /* fa-exclamation-triangle */

  font-size: 14px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 0 6px rgba(255,255,255,0.6);

  display: block;
}

/* 開いたら少し薄く */
.fold-warning[open] summary::before {
  opacity: 0.4;
  transform: scale(0.9);
}

/* ===== 折りたたみ中身 ===== */
.fold-warning .fold-content {
  margin-top: 16px;
  font-size: 0.85em;
  line-height: 1.7;
  text-align: left;
  color: rgba(255,255,255,0.85);

  opacity: 0;
  transform: translateY(-6px);
}

/* ===== フェードイン ===== */
.fold-warning[open] .fold-content {
  animation: foldFade 0.5s ease forwards;
}

/* ===== アニメーション定義 ===== */
@keyframes foldFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}