/* ============================================================
   CHRONOLO ダークモード (dark-mode.css)
   ジョジョモード(jojo-theme.css)の配色・カード・フォントだけを引き継ぎ、
   アニメーション・マスコット枠・カードの傾き・擬音文字・集中線は含めない。
   適用範囲はジョジョモードと同じ CHRONOLOタブ。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Noto+Sans+JP:wght@900&display=swap');

/* ---- 切替ボタン ---- */
.dark-toggle-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Bangers',cursive;font-size:15px;letter-spacing:1px;
  padding:8px 18px;border:3px solid #000;border-radius:4px;cursor:pointer;
  background:#1a0a2a;color:#fff;box-shadow:4px 4px 0 #000;
  margin:0 8px 14px 0;
}
body.dark-mode .dark-toggle-btn{
  background:#7a2fd6;border-color:#ffe24a;color:#fff;
  box-shadow:4px 4px 0 #000, 0 0 12px #ffe24a;
}

/* マスコット枠は常に非表示（jojo-mode側が外れているので既定のdisplay:noneのまま。念のため明示） */
body.dark-mode #jojoMascotBox{ display:none !important; }

/* ---- 全体背景・サイドバー ---- */
body.dark-mode #page-chronolo{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 13px),
    radial-gradient(circle at 50% 0%, #39205b 0%, #180b25 42%, #08040c 100%) !important;
}
body.dark-mode .chro-sidebar{
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.025) 0 2px, transparent 2px 12px),
    #100817 !important;
  border-right:4px solid #000 !important;
}
body.dark-mode .sidebar-title{
  color:#ffe24a; font-family:'Bangers',cursive; font-size:14px; letter-spacing:2px;
}

