/* =========================================================
   Theme: 夜空に打ち上がる花火（全国花火大会スタンプラリー）
   - 全ページで styles.css / styles.layout.css の「後」に読み込む
   - 地は夜空（濃紺〜黒）、差し色は花火の色（牡丹のピンク・金の火の粉・青緑・紫）
   - ボタンは控えめに。光が走る演出や右下の三角は使わない
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap");

:root{
  color-scheme: dark;
  --sky-0:   #05071a;                 /* いちばん深い夜空 */
  --sky-1:   #0b1030;
  --sky-2:   #121a45;
  --panel:   rgba(22, 29, 74, .78);   /* カード・パネル（うっすら透ける） */
  --panel-solid: #161d4a;
  --panel-2: rgba(255,255,255,.06);
  --line:    rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.24);
  --text:    #eef0ff;
  --text-sub:#a9b0d8;
  --pink:    #ff5fa2;
  --gold:    #ffc857;
  --orange:  #ff8a3d;
  --cyan:    #4fd1ff;
  --violet:  #a678ff;
  /* 花火は中心が白く、外へ向かって色が変わる。グラデーションはすべて「中心から広がる」形にする */
  --hanabi-text: radial-gradient(ellipse 60% 120% at 50% 50%, #fff7e0 0%, #ffd27a 32%, #ff7aa8 66%, #b48cff 100%);
  --hanabi-line: linear-gradient(90deg, rgba(180,140,255,0) 0%, #b48cff 12%, #ff7aa8 30%, #ffd27a 44%, #fff7e0 50%, #ffd27a 56%, #ff7aa8 70%, #b48cff 88%, rgba(180,140,255,0) 100%);
  --ink-on-pink: #2b0a1e;   /* ピンクの上に置く文字（白だと読みにくい） */
  --glow-pink: 0 0 18px rgba(255,95,162,.45);
  --glow-gold: 0 0 18px rgba(255,200,87,.45);
  --radius:  14px;
  --font: "Lato", "Noto Sans JP", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", Meiryo, sans-serif;

  /* 旧テーマの変数名を使っている箇所向け */
  --navy: #eef0ff; --navy-deep: #05071a; --navy-soft: rgba(255,255,255,.06);
  --gold-light: #ffd98a; --gold-ink: #ffc857; --ink: #eef0ff; --ink-sub: #a9b0d8;
  --bg: #0b1030; --white: #161d4a; --shadow: 0 6px 24px rgba(0,0,0,.35);
}

/* ---------- 夜空（背景） ---------- */
html{
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(166,120,255,.16) 0%, rgba(166,120,255,0) 60%),
    radial-gradient(ellipse 80% 50% at 90% 10%, rgba(255,95,162,.10) 0%, rgba(255,95,162,0) 60%),
    linear-gradient(180deg, var(--sky-2) 0%, var(--sky-1) 35%, var(--sky-0) 100%) fixed !important;
  background-color: var(--sky-0) !important;
}
body{
  margin: 0 !important;
  min-height: 100vh;
  background: transparent !important;
  font-family: var(--font) !important;
  color: var(--text) !important;
  letter-spacing: .02em;
}
/* 星（小さな点を3層重ねる）。水族館版の泡レイヤーの代わりに使う */
body::before{
  content: "" !important;
  display: block !important;
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 42%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 86% 56%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 22% 74%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 86%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 94% 30%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 4% 48%, rgba(255,255,255,.7), transparent 60%);
  background-size: 420px 420px, 380px 380px, 520px 520px, 460px 460px, 400px 400px, 560px 560px, 340px 340px, 480px 480px;
  opacity: .8;
}
body::after{ display: none !important; }
button, input, select, textarea{ font-family: inherit; }
a{ color: var(--gold); }
h1, h2, h3, h4, p, li, label, span, div{ color: inherit; }
::selection{ background: rgba(255,95,162,.45); }

