/* ---- Map Hint ---- */
#map{ position:relative; }

/* ==== 強制上書き: 完了(青)を最優先 ==== */
#map svg .completed,
#map svg .completed path,
#map svg .prefecture.completed path{
  fill:#2f7ef6 !important;
  stroke:#1b5fcc !important;
}
#map-hint{
  position:absolute; /* 地図の親を relative にしてあればOK */
  top:8px; right:8px; z-index:120; /* 地図より前面に */
  display:flex; align-items:center; gap:20px;
}
#map-hint img{
  width:52px; height:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
#map-hint .bubble{
  position:relative;
  --bubble-bg:#fff7cc; --bubble-border:#e1b100; /* 調整しやすいよう変数化 */
  background:var(--bubble-bg); border:2px solid var(--bubble-border); border-radius:12px; padding:.6rem .9rem; font-size:.85rem;
  box-shadow:0 3px 10px rgba(0,0,0,.12); line-height:1.4; max-width:180px; color:#333;
  overflow:visible;
}
/* 枠付き三角（外側の枠） */
#map-hint .bubble::before{
  content:""; position:absolute; left:-26px; top:50%; transform:translateY(-50%);
  border:12px solid transparent; border-right-color:var(--bubble-border);
}
/* 三角吹き出し（内側=吹き出し色） */
#map-hint .bubble::after{ /* 三角吹き出し（内側=吹き出し色） */
  content:""; position:absolute; left:-24px; top:50%; transform:translateY(-50%);
  border:11px solid transparent; border-right-color:var(--bubble-bg);
}
#hint-close{
  position:absolute; top:2px; right:4px; border:none; background:none;
  font-weight:700; font-size:.9rem; cursor:pointer; color:#999;
}
#hint-close:hover{color:#333;}
@media(max-width:500px){
  #map-hint{transform:scale(.85); transform-origin:top right;}
}

/* ---- Makami wiggle animation ---- */
@keyframes makami-wiggle{
  0%,100%{transform:rotate(0deg) translateY(0);} 
  20%    {transform:rotate(5deg) translateY(-2px);} 
  40%    {transform:rotate(-4deg) translateY(1px);} 
  60%    {transform:rotate(3deg) translateY(-1px);} 
  80%    {transform:rotate(-2deg) translateY(0);} 
}
#map-hint img{
  width:52px;height:auto;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
  animation:makami-wiggle 3s ease-in-out infinite;
  transform-origin:50% 80%; /* 足元を軸に揺らす */
}
@media (prefers-reduced-motion:reduce){
  #map-hint img{animation:none;}
}
/* リセット・基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

/* ヘッダー */
header .logo {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 1rem;
}
header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

header h1 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}

nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    transition: background-color 0.3s ease;
}

nav a:hover {
    background-color: rgba(255,255,255,0.2);
}

/* メインコンテンツ */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

section {
    margin-bottom: 3rem;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

section h2 {
    color: #667eea;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
}

/* ==== 熱血進捗バー (v1) ==== */
#progress{
  width:100%; max-width:600px; height:28px; margin:1.5rem auto;
  background:#f3f3f3; border-radius:14px; overflow:hidden;
  box-shadow:inset 0 0 4px rgba(0,0,0,.2);
}
#bar-inner{
  height:100%; width:0;
  background:linear-gradient(90deg,#e63946 0%,#f77f00 100%);
  position:relative; transition:width .8s ease-out;
}
#bar-inner::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.15) 0 10px,transparent 10px 20px);
  animation:shift 2s linear infinite;
}
@keyframes shift{ to{ transform:translateX(20px); } }
@media (prefers-reduced-motion:reduce){
  #bar-inner::after{ animation:none; }
}
#bar-label{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#fff; font-weight:700; letter-spacing:.5px;
}
/* 旧スタイルをコメントアウト
.bar { display:none; }
*/
.bar {
    width: 100%;
    height: 16px;
    background: #eee;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

#bar-inner {
    display: block;
    height: 100%;
    background: #e63946;
    border-radius: 8px 0 0 8px;
    transition: width 0.5s ease;
    width: 0%;
}

#ratio {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    color: #e63946;
}

/* タイムライン */
#timeline-list {
    list-style: none;
    position: relative;
}

#timeline-list::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #667eea;
}

#timeline-list li {
    position: relative;
    padding-left: 60px;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

#timeline-list li::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: #e63946;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 2px #667eea;
}

#timeline-list time {
    font-weight: bold;
    color: #667eea;
    display: block;
    margin-bottom: 0.25rem;
}

/* 地図コンテナ */
.map-container {
    text-align: center;
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
}

#japan-map {
    max-width: 100%;
    height: auto;
}

.castle-marker {
    cursor: pointer;
    transition: all 0.3s ease;
}

.castle-marker:hover {
    r: 12;
    stroke-width: 3;
}

.visited {
    fill: #e63946 !important;
    stroke: #c53030 !important;
}

