/* === theme-dark-red.css ===================== */
/* 將預設色票覆寫成紅 + 黑（MonsterHunter「惶怒恐暴龍」靈感） */
:root{
  /* 背景與面板：深黑帶一點酒紅 */
  --bg:#050609;
  --surface:#101015;
  --surface-2:#191119;
  --border:#3b141c;

  /* 文字與次要文字 */
  --text:#f9fafb;
  --muted:#9ca3af;

  /* 主題紅：接近你海報上的深紅，而非偏粉色 */
  --primary:#dc2626;
  --primary-600:#991b1b;
  --ring:#f97373;
  --link:#f97373;
}

/* 提高紅色面積：背景紅暈與雜訊 */
body{
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(225,29,72,.06), transparent 60%),
    radial-gradient(900px 480px at 110% 10%, rgba(255,80,80,.06), transparent 55%),
    linear-gradient(180deg, #0a0a0b, #0e0e10);
}
/* 標題與面板紅色裝飾 */
h2{
  position: relative;
}
h2::after{
  content:""; display:block; width:56px; height:3px; margin-top:8px;
  background: linear-gradient(90deg, var(--primary), transparent);
  border-radius: 999px;
}
.panel{ border-top: 2px solid color-mix(in oklab, var(--primary), black 60%); }
/* 導覽與互動紅化 */
a:hover{ color: #fecdd3; }
/* 導覽膠囊與下劃線顏色 */
.navmenu a:hover{ background: color-mix(in oklab, var(--primary), black 88%); }
.navmenu a[aria-current="page"]{ background: color-mix(in oklab, var(--primary), black 90%); }
.navmenu a::after{ background: var(--primary); }
.navmenu a:hover::after,
.navmenu a[aria-current="page"]::after{ opacity: 1; }

/* 跳轉按鈕卡 hover 紅化 */
.jump:hover{
  background: color-mix(in oklab, var(--primary), black 94%);
  border-color: color-mix(in oklab, var(--primary), black 70%);
}

.btn{ background: var(--primary); border-color: color-mix(in oklab, var(--primary), black 20%); }
.btn:hover,
.btn.pressed{
  box-shadow: 0 10px 40px rgba(225,29,72,.28), 0 0 0 1px color-mix(in oklab, var(--primary), black 30%) inset;
  filter: brightness(1.06);
}
.spinner{ border-top-color: var(--primary); }
.badge{ background: color-mix(in oklab, var(--primary), black 65%); }

/*
a:hover{ color: #fecdd3; }
.btn{ background: var(--primary); border-color: color-mix(in oklab, var(--primary), black 20%); }

.btn:hover,
.btn.pressed{
  box-shadow: 0 10px 40px rgba(225,29,72,.28), 0 0 0 1px color-mix(in oklab, var(--primary), black 30%) inset;
  filter: brightness(1.06);
}

.btn--bolt .bolt-line{ stroke: var(--bolt); }
.btn--bolt .bolt-spark{ fill: var(--bolt-glow); }

.btn.outline:hover{ border-color: var(--primary); color: white; }
.card:hover{ border-color: color-mix(in oklab, var(--primary), white 10%); box-shadow: 0 10px 40px rgba(225,29,72,.25); }
.navmenu a[aria-current="page"]{ background: color-mix(in oklab, var(--primary), black 90%); }
.spinner{ border-top-color: var(--primary); }
.badge{ background: color-mix(in oklab, var(--primary), black 65%); }
*/