/* ============================================================
   CHRONOLO ジョジョ風テーマ (jojo-theme.css) - 指先ギリギリ調整版
   ============================================================ */

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

.jojo-toggle-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Bangers',cursive;font-size:15px;letter-spacing:1px;
  padding:8px 18px;border:3.5px solid #000;border-radius:4px;cursor:pointer;
  background:#1a0a2a;color:#fff;box-shadow:4px 4px 0 #000;
  margin-bottom:14px;transform:skewX(-5deg);
}
body.jojo-mode .jojo-toggle-btn{
  background:#7a2fd6;border-color:#ffe24a;color:#fff;box-shadow:4px 4px 0 #000, 0 0 12px #ffe24a;
}

#jojoMascotBox{ display:none; }
body.jojo-mode #jojoMascotBox{
  display:flex; align-items:center; gap:8px;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px),
              radial-gradient(circle at 30% 20%, #3a1f5c 0%, #16081f 55%, #0a0510 100%);
  border:4.5px solid #000; box-shadow:6px 6px 0 #000; padding:14px 10px; margin-bottom:18px;
  position:relative; overflow:hidden;
}

/* マスコット枠（縦260px × 横180px） */
#jojoMascotBox .mascot-img-wrap{
  width:180px;height:260px;flex-shrink:0;border:4px solid #000;
  box-shadow:5px 5px 0 #000;overflow:hidden;position:relative;
  z-index:1; background: #11081c;
}

/* 基本の画像表示 */
#jojoMascotBox .mascot-img{
  width:100%;height:100%;object-fit:cover;object-position:center center;display:block;
  position:relative; z-index:1; transition: transform 0.2s ease;
}

/* ★【出動モード】1.05倍＋上端合わせ（指先がギリギリ入るように位置調整）★ */
#jojoMascotBox .mascot-img[data-mode="alert"]{
  transform: scale(1.05);
  object-position: center 5%; /* 一番上の指先を基準にして枠内に綺麗に収める */
}

/* 通常・準備モード */
#jojoMascotBox .mascot-img[data-mode="prep"],
#jojoMascotBox .mascot-img[data-mode="idle"]{
  transform: scale(1.0);
}

#jojoMascotBox .mascot-info{flex:1;display:flex;align-items:center;justify-content:center;z-index:10;margin-left:-15px;}

/* 吹き出し（画像の手前に配置） */
#jojoMascotBox .speech-bubble{
  position:relative;background:#fff;color:#000;border:4.5px solid #000;border-radius:12px;
  padding:20px 8px;font-weight:900;font-size:21px;line-height:1.3;
  box-shadow:6px 6px 0 #7a2fd6, 0 0 15px rgba(0,0,0,0.5);
  text-align:center;transform:rotate(-3deg) skewX(-3deg);width:110%;font-family:'Noto Sans JP',sans-serif;
  letter-spacing:1px;
  z-index:10;
}
#jojoMascotBox .speech-bubble::before{
  content:"";position:absolute;left:-18px;top:50%;transform:translateY(-50%);
  border-width:10px 18px 10px 0;border-style:solid;border-color:transparent #000 transparent transparent;
}

#jojoMascotBox .gogogo{
  position:absolute;right:8px;bottom:-10px;font-family:'Bangers',cursive;font-size:52px;
  color:#a855f7;opacity:0.95;letter-spacing:2px;transform:rotate(-8deg);pointer-events:none;
  text-shadow:4px 4px 0 #000, -1px -1px 0 #000;z-index:2;
}