/* ---------- ヘッダー（夜空＋右上に花火） ---------- */
header{
  background:
    url("/img/fw-pink.svg") no-repeat right 120px top -48px / 150px 150px,
    url("/img/fw-gold-s.svg") no-repeat right 270px top 10px / 50px 50px,
    linear-gradient(180deg, rgba(5,7,26,.92), rgba(11,16,48,.86)) !important;
  color: var(--text) !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  padding: 14px 20px !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
header h1,
header h1 a{
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: .05em;
  line-height: 1.25;
  background: var(--hanabi-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
header h1::after{
  content: "Fireworks Stamp Rally";
  display: block;
  margin-top: 3px;
  font-family: "Lato", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-sub);
  -webkit-text-fill-color: var(--text-sub);
}
.bell-btn{ color: var(--text) !important; }
.hamburger-btn{
  color: var(--text) !important;
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 10px !important;
  padding: 7px 9px !important;
}
.hamburger-btn:hover{ background: var(--panel-2) !important; }
@media (max-width: 520px){
  header{
    padding: 11px 12px !important;
    /* スマホではタイトルやボタンに重ならないよう、小さな花火だけをベルの左に出す */
    background-position: right -200px top 0, right 98px top 7px, 0 0 !important;
    background-size: 0 0, 34px 34px, auto !important;
  }
  header h1, header h1 a{ font-size: 17px !important; letter-spacing: .02em; }
  header h1::after{ font-size: 9px; letter-spacing: .18em; }
}

/* ---------- グローバルナビ ---------- */
.gnav{
  background: rgba(5,7,26,.6);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 3;
}
.gnav__inner{
  display: flex;
  justify-content: center;
  max-width: var(--page-max, 980px);
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.gnav__inner::-webkit-scrollbar{ display: none; }
.gnav a{
  flex-shrink: 0;
  padding: 12px 18px;
  color: var(--text-sub) !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color .2s ease;
}
.gnav a:hover{ color: var(--text) !important; }
.gnav a.is-current{ color: var(--text) !important; }
.gnav a.is-current::after{
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--hanabi-line);
}
@media (max-width: 520px){
  .gnav__inner{ justify-content: flex-start; padding: 0 4px; }
  .gnav a{ padding: 10px 11px; font-size: 12.5px; }
  .gnav a.is-current::after{ left: 11px; right: 11px; bottom: 4px; }
}

/* ---------- パネル共通（カード・モーダル・シートなど） ---------- */
.panel{ background: transparent !important; border: none !important; box-shadow: none !important; }
.card, .app-intro, .modal-box, .animal-modal-box, .map-sheet, .bell-popover, .drawer,
.suggest-list, .pref-detail, .update-notice__body, .respect-box, #prefPane{
  background: var(--panel-solid) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

/* ---------- 観覧の記録 ---------- */
.stats-dashboard{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 20%, rgba(255,95,162,.35) 0, rgba(255,95,162,0) 38%),
    radial-gradient(circle at 70% 90%, rgba(79,209,255,.22) 0, rgba(79,209,255,0) 40%),
    linear-gradient(135deg, #1a1450 0%, #0d1236 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  padding: 20px 22px 18px !important;
}
.stats-dashboard__label{
  opacity: 1 !important;
  color: var(--text);
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  margin-bottom: 8px !important;
}
.stats-dashboard__label::before{
  content: "My Stamp Rally";
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold);
  margin-bottom: 2px;
}
.stats-dashboard__num{ font-family: "Lato", sans-serif; font-size: 36px !important; color: #fff; text-shadow: var(--glow-pink); }
.stats-dashboard__pct{ font-family: "Lato", sans-serif; color: var(--gold); opacity: 1 !important; }
.stats-dashboard .progress{
  border-radius: 999px !important;
  background: rgba(255,255,255,.14) !important;
  height: 7px !important;
}
.stats-dashboard .progress .bar{
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ffb84d, #ffd27a) !important;
  box-shadow: 0 0 10px rgba(255,200,87,.7), 4px 0 10px rgba(255,247,224,.8) !important;
}
.share-btn{
  background: var(--pink) !important;
  color: var(--ink-on-pink) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 28px !important;
  font-weight: 700 !important;
  box-shadow: var(--glow-pink);
}
.share-btn:hover{ background: #ff7bb3 !important; }

.badge-container .badge,
.badge{
  border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,200,87,.6) !important;
  color: var(--gold) !important;
}

/* 記録パネル・ログイン案内の右上に開く花火 */
.stats-dashboard::after, .login-cta::after{
  content: "";
  position: absolute;
  right: -30px; top: -40px;
  width: 190px; height: 190px;
  background: url("/img/fw-pink.svg") no-repeat center / contain;
  opacity: .7;
  pointer-events: none;
}
.stats-dashboard::before, .login-cta::before{
  content: "";
  position: absolute;
  right: 120px; bottom: -26px;
  width: 80px; height: 80px;
  background: url("/img/fw-cyan-s.svg") no-repeat center / contain;
  opacity: .55;
  pointer-events: none;
}
.stats-dashboard > *, .login-cta > *{ position: relative; z-index: 1; }

/* ---------- ログイン前の案内 ---------- */
.login-cta{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,200,87,.35) 0, rgba(255,200,87,0) 34%),
    radial-gradient(circle at 78% 80%, rgba(255,95,162,.30) 0, rgba(255,95,162,0) 36%),
    linear-gradient(135deg, #1a1450 0%, #0d1236 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--text);
  padding: 22px !important;
  box-shadow: var(--shadow) !important;
}
.login-cta__title{ font-size: 19px !important; font-weight: 900 !important; letter-spacing: .04em; color: #fff; }
.login-cta__title::before{
  content: "Stamp Rally";
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold);
  margin-bottom: 4px;
}
.login-cta__desc{ opacity: 1 !important; color: var(--text-sub); margin-top: 4px; }
.login-cta__btn{
  border-radius: 999px !important;
  border: none !important;
  margin-top: 14px;
  font-weight: 700 !important;
  background: #fff !important;
  color: #1a1d3a !important;
}
.app-intro{ border-radius: var(--radius) !important; box-shadow: none !important; }
.app-intro__headline, .app-intro__list li{ color: var(--text) !important; }
.app-intro__headline strong{ color: var(--gold) !important; }
.app-intro__list li::before{ color: var(--pink) !important; background: rgba(255,95,162,.16) !important; }
.app-intro__link{
  display: inline-block;
  padding: 6px 0;
  background: none !important;
  color: var(--gold) !important;
  font-weight: 700;
  border: none !important;
}

/* ---------- セクション見出し ---------- */
.sec-title{
  width: min(var(--page-max, 980px), calc(100% - (var(--page-pad, 16px) * 2)));
  margin: 44px auto 18px;
  text-align: center;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.3;
}
.sec-title span{
  display: block;
  margin-top: 6px;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3em;
  background: var(--hanabi-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sec-title::before{       /* 見出しの上に小さな花火 */
  content: "";
  display: block;
  width: 52px; height: 52px;
  margin: 0 auto 4px;
  background: url("/img/fw-gold-s.svg") no-repeat center / contain;
}
@media (max-width: 520px){
  .sec-title{ font-size: 21px; margin: 34px auto 14px; }
  .sec-title span{ font-size: 11.5px; }
}

/* ---------- 入力欄 ---------- */
.row input,
.suggest-wrap input,
select,
input[type="text"],
input[type="date"],
input[type="email"],
input[type="search"],
textarea,
.note,
.visit-date-input,
#pref-filter{
  border-radius: 10px !important;
  border: 1px solid var(--line-strong) !important;
  background: rgba(5,7,26,.55) !important;
  color: var(--text) !important;
}
input::placeholder, textarea::placeholder{ color: #7d84b0 !important; opacity: 1; }
.row input:focus,
.suggest-wrap input:focus,
textarea:focus,
.note:focus,
select:focus{
  outline: 2px solid rgba(255,95,162,.45);
  border-color: var(--pink) !important;
}
option{ background: var(--panel-solid); color: var(--text); }
.suggest-wrap input{ padding: 12px 44px 12px 14px !important; }
.suggest-list{ border-radius: 10px !important; }
.suggest-list li{ color: var(--text) !important; }
.suggest-list li:hover{ background: var(--panel-2) !important; }
.search-icon-btn{ color: var(--text-sub) !important; }

.search-action-btn{
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 13px 12px !important;
  font-size: 14.5px !important;
  letter-spacing: .06em;
}
.search-action-btn:hover{ border-color: var(--line-strong) !important; }
.search-action-btn.has-filter{ border-color: var(--gold) !important; color: var(--gold) !important; }

/* ---------- 地図（夜の地図） ---------- */
.map-tabs{ gap: 6px !important; margin-bottom: 8px !important; }
.map-tab{
  border-radius: 999px !important;
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: var(--text-sub) !important;
  padding: 9px 8px !important;
  letter-spacing: .08em;
}
.map-tab.is-active{
  background: rgba(255,255,255,.1) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}
/* 明るい地図タイルを反転して夜の地図にする（地名は日本語のまま） */
#map .leaflet-tile-pane{ filter: invert(1) hue-rotate(200deg) brightness(.9) contrast(.85) saturate(.5); }
#map{
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
  background: #0b1030 !important;
}
#map .leaflet-control-zoom a{ background: var(--panel-solid) !important; color: var(--text) !important; border-color: var(--line) !important; }
#map .leaflet-control-attribution{ background: rgba(5,7,26,.7) !important; color: var(--text-sub) !important; }
#map .leaflet-control-attribution a{ color: var(--text-sub) !important; }
#prefPane{ border-radius: var(--radius); padding: 12px; }
.japan-map-viewport{ background: transparent !important;  border-color: var(--line) !important; }
#japanMap .boundary-line{ stroke: rgba(255,255,255,.16) !important; stroke-width: 4 !important; }
#japanMap g.prefecture{ stroke: #0b0f2a; stroke-width: 1.2; }
.japan-zoom button{ border-radius: 999px !important; background: var(--panel-solid) !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
.lg-done { background: var(--gold) !important; }
.lg-part { background: var(--violet) !important; }
.lg-none { background: #5a63a8 !important; }
.lg-empty{ background: #1a1f45 !important; border: 1px solid var(--line-strong); }
.pref-detail{ border-radius: 12px !important; color: var(--text-sub) !important; }
.pref-detail-count{ color: var(--gold) !important; font-weight: 700; }
.pref-aq{ border-radius: 10px !important; background: var(--panel-2) !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
.pref-aq.on{ color: var(--gold) !important; border-color: rgba(255,200,87,.6) !important; background: rgba(255,200,87,.08) !important; font-weight: 700; }

/* 花火マーカー（app.js の fireworkMarker） */
.fw-marker-wrap{ background: none !important; border: none !important; }
.fw-marker{ line-height: 0; }
.fw-marker svg{ display: block; overflow: visible; }
.fw-marker.unvisited svg{ opacity: 1; filter: drop-shadow(0 0 3px rgba(255,255,255,.55)); }
.fw-marker.want-to-go svg{ filter: drop-shadow(0 0 4px rgba(79,209,255,.8)); }
.fw-marker.visited svg{ filter: drop-shadow(0 0 5px rgba(255,200,87,.9)); animation: fw-twinkle 2.6s ease-in-out infinite; }
.fw-marker.closed svg{ opacity: .5; }
@keyframes fw-twinkle{
  0%, 100%{ transform: scale(1); filter: drop-shadow(0 0 4px rgba(255,200,87,.8)); }
  50%     { transform: scale(1.12); filter: drop-shadow(0 0 9px rgba(255,95,162,.9)); }
}

/* ---------- 並び替えバー ---------- */
.sortBar{ justify-content: flex-end !important; }
.sortBar .row-compact span{ opacity: 1 !important; color: var(--text-sub); font-weight: 700; }
#sort,
.filter-select-btn{
  border-radius: 999px !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  padding: 6px 14px !important;
  font-weight: 700;
}
.filter-select-btn.has-filter{ border-color: var(--gold) !important; color: var(--gold) !important; }
.toggle-switch input:checked + .toggle-switch__track{ background: var(--pink) !important; }

/* ---------- 一覧 ---------- */
#list{ background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }
.regionHeadingBtn{
  display: block;
  width: 100%;
  margin: 36px 0 16px !important;
  padding: 0 0 6px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: .1em;
  position: relative;
}
.regionHeadingBtn::after{
  content: "";
  display: block;
  width: 56px; height: 2px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: var(--hanabi-line);
}

.card{
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow) !important;
  padding: 18px 18px 16px !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.card:hover{ transform: none !important; border-color: var(--line-strong) !important; }
.card.is-visited{
  border-color: rgba(255,200,87,.45) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,95,162,.18) 0, rgba(255,95,162,0) 42%),
    var(--panel) !important;
}
.card.closed{ opacity: .6; }
.card .title,
.card .link-title{
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: .02em;
}
.card .link-title:hover{ color: var(--gold) !important; }
.card .meta{ opacity: 1 !important; color: var(--text-sub) !important; font-size: 12.5px !important; }
.card .meta::before{
  content: "";
  display: inline-block;
  width: 10px; height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
  background: var(--text-sub);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13'%3E%3Cpath d='M5 0a5 5 0 0 0-5 5c0 3.6 5 8 5 8s5-4.4 5-8a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13'%3E%3Cpath d='M5 0a5 5 0 0 0-5 5c0 3.6 5 8 5 8s5-4.4 5-8a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.card-bath{ color: var(--gold) !important; font-weight: 700; }
.card-detail-link{ color: var(--text-sub) !important; font-weight: 700; }
.card-detail-link:hover{ color: var(--text) !important; }
.card-sep{ border-top-color: var(--line) !important; }

/* 種類タグ：種類ごとに花火の色 */
.kind-badge{
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  padding: 1px 10px !important;
}
.kind-badge.kind-sandai{ border-color: rgba(255,200,87,.75) !important; color: var(--gold) !important; }
.kind-badge.kind-kyogi { border-color: rgba(255,95,162,.75) !important; color: #ff8fc0 !important; }
.kind-badge.kind-kaijo { border-color: rgba(79,209,255,.7) !important;  color: #8fe1ff !important; }
.kind-badge.kind-kasen { border-color: rgba(166,120,255,.75) !important; color: #c4a6ff !important; }
.kind-badge.kind-fuyu  { border-color: rgba(190,225,255,.7) !important; color: #d6ecff !important; }
.closed-badge{ border-radius: 999px !important; background: #3a3f63 !important; color: #c9cde8 !important; }

/* 公式サイトへのボタン */
.card-official{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  letter-spacing: .04em;
}
.card-official:hover{ background: rgba(255,255,255,.14) !important; }

/* 観覧済にする：白い枠 → 押したら花火色 */
.btn{
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.7) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
}
.btn:hover:not(:disabled){ background: rgba(255,255,255,.08) !important; }
.btn.visited,
.btn.visited:hover:not(:disabled){
  background: var(--pink) !important;
  border-color: transparent !important;
  color: var(--ink-on-pink) !important;
  box-shadow: var(--glow-pink);
}
.btn:disabled{ opacity: .55; cursor: not-allowed; }
.btn-want{
  border-radius: 10px !important;
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: var(--text-sub) !important;
}
.btn-want.active{ background: rgba(79,209,255,.12) !important; border-color: var(--cyan) !important; color: var(--cyan) !important; }
.count-btn{ border: 1px solid var(--line-strong) !important; background: transparent !important; color: var(--text) !important; }
.count-btn:hover{ background: var(--panel-2) !important; }
.visit-year-chip{ border-radius: 999px !important; background: rgba(255,200,87,.12) !important; color: var(--gold) !important; border: 1px solid rgba(255,200,87,.4) !important; }
.visit-year-add{ border-radius: 999px !important; color: var(--text-sub) !important; border-color: var(--line-strong) !important; background: transparent !important; }

.photo-btn,
.sheet-photo-add-btn{
  background: transparent !important;
  color: var(--text) !important;
  border: 1px dashed var(--line-strong) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.photo-btn:hover{ background: var(--panel-2) !important; }

/* 観覧済スタンプ：花火色の丸判 */
.stamp{
  top: 12px !important;
  right: 14px !important;
  width: 62px;
  height: 62px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,95,162,.18) 0, rgba(255,95,162,0) 70%) !important;
  border: 2.5px solid var(--pink);
  box-shadow: inset 0 0 0 2px rgba(5,7,26,.9), inset 0 0 0 3.5px var(--pink), var(--glow-pink) !important;
  color: var(--pink) !important;
  font-size: 0 !important;
  display: grid;
  place-items: center;
  transform: rotate(-12deg);   /* !important を付けるとスタンプのアニメーションが効かなくなる */
}
.stamp::before{
  content: "観覧済";
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #ff8fc0;
}
.card.is-visited .card-title-row{ padding-right: 66px; }

/* ---------- ボトムシート（地図マーカーを押したとき） ---------- */
.map-sheet{ border-radius: 18px 18px 0 0 !important; }
.map-sheet__name{ color: #fff !important; font-weight: 700 !important; }
.map-sheet *{ color: inherit; }
.map-sheet__meta, .map-sheet__sub{ color: var(--text-sub) !important; }
.sheet-visit-btn{ border-radius: 10px !important; }
.sheet-want-btn, .sheet-count-btn{ background: transparent !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important; }
.sheet-want-btn.active{ color: var(--cyan) !important; border-color: var(--cyan) !important; background: rgba(79,209,255,.12) !important; }
.sheet-card-link{ color: var(--gold) !important; background: transparent !important; }
.map-sheet__close{ color: var(--text-sub) !important; }

/* ---------- モーダル ---------- */
.modal-overlay{ background: rgba(2,3,14,.7) !important; }
.modal-box{ border-radius: 16px !important; }
.modal-title{ color: #fff !important; font-weight: 900 !important; letter-spacing: .04em; }
.modal-box p, .modal-box div{ color: inherit; }
.modal-btn{ border-radius: 999px !important; }
.modal-btn--primary{ background: var(--pink) !important; color: var(--ink-on-pink) !important; border: none !important; }
.modal-btn--primary:hover{ background: #ff7bb3 !important; }
.modal-btn--secondary{ background: var(--gold) !important; color: #1a1d3a !important; border: none !important; }
.modal-btn--cancel{ background: transparent !important; border: 1px solid var(--line-strong) !important; color: var(--text) !important; }
.area-pref-btn{
  border-radius: 999px !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}
.area-pref-btn:hover{ border-color: var(--line-strong) !important; }
.area-pref-btn.active, .area-pref-btn.is-active{ background: var(--gold) !important; color: #1a1d3a !important; border-color: var(--gold) !important; }
.area-region-title{ color: var(--gold) !important; font-weight: 900 !important; }
.filter-section-title{ color: var(--text-sub) !important; }
.filter-radio-label, .filter-check-label{
  border-radius: 999px !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}
.filter-radio-label:has(input:checked), .filter-check-label:has(input:checked){ border-color: var(--pink) !important; color: #ff8fc0 !important; }

/* ---------- ドロワー ---------- */
.drawer{ border-radius: 0 !important; border: none !important; border-left: 1px solid var(--line) !important; }
.drawer-close{ color: var(--text-sub) !important; }
.drawer-close:hover{ background: var(--panel-2) !important; }
.drawer-link{ border-radius: 10px !important; color: var(--text) !important; border: none !important; }
.drawer-link:hover{ background: var(--panel-2) !important; color: #fff !important; }
.drawer-link--active{ background: rgba(255,95,162,.14) !important; color: #ff8fc0 !important; }
.drawer__hr, .drawer-divider{ border-color: var(--line) !important; }
.drawer__login{ border-color: var(--line) !important; }
.drawer__login .linklike, .drawer-login-status{ color: var(--gold) !important; }

/* ---------- お知らせベル ---------- */
.bell-popover{ border-radius: 12px !important; }
.bell-popover__title{ color: #fff !important; }
.bell-popover__list li{ color: var(--text) !important; border-color: var(--line) !important; }
.bell-popover__date{ color: var(--gold) !important; font-family: "Lato", sans-serif; }
.bell-popover__more{ color: var(--gold) !important; }
.bell-badge{ background: var(--pink) !important; }

/* ---------- フッター ---------- */
.site-footer{
  width: 100% !important;
  max-width: none !important;
  margin: 56px 0 0 !important;
  padding: 34px 20px 28px !important;
  border-radius: 0 !important;
  background: rgba(3,4,16,.85) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--text-sub) !important;
  position: relative;
}
.site-footer::before{
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--hanabi-line);
  opacity: .8;
}
.site-footer .footer-inner{
  max-width: var(--page-max, 980px);
  margin: 0 auto;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px !important;
}
.site-footer .footer-inner > span{ width: 100%; text-align: center; margin-top: 10px; }
.site-footer a{ color: var(--text) !important; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.site-footer a .nav-icon{ width: 17px; height: 17px; color: var(--gold); }
.site-footer a:hover{ color: var(--gold) !important; }
.site-footer span{ color: var(--text-sub) !important; }

/* ---------- 下層ページの本文 ---------- */
main.content h1,
.page h1,
.dm-wrap > h1,
.contact-wrap h1{
  color: #fff;
  font-weight: 900;
  letter-spacing: .04em;
}
h2{ color: #fff; }
h3{ color: var(--gold); }
.respect-box{ border-radius: 12px !important; border-left: 3px solid var(--gold) !important; color: var(--text-sub) !important; }
.respect-box strong{ color: var(--text) !important; }
.updates-list li{ border-color: var(--line) !important; }
.updates-date{ color: var(--gold) !important; }
.form-group label{ color: var(--text) !important; }
.contact-wrap button[type="submit"], #contactForm button[type="submit"]{
  background: var(--pink) !important; color: var(--ink-on-pink) !important; border: none !important; border-radius: 999px !important;
}

/* ---------- ミッション ---------- */
.missions-title{ color: #fff; font-weight: 900 !important; letter-spacing: .04em; }
.missions-section h2{
  color: #fff !important;
  font-weight: 900 !important;
  border-bottom: 1px solid var(--line-strong) !important;
}
.badge-row,
.pref-item,
.animal-group,
.missions-login-msg{
  background: var(--panel) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.badge-row .badge-name, .pref-item .pref-name{ color: var(--text) !important; }
.badge-row .badge-req, .badge-row .badge-status, .pref-item .pref-progress{ color: var(--text-sub) !important; }
.badge-row .badge-icon{ background: rgba(255,255,255,.06) !important; }
.badge-row.earned,
.badge-row.earned.pref,
.badge-row.earned.region,
.badge-row.earned.animal,
.pref-item.earned{
  border-color: rgba(255,200,87,.55) !important;
  background: radial-gradient(circle at 100% 0%, rgba(255,200,87,.16) 0, rgba(255,200,87,0) 50%), var(--panel) !important;
}
.badge-row.earned .badge-name,
.pref-item.earned .pref-name{ color: #fff !important; }
.badge-row.earned .badge-status,
.pref-item.earned .pref-progress{ color: var(--gold) !important; }
.badge-row.earned .badge-icon{ background: rgba(255,200,87,.16) !important; }

/* ---------- 個別花火大会ページ（/festival/{id}） ---------- */
.dm-wrap{ color: var(--text); }
.dm-breadcrumb, .dm-breadcrumb a{ color: var(--text-sub) !important; }
.dm-loc{ color: var(--text-sub) !important; }
.dm-when{ color: var(--gold) !important; }
.dm-official{
  border-radius: var(--radius) !important;
  background:
    radial-gradient(circle at 92% 30%, rgba(255,200,87,.35) 0, rgba(255,200,87,0) 40%),
    linear-gradient(135deg, #2a1a6e 0%, #141a4a 100%) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: var(--shadow) !important;
  color: #fff !important;
}
.dm-official:hover{ border-color: var(--gold) !important; }
.dm-cta{
  border-radius: 999px !important;
  background: var(--pink) !important;
  border: none !important;
  color: var(--ink-on-pink) !important;
  box-shadow: var(--glow-pink);
}
.dm-kind{ border-radius: 999px !important; background: transparent !important; color: var(--gold) !important; border: 1px solid rgba(255,200,87,.7); font-weight: 500 !important; }
.dm-link{ border-radius: 999px !important; background: var(--panel-2) !important; color: var(--text) !important; border: 1px solid var(--line-strong); }
.dm-map{ border-radius: var(--radius) !important; border: 1px solid var(--line) !important; filter: invert(1) hue-rotate(200deg) brightness(.9) contrast(.85) saturate(.5); }
.dm-maplink a{ color: var(--text-sub) !important; }
.dm-visited{ color: var(--gold) !important; }
.dm-related a{ color: var(--text) !important; }
.dm-related small{ color: var(--text-sub); }
.dm-wrap h2{
  margin-top: 38px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
}
.dm-wrap p{ color: var(--text); }

/* =========================================================
   Motion（控えめに。光が走る演出・浮き上がりは使わない）
   ========================================================= */
:root{ --ease-out: cubic-bezier(.22,.8,.26,1); }
.search-action-btn, .card-official, .share-btn, .btn, .btn-want, .photo-btn,
.modal-btn, .area-pref-btn, .dm-official, .dm-cta, .map-tab,
.drawer-link, .filter-select-btn, #sort, .login-cta__btn, .hamburger-btn,
.count-btn, .pref-aq, .card-detail-link, .app-intro__link{
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s var(--ease-out) !important;
}
.btn:active:not(:disabled), .card-official:active, .share-btn:active, .dm-cta:active,
.modal-btn:active, .login-cta__btn:active{ transform: scale(.97); }

/* 観覧済にしたとき：ボタンから火花が散る */
.btn.visited{ position: relative; overflow: visible; }
.btn.visited::after{
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 -34px 0 -1px #ffc857, 24px -24px 0 -1px #ff5fa2, 34px 0 0 -1px #4fd1ff, 24px 24px 0 -1px #ffc857,
    0 34px 0 -1px #ff5fa2, -24px 24px 0 -1px #4fd1ff, -34px 0 0 -1px #ffc857, -24px -24px 0 -1px #ff5fa2;
  opacity: 0;
  animation: fw-spark .8s ease-out 1;
}
@keyframes fw-spark{
  0%  { opacity: 1; transform: scale(.2); }
  70% { opacity: 1; }
  100%{ opacity: 0; transform: scale(1.4); }
}

.stats-dashboard .progress .bar{ transition: width 1s var(--ease-out) !important; }

/* スクロールで現れる（JS が html に .js-anim を付けたときだけ有効） */
.js-anim .card,
.js-anim .sec-title,
.js-anim .regionHeadingBtn{ opacity: 0; transform: translateY(14px); }
.js-anim .card.is-inview,
.js-anim .sec-title.is-inview,
.js-anim .regionHeadingBtn.is-inview{ animation: fadeUp .6s var(--ease-out) forwards; }
@keyframes fadeUp{ to{ opacity: 1; transform: none; } }

/* 観覧済スタンプ：判子を押すように */
.js-anim .card.is-inview .stamp{ animation: stampPress .5s var(--ease-out) .25s both; }
@keyframes stampPress{
  0%  { opacity: 0; transform: rotate(-12deg) scale(1.6); }
  100%{ opacity: 1; transform: rotate(-12deg) scale(1); }
}

/* 見出しの上の花火がふわっと光る */
.sec-title::before{ animation: fw-glow 3.2s ease-in-out infinite; }
@keyframes fw-glow{ 0%,100%{ opacity: .75; transform: scale(.94); } 50%{ opacity: 1; transform: scale(1.06); } }

.modal-box{ animation: popIn .25s var(--ease-out); }
@keyframes popIn{ from{ opacity: 0; transform: translateY(8px) scale(.98); } to{ opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .js-anim .card, .js-anim .sec-title, .js-anim .regionHeadingBtn{ opacity: 1 !important; transform: none !important; }
}

/* ---------- 線画アイコン（web/icons.js、app/main.py の _icon） ---------- */
.ic{ width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-right: .35em; flex-shrink: 0; }
.kind-badge .ic, .dm-kind .ic{ width: 1.05em; height: 1.05em; margin-right: .3em; }
.badge .ic{ width: 1.05em; height: 1.05em; margin-right: .3em; }
.badge-icon .ic{ width: 26px; height: 26px; margin: 0; vertical-align: middle; }
.badge-row.earned .badge-icon{ color: var(--gold); }
.badge-row .badge-icon{ color: var(--text-sub); }
.btn .ic, .btn-want .ic, .sheet-visit-btn .ic, .sheet-want-btn .ic{ vertical-align: -.22em; }
.btn-want.active .ic{ color: var(--cyan); }
.card-bath .ic{ color: var(--gold); }
.dm-loc .ic{ color: var(--pink); }
.dm-when .ic{ color: var(--gold); }
.pref-aq-name .ic{ width: 1.05em; height: 1.05em; }
.pref-aq.on .pref-aq-name .ic{ color: var(--gold); }
.filter-radio-label .ic, .filter-check-label .ic{ width: 1.05em; height: 1.05em; margin-right: .25em; }
.modal-title .ic{ color: var(--gold); }
#areaSearchBtn .ic{ color: var(--pink); }
ul li > .ic:first-child{ color: var(--gold); }

/* 背景で打ち上がる花火（web/fireworks-bg.js）。文字の邪魔にならないよう少し薄く。
   1発ごとの濃淡は JS 側で付ける（淡い遠くの花火〜明るい大輪） */
.fw-bg{
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .8;
}