/* ギャラリーグリッド */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.grid figure {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.grid figure:hover {
    transform: translateY(-5px);
}

.grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.grid figcaption {
    padding: 1rem;
    text-align: center;
    font-weight: bold;
    color: #667eea;
}

/* フッター */
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 3rem;
}

footer a {
    color: #667eea;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

#hero{
  background:#fffbe6;
  padding:2.5rem 1rem;
  text-align:center;
  border-bottom:2px solid #f0d44c;
}
#hero h1{font-size:1.6rem;line-height:1.3;margin-bottom:1rem;}
#hero .lead{font-size:1.1rem;margin-bottom:.8rem;font-weight:600;}
#hero .info{margin-bottom:1.2rem;}
#hero .cta{
  display:inline-block;background:#e63946;color:#fff;
  padding:.6rem 1.2rem;border-radius:6px;text-decoration:none;
  font-weight:700;transition:opacity .2s;
}
#hero .cta:hover{opacity:.85;}
#vote-countdown{margin-top:1rem;font-size:1rem;font-weight:bold;color:#e63946;}
@media(min-width:600px){
  #hero h1{font-size:2rem;}
  #hero .lead{font-size:1.25rem;}
}

/* 日本地図スタイル */
#map svg path { fill:#f3f3f3; stroke:#bbb; stroke-width:.5; transition:fill .3s; }
#map svg path.visited, #map svg .prefecture.visited path { fill:#e63946; }
#map svg path.completed, #map svg .prefecture.completed path { fill:#2f7ef6 !important; stroke:#1b5fcc !important; }

/* --- Prefecture coverage meter --- */
.pref-meter{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;
  align-items:center;background:#f8f9fb;border:1px solid #e7ecf2;border-radius:10px;
  padding:.6rem .9rem;margin:.6rem 0 1rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pref-meter__label{font-size:.9rem;color:#445;opacity:.8}
.pref-meter__stat{font-weight:700;color:#1d3557}
.pref-meter__stat .slash{opacity:.5;margin:0 .1rem}
.pref-meter__stat .rate{margin-left:.5rem;color:#0b7285}
.pref-meter__bar{grid-column:1/-1;height:8px;background:#e9eef3;border-radius:999px;overflow:hidden}
.pref-meter__bar #pref-bar{display:block;height:100%;background:linear-gradient(90deg,#ff6b6b,#f59f00);
  width:0%;transition:width .6s ease;border-radius:999px}
@media (max-width:480px){.pref-meter{transform:scale(.95);transform-origin:left top}}

/* ===== Shared Header (サイト共通) ===== */
.shared-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.shared-header .brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
}
.shared-header .brand a {
    color: #fff;
    text-decoration: none;
}
#menu-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: none; /* mobile only */
}
#main-nav {
    display: flex;
    gap: 1.2rem;
}
#main-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    transition: background 0.2s;
}
#main-nav a:hover {
    background: rgba(255,255,255,0.15);
}
@media (max-width: 768px) {
    #menu-btn {
        display: block;
    }
    #main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: #764ba2;
        display: none;
        padding: 0.5rem 0;
    }
    #main-nav.open {
        display: flex;
    }
    #main-nav a {
        padding: 0.8rem 1rem;
    }
}
#map svg path { fill:#f3f3f3; stroke:#bbb; stroke-width:.5; transition:fill .3s; }
#map svg path.visited, #map svg .prefecture.visited path { fill:#e63946; }

/* ふりがな（ruby） */
ruby rt {
    font-size: 0.65em;
}

/* ===== Endgame Countdown ===== */
#endgame .endgame-wrap{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
#endgame .endgame-counter{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;color:#d62828;letter-spacing:.02em;text-shadow:0 2px 8px rgba(214,40,40,.25);transition:transform .2s ease}
#endgame .endgame-counter.boom{animation:end-pulse .25s ease}
@keyframes end-pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
#endgame .endgame-sub{color:#555;font-weight:700}

