/* 1. フォント読み込み */
@font-face { font-family: 'Galaxia'; src: url('https://dl.dropboxusercontent.com/scl/fi/xvdur1vnvo13e1pseeyht/Galaxia.ttf?rlkey=hfz5sdmfuv0mrm35ejpw5wpk2&raw=1') format('truetype'); font-display: swap; }
@font-face { font-family: 'Estrellass'; src: url('https://dl.dropboxusercontent.com/scl/fi/xrbiltqox3s1ecyqpvfr8/Estrellass-TFB.ttf?rlkey=ws3yl8csetphew3v8etiouoal&raw=1') format('truetype'); font-display: swap; }
@font-face { font-family: 'FcoFlares-Fixed'; src: url('https://dl.dropboxusercontent.com/scl/fi/hq4hag2dr9tddw7e5htwt/FcoFlares.TTF?rlkey=sw1xkmgkeyatbkkb5vyj34u8a&raw=1') format('truetype'); font-display: swap; }
@font-face { font-family: 'ByomIcons'; src: url('https://dl.dropboxusercontent.com/scl/fi/gsbi74vm386iv6ks4fn6y/Byom-Icons-Trial.ttf?rlkey=s68zakc0bje99gxbuhlr21gmw&raw=1') format('truetype'); font-display: swap; }
@font-face { font-family: 'StarMinor-Selphi'; src: url('https://dl.dropboxusercontent.com/scl/fi/cvjitat4b76g4mb0evuxg/StarMinor.ttf?rlkey=tz87yg0bksud3r0w6byyk17q0&raw=1') format('truetype'); font-display: swap; }
@font-face { font-family: 'NotoSansJP-Light'; src: url('https://www.dropbox.com/scl/fi/zz78doeaqa8o6i525lu3i/NotoSansJP-Light.ttf?rlkey=gzbx6npr2gpq97zf0ovm3biwj&st=d615jxjm&raw=1') format('truetype'); font-display: swap; }
@font-face { font-family: 'YuseiMagic'; src: url('https://www.dropbox.com/scl/fi/oemjfztjnpwtrw58k46oj/YuseiMagic-Regular.ttf?rlkey=0l9nuxo09zw3qmic52qs8aljk&st=hs7aaio6&raw=1') format('truetype'); font-display: swap; }