body.jojo-mode #page-chronolo{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px),
    radial-gradient(circle at 25% 0%, #2a1a40 0%, #150a20 45%, #0a0510 100%);
}
body.jojo-mode .chro-sidebar{ background:#120a1c; border-right:3px solid #000; }
body.jojo-mode .sidebar-title{ color:#ffe24a; font-family:'Bangers',cursive; font-size:14px; letter-spacing:2px; }

body.jojo-mode .stat-card{
  background: radial-gradient(circle, rgba(0,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.jojo-mode .stat-num{ font-family:'Bangers',cursive; color:#1a2fd6; -webkit-text-stroke:1.5px #000; font-size:26px; }
body.jojo-mode .stat-label{ color:#000; font-weight:900; }

body.jojo-mode .section-title{
  font-family:'Bangers',cursive; font-size:28px; letter-spacing:3px; color:#ffe24a;
  text-shadow:3px 3px 0 #000, -1px -1px 0 #7a2fd6; transform:skewX(-6deg); display:inline-block;
}
body.jojo-mode .count-chip{ background:#7a2fd6; border:2.5px solid #000; box-shadow:2px 2px 0 #000; font-weight:bold; }

body.jojo-mode .feed-list{ background:transparent; border:none; }

body.jojo-mode .feed-item{
  border:3.5px solid #000 !important; border-left-width:9px !important; border-radius:4px;
  margin-bottom:12px; padding:12px 14px; color:#fff !important;
  box-shadow:4px 4px 0 #000; position:relative; overflow:hidden;
  background-color:#16081f !important;
  background-image: repeating-linear-gradient(65deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 10px) !important;
  display:block !important;
}

body.jojo-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.jojo-mode .feed-title{
  font-weight:900 !important; letter-spacing:0.5px; text-shadow:1.5px 1.5px 0 #000;
  flex:1 1 180px !important; font-size:14px !important; line-height:1.4 !important;
  word-break:break-word !important; color:#ffffff !important;
}

body.jojo-mode .feed-warning-summary{
  color:#f3e8ff !important; font-weight:700 !important; font-size:12px !important;
  text-shadow:1px 1px 2px #000 !important; margin:6px 0 !important; line-height:1.5 !important;
  position:relative; z-index:2;
}

body.jojo-mode .feed-meta, body.jojo-mode .feed-meta-item{ color:#c084fc !important; font-weight:700 !important; position:relative; z-index:2; }
body.jojo-mode .feed-time{ margin-left:auto !important; font-size:11px !important; color:#ffe24a !important; font-weight:bold !important; }

body.jojo-mode .type-badge{
  font-family:'Bangers',cursive; letter-spacing:1px; transform:skewX(-10deg);
  border:2px solid #000; box-shadow:2px 2px 0 #000; font-size:12px; flex-shrink:0 !important;
}
body.jojo-mode .new-badge{
  font-family:'Bangers',cursive; border:2px solid #000; box-shadow:2px 2px 0 #000;
  background:#ff2800; font-size:11px; transform:skewX(-5deg); flex-shrink:0 !important;
}

body.jojo-mode .feed-item::after{
  position:absolute; right:10px; bottom:-2px; font-family:'Bangers',cursive; font-size:34px;
  letter-spacing:2px; pointer-events:none; white-space:nowrap; transform:rotate(-5deg); z-index:1;
  text-shadow:2px 2px 0 #000, -1px -1px 0 #000, 2px -1px 0 #000, -1px 2px 0 #000;
}
body.jojo-mode .feed-item[data-level5="5"]::after{ content:"Lv5ォ！"; color:#ff0055; opacity:.85; font-size:38px; }
body.jojo-mode .feed-item[data-level5="4"]::after{ content:"ゴゴゴゴ"; color:#d946ef; opacity:.80; }
body.jojo-mode .feed-item[data-level5="3"]::after{ content:"ドドド"; color:#ffe24a; opacity:.80; }
body.jojo-mode .feed-item[data-level5="2"]::after{ content:"ザワ…"; color:#38bdf8; opacity:.75; }

/* ============================================================
   CHRONOLO JOJO UI 強化版
   漫画の「コマ」＋「集中線」＋「擬音」デザイン
   ============================================================ */

/* ------------------------------------------------------------
   全体
   ------------------------------------------------------------ */

body.jojo-mode #page-chronolo {
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 2px,
      transparent 2px,
      transparent 13px
    ),
    radial-gradient(
      circle at 50% 0%,
      #39205b 0%,
      #180b25 42%,
      #08040c 100%
    ) !important;
}

/* ------------------------------------------------------------
   フィードカード
   「普通のWebカード」→「漫画のコマ」
   ------------------------------------------------------------ */

body.jojo-mode .feed-item {
  position: relative !important;
  border: 4px solid #000 !important;
  border-left: 10px solid #7a2fd6 !important;
  border-radius: 2px !important;

  background:
    repeating-linear-gradient(
      118deg,
      rgba(255,255,255,.045) 0px,
      rgba(255,255,255,.045) 2px,
      transparent 2px,
      transparent 12px
    ),
    linear-gradient(
      135deg,
      #21102d 0%,
      #100914 100%
    ) !important;

  box-shadow:
    6px 6px 0 #000,
    inset 0 0 0 2px rgba(255,226,74,.18) !important;

  overflow: hidden !important;
  transform: skewX(-0.5deg);
}

/* カード内部に漫画的な光 */
body.jojo-mode .feed-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle at 90% 100%,
      rgba(168,85,247,.22),
      transparent 38%
    );

  opacity: .9;
}

/* ------------------------------------------------------------
   カードタイトル
   ------------------------------------------------------------ */

body.jojo-mode .feed-title {
  position: relative !important;
  z-index: 3 !important;

  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;

  color: #fff !important;

  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000 !important;
}

/* ------------------------------------------------------------
   タイトル・本文を読みやすくする
   ------------------------------------------------------------ */

body.jojo-mode .feed-warning-summary {
  position: relative !important;
  z-index: 3 !important;

  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  font-weight: 800 !important;

  text-shadow: 2px 2px 0 #000 !important;
}

/* ------------------------------------------------------------
   時刻
   ------------------------------------------------------------ */

body.jojo-mode .feed-time {
  position: relative !important;
  z-index: 4 !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.jojo-mode .feed-meta,
body.jojo-mode .feed-meta-item {
  position: relative !important;
  z-index: 4 !important;

  color: #d8a7ff !important;
  font-weight: 900 !important;
  text-shadow: 1px 1px 0 #000 !important;
}

/* ------------------------------------------------------------
   種別バッジ
   ------------------------------------------------------------ */

body.jojo-mode .type-badge {
  position: relative !important;
  z-index: 5 !important;

  padding: 5px 12px !important;

  background: #ffe24a !important;
  color: #000 !important;

  border: 3px solid #000 !important;
  border-radius: 2px !important;

  box-shadow: 3px 3px 0 #000 !important;

  font-family: 'Bangers', cursive !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;

  transform:
    skewX(-8deg)
    rotate(-1deg) !important;
}

/* ------------------------------------------------------------
   NEW
   「NEW」→ 漫画の衝撃表示
   ------------------------------------------------------------ */

body.jojo-mode .new-badge {
  position: relative !important;
  z-index: 10 !important;

  background: #ff2600 !important;
  color: #fff !important;

  border: 3px solid #000 !important;
  box-shadow:
    3px 3px 0 #000,
    0 0 0 2px #ff2600 !important;

  padding: 5px 10px !important;

  font-family: 'Bangers', cursive !important;
  font-size: 17px !important;
  letter-spacing: 1px !important;

  transform:
    rotate(-5deg)
    skewX(-7deg) !important;
}

/* ------------------------------------------------------------
   レベル別カード演出
   ------------------------------------------------------------ */

/* LEVEL 5 */
body.jojo-mode .feed-item[data-level5="5"] {
  border-left-color: #000000 !important;

  background:
    repeating-linear-gradient(
      120deg,
      rgba(0,0,0,.35) 0 3px,
      rgba(20,20,20,.35) 3px 12px
    ),
    linear-gradient(135deg,#0a0a0a,#000000) !important;

  box-shadow:
    7px 7px 0 #000,
    0 0 16px rgba(0,0,0,.7) !important;
}

/* LEVEL 4 */
body.jojo-mode .feed-item[data-level5="4"] {
  border-left-color: #d946ef !important;

  box-shadow:
    6px 6px 0 #000,
    0 0 12px rgba(217,70,239,.3) !important;
}

/* LEVEL 3 */
body.jojo-mode .feed-item[data-level5="3"] {
  border-left-color: #ff1744 !important;

  box-shadow:
    6px 6px 0 #000,
    0 0 10px rgba(255,226,74,.25) !important;
}

/* LEVEL 2 */
body.jojo-mode .feed-item[data-level5="2"] {
  border-left-color: #ffe24a !important;
}

/* レベル判定がない通常データ（水位周知河川・警報級の可能性等）→ 左端も水色に統一 */
body.jojo-mode .feed-item[data-ci] {
  border-left-color: #38bdf8 !important;
}

/* ------------------------------------------------------------
   擬音
   ------------------------------------------------------------ */

body.jojo-mode .feed-item::after {
  right: 8px !important;
  bottom: -7px !important;

  font-family: 'Bangers', cursive !important;
  font-weight: 900 !important;

  letter-spacing: 3px !important;

  opacity: .28 !important;

  transform:
    rotate(-7deg)
    skewX(-8deg) !important;

  pointer-events: none !important;
}

/* レベル5 */
body.jojo-mode .feed-item[data-level5="5"]::after {
  content: "Lv5ォ！" !important;
  color: #ff1744 !important;
  font-size: 48px !important;
  opacity: .55 !important;
}

/* レベル4 */
body.jojo-mode .feed-item[data-level5="4"]::after {
  content: "ゴゴゴゴゴ" !important;
  color: #d946ef !important;
  font-size: 45px !important;
  opacity: .5 !important;
}

/* レベル3 */
body.jojo-mode .feed-item[data-level5="3"]::after {
  content: "ドドドド" !important;
  color: #ffe24a !important;
  font-size: 43px !important;
  opacity: .45 !important;
}

/* レベル2 */
body.jojo-mode .feed-item[data-level5="2"]::after {
  content: "ザワ…" !important;
  color: #38bdf8 !important;
  font-size: 38px !important;
  opacity: .4 !important;
}

/* ------------------------------------------------------------
   重要カードに集中線
   ------------------------------------------------------------ */

body.jojo-mode .feed-item[data-level5="5"]::before,
body.jojo-mode .feed-item[data-level5="4"]::before {
  background:
    repeating-conic-gradient(
      from 0deg at 88% 50%,
      rgba(255,255,255,.13) 0deg 1deg,
      transparent 1deg 8deg
    ),
    radial-gradient(
      circle at 88% 50%,
      rgba(255,0,60,.18),
      transparent 42%
    ) !important;

  opacity: .6 !important;
}

/* ------------------------------------------------------------
   セクションタイトル
   ------------------------------------------------------------ */

body.jojo-mode .section-title {
  position: relative !important;

  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;

  transform:
    skewX(-7deg)
    rotate(-1deg) !important;
}

/* ------------------------------------------------------------
   件数チップ
   ------------------------------------------------------------ */

body.jojo-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.jojo-mode #jojoMascotBox {
  border: 5px solid #000 !important;

  box-shadow:
    7px 7px 0 #000,
    inset 0 0 0 2px #ffe24a !important;

  background:
    repeating-linear-gradient(
      120deg,
      rgba(255,255,255,.05) 0 2px,
      transparent 2px 12px
    ),
    radial-gradient(
      circle at 30% 20%,
      #4b2670,
      #16081f 65%
    ) !important;
}

/* ------------------------------------------------------------
   吹き出しを漫画らしく
   ------------------------------------------------------------ */

body.jojo-mode #jojoMascotBox .speech-bubble {
  border: 5px solid #000 !important;

  box-shadow:
    7px 7px 0 #7a2fd6,
    0 0 0 2px #000 !important;

  font-size: 22px !important;
  font-weight: 900 !important;

  transform:
    rotate(-3deg)
    skewX(-4deg) !important;
}

/* ------------------------------------------------------------
   ゴゴゴ
   ------------------------------------------------------------ */

body.jojo-mode #jojoMascotBox .gogogo {
  font-size: 58px !important;

  color: #a855f7 !important;

  text-shadow:
    4px 4px 0 #000,
    -2px -2px 0 #000 !important;

  opacity: .9 !important;
}

/* ------------------------------------------------------------
   サイドバー
   ------------------------------------------------------------ */

body.jojo-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;
}

/* ------------------------------------------------------------
   スマホ最適化
   ------------------------------------------------------------ */

@media (max-width: 600px) {

  body.jojo-mode .feed-item {
    margin-bottom: 15px !important;
    padding: 13px 12px !important;
  }

  body.jojo-mode .feed-title {
    font-size: 16px !important;
  }

  body.jojo-mode .feed-warning-summary {
    font-size: 13px !important;
  }

  body.jojo-mode .feed-time {
    font-size: 14px !important;
  }

  body.jojo-mode .feed-item::after {
    right: 4px !important;
    bottom: -4px !important;
  }

  body.jojo-mode .feed-item[data-level5="5"]::after {
    font-size: 40px !important;
  }

  body.jojo-mode .feed-item[data-level5="4"]::after {
    font-size: 38px !important;
  }

  body.jojo-mode .feed-item[data-level5="3"]::after {
    font-size: 36px !important;
  }

  body.jojo-mode .section-title {
    font-size: 27px !important;
  }
}

/* ============================================================
   END - CHRONOLO JOJO UI 強化版
   ============================================================ */

/* ============================================================
   CHRONOLO JOJO UI
   STEP 1 : 漫画のコマ化
   ============================================================ */

/* ------------------------------------------------------------
   漫画のコマとしての基本形
   ------------------------------------------------------------ */

body.jojo-mode .feed-item {
  position: relative !important;

  /* 漫画の極太枠 */
  border: 5px solid #000 !important;
  border-radius: 0 !important;

  /* 左側アクセント */
  border-left: 9px solid #7a2fd6 !important;

  /* 漫画のコマらしい余白 */
  margin-bottom: 20px !important;

  /* 黒ベタのような影 */
  box-shadow:
    7px 7px 0 #000,
    inset 0 0 0 2px rgba(255,226,74,.18) !important;

  /* コマそのものを少しだけ傾ける */
  transform: rotate(-0.45deg) !important;

  overflow: hidden !important;
}


/* ------------------------------------------------------------
   カードごとに微妙に違う角度
   ------------------------------------------------------------ */

body.jojo-mode .feed-item:nth-child(2n) {
  transform: rotate(0.35deg) !important;
}

body.jojo-mode .feed-item:nth-child(3n) {
  transform: rotate(-0.7deg) !important;
}

body.jojo-mode .feed-item:nth-child(5n) {
  transform: rotate(0.55deg) !important;
}


/* ------------------------------------------------------------
   漫画コマ内部の二重枠
   ------------------------------------------------------------ */

body.jojo-mode .feed-item::before {
  content: "";
  position: absolute;

  inset: 5px;

  pointer-events: none;

  z-index: 1;

  border: 2px solid rgba(0,0,0,.75);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08);

  background:
    radial-gradient(
      circle at 100% 100%,
      rgba(168,85,247,.12),
      transparent 35%
    );

  opacity: .9;
}


/* ------------------------------------------------------------
   カード内部のコンテンツを前面へ
   ------------------------------------------------------------ */

body.jojo-mode .feed-item > * {
  position: relative !important;
  z-index: 3 !important;
}


/* ------------------------------------------------------------
   タイトルを「漫画のコマの見出し」に
   ------------------------------------------------------------ */

body.jojo-mode .feed-title {
  position: relative !important;

  padding-left: 5px !important;

  font-weight: 900 !important;

  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000 !important;
}


/* ------------------------------------------------------------
   タイトル下に漫画的な黒ライン
   ------------------------------------------------------------ */

body.jojo-mode .feed-title::after {
  content: "";

  display: block;

  width: 72%;

  height: 3px;

  margin-top: 5px;

  background: #000;

  transform:
    skewX(-18deg)
    rotate(-0.5deg);

  box-shadow:
    4px 2px 0 rgba(0,0,0,.35);
}


/* ------------------------------------------------------------
   メタ情報をコマ下部の情報欄っぽく
   ------------------------------------------------------------ */

body.jojo-mode .feed-meta {
  border-top: 2px solid rgba(0,0,0,.8) !important;

  margin-top: 8px !important;
  padding-top: 5px !important;
}


/* ------------------------------------------------------------
   NEWバッジ
   コマから飛び出しているようにする
   ------------------------------------------------------------ */

body.jojo-mode .new-badge {
  transform:
    rotate(-6deg)
    skewX(-7deg)
    translate(-2px,-2px) !important;

  box-shadow:
    4px 4px 0 #000 !important;
}


/* ------------------------------------------------------------
   種別バッジ
   ------------------------------------------------------------ */

body.jojo-mode .type-badge {
  transform:
    skewX(-8deg)
    rotate(-1.5deg) !important;

  box-shadow:
    4px 4px 0 #000 !important;
}


/* ------------------------------------------------------------
   LEVEL 5
   漫画の重要コマとして枠を強化
   ※まだ集中線やアニメーションは入れない
   ------------------------------------------------------------ */

body.jojo-mode .feed-item[data-level5="5"] {
  border-width: 6px !important;
  border-left-width: 16px !important;

  transform: rotate(-0.8deg) !important;

  box-shadow:
    9px 9px 0 #000,
    inset 0 0 0 2px rgba(255,23,68,.3) !important;
}


/* ------------------------------------------------------------
   LEVEL 4
   ------------------------------------------------------------ */

body.jojo-mode .feed-item[data-level5="4"] {
  border-width: 5px !important;
  border-left-width: 12px !important;

  transform: rotate(0.65deg) !important;

  box-shadow:
    8px 8px 0 #000,
    inset 0 0 0 2px rgba(217,70,239,.25) !important;
}


/* ------------------------------------------------------------
   LEVEL 3
   ------------------------------------------------------------ */

body.jojo-mode .feed-item[data-level5="3"] {
  border-left-width: 10px !important;

  transform: rotate(-0.5deg) !important;

  box-shadow:
    7px 7px 0 #000,
    inset 0 0 0 2px rgba(255,226,74,.22) !important;
}


/* ------------------------------------------------------------
   LEVEL 2
   ------------------------------------------------------------ */

body.jojo-mode .feed-item[data-level5="2"] {
  transform: rotate(0.3deg) !important;
}


/* ------------------------------------------------------------
   スマホ
   ------------------------------------------------------------ */

@media (max-width: 600px) {

  body.jojo-mode .feed-item {
    margin-bottom: 17px !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.jojo-mode .feed-item[data-level5="4"] {
    border-left-width: 11px !important;
  }

  body.jojo-mode .feed-item[data-level5="3"] {
    border-left-width: 9px !important;
  }

  body.jojo-mode .feed-item[data-level5="5"] {
    border-width: 5px !important;
    border-left-width: 14px !important;

    box-shadow:
      6px 6px 0 #000,
      inset 0 0 0 2px rgba(255,23,68,.25) !important;
  }

  body.jojo-mode .feed-title::after {
    width: 65%;
  }
}


/* ============================================================
   END - STEP 1
   ============================================================ */

/* ============================================================
   CHRONOLO JOJO UI
   STEP 2 : 漫画のコマの質感
   ============================================================ */


/* ------------------------------------------------------------
   コマ全体
   「Webカード」ではなく「印刷された漫画のコマ」
   ------------------------------------------------------------ */

body.jojo-mode .feed-item {

  background:
    /* 薄いスクリーントーン */
    radial-gradient(
      circle,
      rgba(255,255,255,.055) 0 1px,
      transparent 1.5px
    ),

    /* 斜めの印刷線 */
    repeating-linear-gradient(
      118deg,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 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;
}


/* ------------------------------------------------------------
   漫画らしい内側の印刷フレーム
   ------------------------------------------------------------ */

body.jojo-mode .feed-item::before {

  inset: 7px !important;

  border: 2px solid rgba(0,0,0,.85) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 25px rgba(0,0,0,.3) !important;

  background:
    /* 細かい網点 */
    radial-gradient(
      circle,
      rgba(255,255,255,.035) 0 1px,
      transparent 1.5px
    ) !important;

  background-size: 8px 8px !important;

  opacity: .95 !important;
}


/* ------------------------------------------------------------
   LEVEL 2
   控えめなスクリーントーン
   ------------------------------------------------------------ */

body.jojo-mode .feed-item[data-level5="2"] {

  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;
}


/* ------------------------------------------------------------
   LEVEL 3
   黄色系の漫画トーン
   ------------------------------------------------------------ */

body.jojo-mode .feed-item[data-level5="3"] {

  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;
}


/* ------------------------------------------------------------
   LEVEL 4
   紫の濃いスクリーントーン
   ------------------------------------------------------------ */

body.jojo-mode .feed-item[data-level5="4"] {

  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;
}


/* ------------------------------------------------------------
   LEVEL 5
   漫画の「危険なコマ」
   ------------------------------------------------------------ */

body.jojo-mode .feed-item[data-level5="5"] {

  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%,
      #000000
    ) !important;

  background-size:
    7px 7px,
    auto,
    auto,
    auto !important;
}


/* ------------------------------------------------------------
   カード下部に漫画の印刷ズレ風ライン
   ------------------------------------------------------------ */

body.jojo-mode .feed-item {
  isolation: isolate;
}


/* ------------------------------------------------------------
   重要度が高いほど黒ベタを強く
   ------------------------------------------------------------ */

body.jojo-mode .feed-item[data-level5="4"]::after,
body.jojo-mode .feed-item[data-level5="5"]::after {

  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000 !important;
}


/* ------------------------------------------------------------
   スマホでは網点を少し薄く
   ------------------------------------------------------------ */

@media (max-width: 600px) {

  body.jojo-mode .feed-item {

    background-size:
      8px 8px,
      auto,
      auto,
      auto !important;
  }

  body.jojo-mode .feed-item::before {

    background-size: 9px 9px !important;
  }
}


/* ============================================================
   END - STEP 2
   ============================================================ */


/* ============================================================
   STEP 4 - 擬音を漫画演出として強化
   STEP2の擬音・判定・配置を維持したまま見た目だけ強化
   ============================================================ */

body.jojo-mode .feed-item::after {
  white-space: nowrap !important;
  -webkit-text-stroke: 2px #000 !important;
  paint-order: stroke fill !important;
  text-shadow:
    3px 3px 0 #000,
    5px 5px 0 rgba(0,0,0,.45),
    0 0 8px rgba(0,0,0,.35) !important;
  z-index: 5 !important;
}

/* LEVEL 5 - 最重要 */
body.jojo-mode .feed-item[data-level5="5"]::after {
  font-size: 52px !important;
  letter-spacing: 4px !important;
  -webkit-text-stroke: 3px #000 !important;
  text-shadow:
    4px 4px 0 #000,
    7px 7px 0 rgba(0,0,0,.5),
    0 0 12px rgba(255,23,68,.45) !important;
}

/* LEVEL 4 - 警報 */
body.jojo-mode .feed-item[data-level5="4"]::after {
  font-size: 49px !important;
  letter-spacing: 4px !important;
  -webkit-text-stroke: 3px #000 !important;
  text-shadow:
    4px 4px 0 #000,
    6px 6px 0 rgba(0,0,0,.45),
    0 0 10px rgba(217,70,239,.4) !important;
}

/* LEVEL 3 - 注意報 */
body.jojo-mode .feed-item[data-level5="3"]::after {
  font-size: 46px !important;
  letter-spacing: 3px !important;
  -webkit-text-stroke: 2px #000 !important;
  text-shadow:
    3px 3px 0 #000,
    5px 5px 0 rgba(0,0,0,.4),
    0 0 8px rgba(255,226,74,.35) !important;
}

/* LEVEL 2 - 軽度 */
body.jojo-mode .feed-item[data-level5="2"]::after {
  font-size: 40px !important;
  letter-spacing: 3px !important;
  -webkit-text-stroke: 2px #000 !important;
  text-shadow:
    3px 3px 0 #000,
    5px 5px 0 rgba(0,0,0,.35),
    0 0 7px rgba(56,189,248,.3) !important;
}

/* ============================================================
   END - STEP 4
   ============================================================ */


/* =========================================================
   STEP5: type-badge レベル別カラー
   ※既存の判定・カード背景・擬音には影響させない
   ========================================================= */

/* レベル2 / 注意報 → 黄色 */
.feed-item[data-level5="2"] .type-badge {
  background: #FFE24A !important;
  color: #000 !important;
}

/* レベル3 / 警報 → 赤 */
.feed-item[data-level5="3"] .type-badge {
  background: #E53935 !important;
  color: #fff !important;
}

/* レベル4 → 紫 */
.feed-item[data-level5="4"] .type-badge {
  background: #8E24AA !important;
  color: #fff !important;
}

/* レベル5 → ほぼ黒 */
.feed-item[data-level5="5"] .type-badge {
  background: #212121 !important;
  color: #fff !important;
}

/* 気象レベル判定がない通常データ → 全て同じ青系1色 */
.feed-item[data-ci] .type-badge {
  background: #1976D2 !important;
  color: #fff !important;
}


/* ============================================================
   STEP6-1：出動モード・マスコット軽量シェイク
   ============================================================ */

@keyframes jojoMascotAlertShake {
  0%, 100% { transform: scale(1.05) translateX(0); }
  25%      { transform: scale(1.05) translateX(-1px); }
  50%      { transform: scale(1.05) translateX(1px); }
  75%      { transform: scale(1.05) translateX(-1px); }
}

body.jojo-mode #jojoMascotBox .mascot-img[data-mode="alert"] {
  animation: jojoMascotAlertShake 0.45s ease-in-out infinite;
}

/* ============================================================

/* ============================================================

/* ============================================================
   STEP6-3：モード別ジョジョ擬音
   ============================================================ */

/* 通常モード：WRYYYYYYYYY */
body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="idle"]) .gogogo {
  font-size: 0 !important;
}

body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="idle"]) .gogogo::after {
  content: "WRYYYYYYYYY";
  font-size: 52px;
}

/* 準備モード：ゴゴゴゴ */
@keyframes jojoMascotPrepGogogo {
  0%, 100% {
    transform: rotate(-8deg) scale(1);
  }
  50% {
    transform: rotate(-8deg) scale(1.04);
  }
}

body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="prep"]) .gogogo {
  font-size: 0 !important;
  opacity: .95 !important;
  animation: jojoMascotPrepGogogo 0.9s ease-in-out infinite;
}

body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="prep"]) .gogogo::after {
  content: "ゴゴゴゴ";
  font-size: 64px;
}