.endgame-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.endgame-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;background:#fff;border:1px solid #eee;border-radius:10px;padding:10px 12px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.endgame-item .badge{background:#1d3557;color:#fff;font-weight:800;font-size:.85rem;padding:.25rem .5rem;border-radius:6px}
.endgame-item .tit{color:#222}
.endgame-item .loc{color:#666;font-size:.9rem}
.endgame-item.cleared{opacity:.5;text-decoration:line-through;position:relative}
.endgame-item.flash{animation:end-flash .8s ease}
@keyframes end-flash{0%{box-shadow:0 0 0 rgba(255,215,0,0)}30%{box-shadow:0 0 16px rgba(255,215,0,.9)}100%{box-shadow:0 0 0 rgba(255,215,0,0)}}
#endgame .confetti{text-align:center;font-size:1.2rem;margin-top:8px;color:#2f7ef6;font-weight:900}

/* タイムラインスクロールボックス */
.timeline-scrollbox{
    max-height: 300px;
    overflow-y: auto;
    padding-right: 0.5rem;
}
.timeline-scrollbox.expanded{
    max-height: none;
}

/* ゴーストボタン */
.btn-ghost{
    background: none;
    border: 2px solid #667eea;
    color: #667eea;
    padding: 0.4rem 1rem;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.2s,color 0.2s;
    margin-top: 1rem;
}
.btn-ghost:hover{
    background: #667eea;
    color: #fff;
}

/* TL;DR 代表画像のレスポンシブ調整 */
#tldr .tldr-thumb{
  max-width:50%;
  height:auto;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* ===== 城壁セグメント ===== */
#wall-progress{max-width:680px;margin:2rem auto;text-align:center;}
#wall-progress h2{color:#457b9d;margin-bottom:.5rem;}
#wall-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:0 auto;border:3px solid #ccc;border-radius:6px;padding:3px;background:#e5e5e5;}
.wall-block{
  position:relative;width:100%;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  border-radius:2px;background:#bbb;
  box-shadow:inset 0 0 2px rgba(0,0,0,.4);
  font-weight:700;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#fff;font-size:1.1rem;user-select:none;
}
.wall-block.filled{background:linear-gradient(135deg,#d62828 0%,#f77f00 50%,#fcbf49 100%);animation:glow 1.8s linear infinite;}
@keyframes glow{0%{filter:brightness(1);}50%{filter:brightness(1.25);}100%{filter:brightness(1);}}
.wall-block span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-align:center;line-height:1;}
#castle-finish{font-size:3rem;margin-top:.8rem;display:none;}
#wall-progress.complete #castle-finish{display:block;}
#wall-info{display:inline-block;margin-left:.5rem;font-weight:700;color:#e63946;}
.wall-block .emoji{font-size:2.5rem;line-height:1;filter:drop-shadow(0 0 4px rgba(255,140,0,.6));}
.wall-block .num{font-size:1.5rem;opacity:.9;}
@media(max-width:500px){
  .wall-block{font-size:1.2rem;}
  .wall-block .emoji{font-size:2rem;}
}

/* 2025-08-04 モバイル進捗幅縮小 */
@media (max-width:480px){
  #wall-progress{transform:scale(.9); transform-origin:top center;}
}


/* ==== 熱血進捗バー (v2) ==== */
#progress-wrap{max-width:680px;margin:2rem auto;text-align:center;font-weight:700;}
#progress-info{margin-bottom:.4rem;color:#e63946;font-size:1.1rem;}
#progress{width:100%;height:48px;background:#f1f1f1;border-radius:24px;overflow:hidden;box-shadow:inset 0 2px 5px rgba(0,0,0,.15);} 
#bar-inner{height:100%;width:0;background:linear-gradient(90deg,#d62828 0%,#f77f00 40%,#fcbf49 100%);background-size:200% 100%;animation:flame-move 3s linear infinite;position:relative;transition:width .9s ease-out;box-shadow:inset 0 0 8px rgba(255,90,0,.6);} 
#bar-flame{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.4rem;pointer-events:none;opacity:.8;animation:flame-blink 1s ease-in-out infinite alternate;} 
@keyframes flame-move{from{background-position:0 0;}to{background-position:-200% 0;}}
@keyframes flame-blink{from{opacity:.3;}to{opacity:.9;}}
@media (prefers-reduced-motion:reduce){#bar-inner{animation:none;}#bar-flame{animation:none;}}

/* ---------- HERO FLEX ---------- */
.hero-flex{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:2rem;background:#fff3e0;border-radius:12px;padding:1.5rem 2rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);margin-bottom:2rem;
}
.hero-text{flex:1 1 320px;min-width:280px}
.hero-text h1{font-size:1.6rem;color:#e63946;margin:0 0 .5rem}
.countdown{
  font-size:1.4rem;font-weight:700;margin:.2rem 0;color:#1d3557;
}
#days-left{font-size:2rem;color:#d62828}
.rank-badge{
  display:inline-block;margin:.5rem 0;padding:.3rem .8rem;
  background:#f77f00;color:#fff;border-radius:6px;font-weight:700;
}
.rank-badge .date{font-size:.9rem;opacity:.8}
.rank-badge .rank strong{font-size:1.4rem;}
.hero-desc{margin:1rem 0;font-size:1rem;line-height:1.6;color:#333}
.cta{display:inline-block;margin-top:.5rem;padding:.8rem 1.4rem;font-weight:700;
  color:#fff;background:#e63946;border-radius:6px;text-decoration:none}
.cta:hover{background:#d62828}
.hero-img{flex:0 0 260px;text-align:center}
.hero-img img{max-width:260px;width:100%;height:auto}
/* モバイル調整 */
@media(max-width:500px){.hero-img{order:-1;margin-bottom:1rem}}

/* 下向きアイコン点滅 */
.down-icon{
  display:inline-block;animation:blink 1s ease-in-out infinite;
  font-size: 2rem;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.2;}}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.5rem;
    }
    
    nav {
        gap: 1rem;
    }
    
    nav a {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
    
    main {
        padding: 1rem 0.5rem;
    }
    
    section {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.8rem;
    }
    
    #timeline-list li {
        padding-left: 50px;
    }
}