/* ---- 統計カード ---- */
body.dark-mode .stat-card{
  background: radial-gradient(circle, rgba(0,0,0,.6) 1.5px, transparent 1.5px) 0 0/8px 8px, #d8cdb8;
  border:3.5px solid #000; border-radius:0; box-shadow:4px 4px 0 rgba(0,0,0,.9);
}
body.dark-mode .stat-num{
  font-family:'Bangers',cursive; color:#1a2fd6; -webkit-text-stroke:1.5px #000; font-size:26px;
}
body.dark-mode .stat-label{ color:#000; font-weight:900; }

/* ---- 見出し・件数 ---- */
body.dark-mode .section-title{
  font-family:'Bangers',cursive !important; font-size:30px !important; letter-spacing:3px !important;
  color:#ffe24a !important;
  text-shadow:3px 3px 0 #000, -2px -2px 0 #7a2fd6, 2px -1px 0 #000 !important;
  display:inline-block;
}
body.dark-mode .count-chip{
  background:#7a2fd6 !important; color:#fff !important;
  border:3px solid #000 !important; box-shadow:3px 3px 0 #000 !important;
  font-family:'Bangers',cursive !important; font-size:18px !important;
}

/* ---- フィードカード ---- */
body.dark-mode .feed-list{ background:transparent; border:none; }

body.dark-mode .feed-item{
  position:relative !important; display:block !important;
  border:5px solid #000 !important; border-left:9px solid #7a2fd6 !important;
  border-radius:0 !important;
  margin-bottom:20px !important; padding:12px 14px !important;
  color:#fff !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.055) 0 1px, transparent 1.5px),
    repeating-linear-gradient(118deg, rgba(255,255,255,.025) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 85% 15%, rgba(168,85,247,.16), transparent 40%),
    linear-gradient(135deg, #24122f 0%, #120a18 55%, #09050d 100%) !important;
  background-size:7px 7px, auto, auto, auto !important;
  box-shadow:7px 7px 0 #000, inset 0 0 0 2px rgba(255,226,74,.18) !important;
  overflow:hidden !important; isolation:isolate;
  transform:none !important;
}
/* カード内側の枠 */
body.dark-mode .feed-item::before{
  content:""; position:absolute; inset:7px; pointer-events:none; z-index:1;
  border:2px solid rgba(0,0,0,.85);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 25px rgba(0,0,0,.3);
}
body.dark-mode .feed-item > *{ position:relative !important; z-index:3 !important; }

/* レベル別（左線の色・背景トーン） */
body.dark-mode .feed-item[data-level5="2"]{
  border-left-color:#ffe24a !important;
  background:
    radial-gradient(circle, rgba(56,189,248,.08) 0 1px, transparent 1.5px),
    repeating-linear-gradient(120deg, rgba(255,255,255,.025) 0 1px, transparent 1px 10px),
    linear-gradient(135deg, #171523, #0b0a11) !important;
  background-size:8px 8px, auto, auto !important;
}
body.dark-mode .feed-item[data-level5="3"]{
  border-left-width:10px !important; border-left-color:#ff1744 !important;
  background:
    radial-gradient(circle, rgba(255,226,74,.09) 0 1px, transparent 1.5px),
    repeating-linear-gradient(125deg, rgba(255,226,74,.035) 0 2px, transparent 2px 11px),
    linear-gradient(135deg, #2a2110, #110c08) !important;
  background-size:8px 8px, auto, auto !important;
}
body.dark-mode .feed-item[data-level5="4"]{
  border-left-width:12px !important; border-left-color:#d946ef !important;
  background:
    radial-gradient(circle, rgba(217,70,239,.12) 0 1px, transparent 1.5px),
    repeating-linear-gradient(120deg, rgba(217,70,239,.05) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, #32113b, #110711) !important;
  background-size:7px 7px, auto, auto !important;
  box-shadow:8px 8px 0 #000, inset 0 0 0 2px rgba(217,70,239,.25) !important;
}
body.dark-mode .feed-item[data-level5="5"]{
  border-width:6px !important; border-left-width:16px !important; border-left-color:#000 !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.06) 0 1px, transparent 1.7px),
    repeating-linear-gradient(125deg, rgba(0,0,0,.55) 0 3px, rgba(25,25,25,.55) 3px 11px),
    radial-gradient(circle at 80% 20%, rgba(255,23,68,.10), transparent 45%),
    linear-gradient(135deg, #0d0d0d, #030303 65%, #000) !important;
  background-size:7px 7px, auto, auto, auto !important;
  box-shadow:9px 9px 0 #000, inset 0 0 0 2px rgba(255,23,68,.3) !important;
}
/* レベル判定なし（水位周知河川・警報級の可能性など） */
body.dark-mode .feed-item[data-ci]{ border-left-color:#38bdf8 !important; }

/* カード内の文字 */
body.dark-mode .feed-item-header{
  display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
  align-items:center !important; gap:8px !important; width:100% !important; margin-bottom:6px !important;
}
body.dark-mode .feed-title{
  flex:1 1 180px !important; font-size:16px !important; line-height:1.45 !important;
  font-weight:900 !important; color:#fff !important; word-break:break-word !important;
  padding-left:5px !important;
  text-shadow:2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
}
body.dark-mode .feed-title::after{
  content:""; display:block; width:72%; height:3px; margin-top:5px; background:#000;
  transform:skewX(-18deg) rotate(-.5deg); box-shadow:4px 2px 0 rgba(0,0,0,.35);
}
body.dark-mode .feed-warning-summary{
  color:#fff !important; font-size:13px !important; line-height:1.65 !important;
  font-weight:800 !important; text-shadow:2px 2px 0 #000 !important; margin:6px 0 !important;
}
body.dark-mode .feed-time{
  margin-left:auto !important; color:#ffe24a !important;
  font-family:'Bangers',cursive !important; font-size:15px !important; letter-spacing:1px !important;
  text-shadow:2px 2px 0 #000 !important;
}
body.dark-mode .feed-meta,
body.dark-mode .feed-meta-item{
  color:#d8a7ff !important; font-weight:900 !important; text-shadow:1px 1px 0 #000 !important;
}
body.dark-mode .feed-meta{
  border-top:2px solid rgba(0,0,0,.8) !important; margin-top:8px !important; padding-top:5px !important;
}

/* バッジ */
body.dark-mode .type-badge{
  padding:5px 12px !important; background:#ffe24a !important; color:#000 !important;
  border:3px solid #000 !important; border-radius:2px !important; box-shadow:4px 4px 0 #000 !important;
  font-family:'Bangers',cursive !important; font-size:14px !important; letter-spacing:1px !important;
  flex-shrink:0 !important;
}
body.dark-mode .feed-item[data-level5="2"] .type-badge{ background:#FFE24A !important; color:#000 !important; }
body.dark-mode .feed-item[data-level5="3"] .type-badge{ background:#E53935 !important; color:#fff !important; }
body.dark-mode .feed-item[data-level5="4"] .type-badge{ background:#8E24AA !important; color:#fff !important; }
body.dark-mode .feed-item[data-level5="5"] .type-badge{ background:#212121 !important; color:#fff !important; }
body.dark-mode .feed-item[data-ci] .type-badge{ background:#1976D2 !important; color:#fff !important; }

body.dark-mode .new-badge{
  background:#ff2600 !important; color:#fff !important;
  border:3px solid #000 !important; box-shadow:4px 4px 0 #000 !important;
  padding:5px 10px !important; font-family:'Bangers',cursive !important; font-size:17px !important;
  flex-shrink:0 !important;
}

/* ---- スマホ ---- */
@media (max-width:600px){
  body.dark-mode .feed-item{
    margin-bottom:17px !important; padding:13px 12px !important;
    border-width:4px !important; border-left-width:8px !important;
    box-shadow:5px 5px 0 #000, inset 0 0 0 2px rgba(255,226,74,.15) !important;
  }
  body.dark-mode .feed-item[data-level5="3"]{ border-left-width:9px !important; }
  body.dark-mode .feed-item[data-level5="4"]{ border-left-width:11px !important; }
  body.dark-mode .feed-item[data-level5="5"]{ border-width:5px !important; border-left-width:14px !important; }
  body.dark-mode .feed-time{ font-size:14px !important; }
  body.dark-mode .section-title{ font-size:27px !important; }
  body.dark-mode .feed-title::after{ width:65%; }
}