/* 出動モード：ズキュウウウン */
body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="alert"]) .gogogo {
  font-size: 0 !important;
}

body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="alert"]) .gogogo::after {
  content: "ズキュウウウン";
  font-size: 58px;
}

/* ============================================================
   STEP6-3：モード別ジョジョ擬音
   ============================================================ */

@keyframes jojoMascotPrepGogogo {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.04); }
}

body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="idle"]) .gogogo {
  font-size: 0 !important;
}

body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="idle"]) .gogogo::after {
  content: "WRYYYYYYYYY";
  font-size: 52px;
}

body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="prep"]) .gogogo {
  font-size: 0 !important;
  opacity: .95 !important;
  animation: jojoMascotPrepGogogo 0.9s ease-in-out infinite;
}

body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="prep"]) .gogogo::after {
  content: "ゴゴゴゴ";
  font-size: 64px;
}

body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="alert"]) .gogogo {
  font-size: 0 !important;
}

body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="alert"]) .gogogo::after {
  content: "ズキュウウウン";
  font-size: 58px;
}

/* ============================================================
   STEP6-3調整：擬音の位置・折り返し
   ============================================================ */

/* WRYYYYYYYYY：少し上へ */
body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="idle"]) .gogogo {
  bottom: 25px !important;
  z-index: 20 !important;
}

/* 準備：セリフ枠と重なってOK */
body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="prep"]) .gogogo {
  z-index: 20 !important;
}

/* 出動：ズキュウウウンを1行で表示 */
body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="alert"]) .gogogo {
  white-space: nowrap !important;
  right: 0 !important;
  bottom: 15px !important;
  z-index: 20 !important;
}

body.jojo-mode #jojoMascotBox:has(.mascot-img[data-mode="alert"]) .gogogo::after {
  white-space: nowrap !important;
  font-size: 52px !important;
}