/* 2. 基本設定（背景を修正） */
body { 
    margin: 0; padding: 10px 15% !important; min-height: 100vh; box-sizing: border-box; 
    background-color: #ffffff; 
    background-image: 
        linear-gradient(to right, #ffffff 0%, transparent 5%, transparent 95%, #ffffff 100%),
        linear-gradient(to bottom, #ffffff 0%, transparent 5%, transparent 95%, #ffffff 100%),
        linear-gradient(to bottom, #1a2a4e 5%, #0b1528 95%);
    background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-attachment: fixed;
    color: rgba(255,255,255,0.3) !important; font-family: 'YuseiMagic', sans-serif !important; font-size: 0.6rem !important; line-height: 1.8; letter-spacing: 0.08em; 
}
p, .article, .entry, .comment, div[style*="word-break"] { font-family: 'YuseiMagic', sans-serif !important; font-size: 0.75rem !important; color: #fff !important; margin: 15px 0 30px; line-height: 1.8; }

/* 3. ボックス共通 */
.box-moon-silver, .box-moon-mist, .box-moon-deep, .box-star-info, .box-star-books, .box-star-temp { position: relative !important; margin: 3.5em auto 2.5em !important; padding: 2.5em 1.5em 1.5em !important; width: 100% !important; box-sizing: border-box !important; display: block !important; color: #EAF4FC !important; font-size: 1.25em !important; line-height: 1.8 !important; border-radius: 15px !important; }
.box-title { position: absolute !important; top: -15px !important; left: 15px !important; padding: 2px 20px !important; font-size: 12px !important; z-index: 20; border-radius: 30px !important; letter-spacing: 0.15em !important; backdrop-filter: blur(6px) !important; font-family: 'YuseiMagic', sans-serif !important; }

/* 4. 各デザイン (MOON) */
.box-moon-silver { background: rgba(255,255,255,0.12) !important; border: 3px double rgba(255,255,255,0.7) !important; box-shadow: 0 0 15px rgba(255,255,255,0.05); }
.box-moon-silver .box-title { background: rgba(255,255,255,0.35) !important; border: 1px solid rgba(255,255,255,0.8) !important; color: #fff !important; text-shadow: 0 0 8px rgba(255,255,255,0.5); }
.box-moon-mist { background: rgba(160,150,200,0.15) !important; border: 3px double rgba(180,170,220,0.6) !important; box-shadow: 0 0 20px rgba(140,130,170,0.15); }
.box-moon-mist .box-title { background: rgba(140,130,180,0.6) !important; border: 1px solid rgba(180,170,220,0.8) !important; color: #f5f0ff !important; }
.box-moon-deep { background: rgba(15,20,40,0.6) !important; border: 3px double rgba(119,182,194,0.4) !important; }
.box-moon-deep .box-title { background: rgba(30,40,70,0.6) !important; border: 1px solid rgba(119,182,194,0.5) !important; color: #EAF4FC !important; font-weight: 700 !important; }

/* 5. 各デザイン (STAR) */
.box-star-info, .box-star-books, .box-star-temp { background: rgba(255,255,255,0.05) !important; border-radius: 2px !important; }
.box-star-info .box-title, .box-star-books .box-title, .box-star-temp .box-title { background: #1E2232 !important; font-weight: 900 !important; backdrop-filter: none !important; border: 1px solid; }
.box-star-info { border: 1px solid rgba(226,198,134,0.4) !important; } .box-star-info .box-title { color: #E2C686 !important; border-color: #E2C686 !important; }
.box-star-books { border: 1px solid rgba(119,182,194,0.4) !important; } .box-star-books .box-title { color: #77B6C2 !important; border-color: #77B6C2 !important; }
.box-star-temp { border: 1px solid rgba(191,105,244,0.4) !important; } .box-star-temp .box-title { color: #BF69F4 !important; border-color: #BF69F4 !important; }

/* 6. その他演出 */
a { font-size: 0.6rem !important; color: rgba(255,255,255,0.4) !important; text-decoration: none; transition: 0.3s; }
.selphi-link { display: inline-block !important; margin: 0 15px !important; transition: 0.3s; opacity: 0.4; }
.selphi-link span { font-family: 'ByomIcons' !important; font-size: 16px !important; color: #fdf5e6 !important; }
.my-details summary { cursor: pointer; list-style: none; color: rgba(200,200,200,0.9) !important; font-size: 0.7rem !important; display: flex; align-items: center; gap: 8px; }
.my-details summary::before { font-family: 'FcoFlares-Fixed' !important; content: "P"; font-size: 1.2rem; color: #fff; }
.my-details[open] summary::before { content: "Q"; }
.header-art-container { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 300px !important; overflow: hidden; margin: 20px 0; }
.base-moon-galaxia { position: absolute; font-family: 'Galaxia' !important; font-size: 260px !important; color: #fdf5e6; opacity: 0.25; z-index: 1; }
.diary-main-title { font-family: 'StarMinor-Selphi' !important; font-size: 16px !important; color: #fdf5e6; text-shadow: 0 0 15px rgba(255,255,255,0.4); position: absolute !important; top: 58% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 10; text-indent: -9999px; white-space: nowrap; }
.diary-main-title::before { content: "Nighty"; text-indent: 0; display: block; letter-spacing: 0.5em; margin: 0 30px 5px 0; text-align: center; }
.diary-main-title::after { content: "night"; text-indent: 0; display: block; letter-spacing: 0.5em; margin-left: 40px; opacity: 0.8; text-align: center; }
.star-deco { position: absolute; font-family: 'Estrellass' !important; z-index: 5; }
.star-galaxy-text { position: absolute; top: 150px !important; left: 60% !important; font-family: 'Galaxia' !important; font-size: 100px !important; color: #e5c986; z-index: 5; animation: magicGlowGalaxy 4s infinite ease-in-out !important; }
@keyframes magicGlowGalaxy { 0%, 100% { filter: brightness(1) drop-shadow(0 0 5px #e5c986); text-shadow: 0 0 10px rgba(229, 201, 134, 0.5); } 50% { filter: brightness(1.3) drop-shadow(0 0 15px #e5c986); text-shadow: 0 0 25px rgba(255, 255, 255, 0.8); } }
hr, .separator, .my-details summary::-webkit-details-marker { display: none !important; }
*[style*="color: red"], font[color="red"] { color: rgba(255,255,255,0.2) !important; font-size: 0.6rem !important; }
.marker-dusty-star {
    background: linear-gradient(transparent 60%, rgba(180, 160, 120, 0.4) 0%);
    color: #fff !important;
}
/* ============================================
   星の色味（ミモザ＆グレー）修正・確定版
   ============================================ */

/* 星の魔法：ミモザカラーをしっかり適用 */
.star-mimosa { 
    color: #e5c986 !important; 
    opacity: 0.9 !important; 
    text-shadow: 0 0 10px rgba(229, 201, 134, 0.5) !important; /* ほんのり光らせる */
}

/* 星の魔法：グレー（控えめな星） */
.star-gray { 
    color: #8a96a3 !important; 
    opacity: 0.5 !important; 
}

/* 星の装飾：共通設定 */
.star-deco { 
    position: absolute; 
    font-family: 'Estrellass' !important; 
    z-index: 5; 
    pointer-events: none; /* クリックの邪魔をしないように */
}

/* 特定の場所だけフォントを戻すための魔法のタグ */
.font-noto { 
    font-family: 'NotoSansJP-Light', sans-serif !important; 
}

.font-galaxia { 
    font-family: 'Galaxia', sans-serif !important; 
}

/* チャット全体のコンテナ */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 18px; /* 名前が表示される分、少し広げました */
  margin: 20px 0;
  font-size: 0.7rem;
}

/* ============================================
   チャット（吹き出し）設定：修正版
   ============================================ */

/* チャット全体のコンテナ */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 22px; /* 少し余裕を持たせました */
  margin: 20px 0;
  font-size: 0.7rem;
}

/* 吹き出しの共通設定 */
.chat-text {
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 15px;
  line-height: 1.6;
  max-width: 80%;
  word-wrap: break-word;
  backdrop-filter: blur(4px);
}

/* 相手（左）：白系の透ける背景 */
.chat-text.left {
  align-self: flex-start;
  background-color: rgba(255, 255, 255, 0.1);
  color: #EAF4FC !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-left-radius: 4px;
  margin-top: 1.2em;
}

/* 相手の名前表示 */
.chat-text.left::before {
  content: attr(data-name);
  position: absolute;
  top: -1.5em;
  left: 5px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* 自分（右）*/
.chat-text.right {
  align-self: flex-end;
  background-color: rgba(200, 220, 255, 0.15); /* 相手に近いが、少し青み */
  color: #EAF4FC !important;
  border: 1px solid rgba(200, 220, 255, 0.3);
  border-bottom-right-radius: 4px;
}

/* ナウプレイヤー：シンプル一行スタイル */
.now-playing {
    display: flex;
    align-items: center;
    gap: 6px; /* 音符との間隔を少し調整 */
    font-size: 0.65rem;
    margin: 15px 0;
    letter-spacing: 0.05em;
    color: #d1c8f0 !important; /* ラベンダー色で統一 */
}

/* 左側でひっそり光る音符（再生中演出） */
.now-playing::before {
    content: "♪"; /* ドットから音符に変更 */
    font-size: 0.8rem; /* 音符は少しだけ大きくするとバランスが良いです */
    color: #d1c8f0;
    animation: pulse-play 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse-play {
    0% { opacity: 0.2; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.2; transform: scale(0.9); }
}

.np-artist { font-weight: bold; }
.np-separator { opacity: 0.6; padding: 0 2px; }
.np-title { font-weight: normal; }