/* =====================================================
   有田地方 防災モニター v3 — SF指令室デザイン
   Arida Disaster Monitor — Cyber HUD Style
   ===================================================== */

/* ===== CSS Variables ===== */
:root {
    --bg-primary:      #000810;
    --bg-panel:        rgba(0, 8, 25, 0.92);
    --bg-panel-hover:  rgba(0, 18, 45, 0.96);

    --color-cyan:      #00f5ff;
    --color-cyan-dim:  rgba(0, 245, 255, 0.28);
    --color-cyan-glow: rgba(0, 245, 255, 0.12);
    --color-amber:     #ffb300;
    --color-amber-dim: rgba(255, 179, 0, 0.28);
    --color-red:       #ff2d55;
    --color-red-dim:   rgba(255, 45, 85, 0.28);
    --color-green:     #39ff14;
    --color-green-dim: rgba(57, 255, 20, 0.28);
    --color-blue:      #0066ff;

    --text-primary:    #dff4ff;
    --text-secondary:  rgba(223, 244, 255, 0.58);
    --text-muted:      rgba(223, 244, 255, 0.28);

    --border-panel:       1px solid rgba(0, 245, 255, 0.22);
    --shadow-panel:       0 0 20px rgba(0, 245, 255, 0.10), inset 0 0 20px rgba(0, 245, 255, 0.03);
    --shadow-panel-hover: 0 0 35px rgba(0, 245, 255, 0.22), inset 0 0 30px rgba(0, 245, 255, 0.06);

    --header-height: 60px;
    --gap:           6px;

    --font-display: 'Orbitron', 'Courier New', monospace;
    --font-body:    'Rajdhani', 'Meiryo', sans-serif;
    --font-mono:    'Share Tech Mono', 'Courier New', monospace;

    --transition-fast: 0.18s ease;
    --transition-med:  0.32s ease;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

/* ===== Background Overlays ===== */

/* スキャンラインエフェクト */
.scanline-overlay {
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.06) 3px,
        rgba(0, 0, 0, 0.06) 4px
    );
    pointer-events: none;
    z-index: 9999;
    /* v4: 全画面の常時アニメーション（毎フレーム再描画）はGPU負荷が高いため静的化 */
}

/* グリッドオーバーレイ */
.grid-overlay {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 245, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 245, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}

/* ビネットオーバーレイ */
.vignette-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 55%,
        rgba(0, 0, 8, 0.65) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* ===== ヘッダー ===== */
.hud-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    gap: 12px;
    background: linear-gradient(
        180deg,
        rgba(0, 10, 28, 0.98) 0%,
        rgba(0, 6, 18, 0.96) 100%
    );
    border-bottom: 1px solid var(--color-cyan-dim);
    box-shadow: 0 0 40px rgba(0, 245, 255, 0.08), 0 2px 24px rgba(0,0,0,0.6);
    z-index: 1000;
}

/* ヘッダー左 */
.header-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex-shrink: 0;
}

.system-badge {
    display: flex;
    align-items: center;
    gap: 5px;
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-green);
    box-shadow: 0 0 8px var(--color-green);
    flex-shrink: 0;
}

.badge-dot.pulse {
    animation: pulse-dot 2.2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1;   box-shadow: 0 0 8px var(--color-green); }
    50%       { opacity: 0.4; box-shadow: 0 0 3px var(--color-green); }
}

.badge-text {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--color-green);
    letter-spacing: 2.5px;
    text-shadow: 0 0 6px var(--color-green);
}

.site-title {
    font-family: var(--font-display);
    font-size: clamp(12px, 1.4vw, 17px);
    font-weight: 700;
    color: var(--color-cyan);
    text-shadow: 0 0 14px var(--color-cyan), 0 0 30px rgba(0, 245, 255, 0.4);
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subtitle {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 2px;
    white-space: nowrap;
}

/* ヘッダー中央（クロック） */
.header-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex: 1;
}

/* 防災掲示板へのリンク（掲示板側「戻る」ボタンと同デザイン） */
.board-link {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-cyan);
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.85;
    border: 1px solid var(--color-cyan-dim);
    border-radius: 3px;
    padding: 6px 10px;
    transition: background var(--transition-fast), opacity var(--transition-fast);
}
.board-link:hover {
    opacity: 1;
    background: rgba(0, 245, 255, 0.08);
    box-shadow: 0 0 10px rgba(0, 245, 255, 0.15);
}

.clock-display {
    text-align: center;
    position: relative;
}

.clock-time {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 900;
    color: var(--color-cyan);
    text-shadow: 0 0 16px var(--color-cyan);
    letter-spacing: 4px;
    line-height: 1;
}

.clock-date {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-secondary);
    letter-spacing: 2.5px;
    margin-top: 3px;
}

/* ヘッダー右 */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

.status-indicators {
    display: flex;
    gap: 14px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: background var(--transition-med), box-shadow var(--transition-med);
    flex-shrink: 0;
}

.status-item.online .status-dot {
    background: var(--color-green);
    box-shadow: 0 0 7px var(--color-green);
}

.status-item.error .status-dot {
    background: var(--color-red);
    box-shadow: 0 0 7px var(--color-red);
    animation: blink-error 0.9s ease-in-out infinite;
}

@keyframes blink-error {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}

.status-label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.auto-refresh {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--color-amber);
    text-shadow: 0 0 6px rgba(255, 179, 0, 0.4);
}

.refresh-icon {
    display: inline-block;
    animation: rotate-refresh 5s linear infinite;
}

@keyframes rotate-refresh {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ===== ダッシュボードグリッド ===== */
.dashboard-grid {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    /* 8パネル: 4列×2行。右列は上=AI解説 / 下=カメラ・防災リンク */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows:    repeat(2, 1fr);
    grid-template-areas:
        "wx     weather rss   ai"
        "river  quake   posts cameras";
    gap: var(--gap);
    padding: var(--gap);
    z-index: 1;
}

#panel-radar   { grid-area: wx; }
#panel-weather { grid-area: weather; }
#panel-rss     { grid-area: rss; }
#panel-river   { grid-area: river; }
#panel-quake   { grid-area: quake; }
#panel-posts   { grid-area: posts; }
#panel-cameras { grid-area: cameras; }
#panel-ai      { grid-area: ai; }

/* ===== パネル基本スタイル ===== */
.panel {
    background: var(--bg-panel);
    border: var(--border-panel);
    box-shadow: var(--shadow-panel);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: box-shadow var(--transition-med);
}

.panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.panel:hover {
    box-shadow: var(--shadow-panel-hover);
}

/* パネルヘッダー */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    background: linear-gradient(90deg, rgba(0, 245, 255, 0.07) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 245, 255, 0.14);
    position: relative;
    flex-shrink: 0;
    z-index: 1;
}

/* HUDコーナーマーカー */
.panel-corner {
    position: absolute;
    width: 9px;
    height: 9px;
    border-color: var(--color-cyan);
    border-style: solid;
    opacity: 0.7;
}

.panel-corner.tl { top: 0; left: 0;  border-width: 2px 0 0 2px; }
.panel-corner.tr { top: 0; right: 0; border-width: 2px 2px 0 0; }

.panel-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-cyan);
    letter-spacing: 0.8px;
    text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}

.panel-icon {
    font-size: 13px;
}

.panel-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    padding: 2px 7px;
    border: 1px solid var(--color-cyan-dim);
    color: var(--color-cyan);
    letter-spacing: 2px;
    background: rgba(0, 245, 255, 0.07);
    border-radius: 1px;
}

.panel-badge.blink {
    animation: badge-blink 2.5s ease-in-out infinite;
}

.panel-badge.live-badge {
    border-color: var(--color-red-dim);
    color: var(--color-red);
    background: rgba(255, 45, 85, 0.08);
    text-shadow: 0 0 6px rgba(255, 45, 85, 0.6);
    animation: badge-blink-red 1.4s ease-in-out infinite;
}

@keyframes badge-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

@keyframes badge-blink-red {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(255, 45, 85, 0.45); }
    50%       { opacity: 0.55; box-shadow: none; }
}

.panel-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 10px;
    border-top: 1px solid rgba(0, 245, 255, 0.09);
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    flex-shrink: 0;
    z-index: 1;
}

.panel-footer a {
    color: var(--color-cyan);
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.panel-footer a:hover { opacity: 1; }

/* パネル内 iframe 共通 */
.panel iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
    display: block;
}

/* ===== ローディングインジケーター ===== */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    min-height: 40px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
}

.loading-bar {
    width: 160px;
    height: 2px;
    background: rgba(0, 245, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loading-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--color-cyan), transparent);
    animation: loading-scan 1.4s ease-in-out infinite;
}

@keyframes loading-scan {
    0%   { transform: translateX(-150%); }
    100% { transform: translateX(300%); }
}

/* ===== フラッシュアニメーション（データ更新時） ===== */
@keyframes flash-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes data-flash {
    0%   { background: rgba(0, 245, 255, 0.18); }
    100% { background: transparent; }
}

.data-updated {
    animation: data-flash 0.6s ease;
}

/* ===== 天気パネル ===== */
.weather-body {
    overflow-y: auto;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-cyan-dim) transparent;
}

.weather-section {
    border: 1px solid rgba(0, 245, 255, 0.09);
    border-radius: 2px;
    padding: 6px 8px;
    background: rgba(0, 245, 255, 0.02);
}

.section-label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--color-cyan);
    letter-spacing: 2px;
    margin-bottom: 5px;
    opacity: 0.8;
}

/* 警報・注意報 */
.warning-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    margin-bottom: 3px;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    animation: flash-in 0.5s ease;
}

.warning-item.level-warning {
    background: rgba(255, 45, 85, 0.13);
    border-left: 3px solid var(--color-red);
    color: #ff8fa5;
    text-shadow: 0 0 8px rgba(255, 45, 85, 0.4);
}

.warning-item.level-advisory {
    background: rgba(255, 179, 0, 0.10);
    border-left: 3px solid var(--color-amber);
    color: #ffd060;
}

.warning-item.level-none {
    background: rgba(57, 255, 20, 0.06);
    border-left: 3px solid var(--color-green);
    color: rgba(57, 255, 20, 0.85);
    font-size: 11px;
    font-weight: 400;
}

/* 天気予報リスト */
.forecast-item {
    display: grid;
    grid-template-columns: 55px 1fr auto;
    gap: 6px;
    padding: 4px 2px;
    border-bottom: 1px solid rgba(0, 245, 255, 0.05);
    align-items: center;
    animation: flash-in 0.4s ease;
}

.forecast-item:last-child {
    border-bottom: none;
}

.forecast-date {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-amber);
}

.forecast-weather {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forecast-temp {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-cyan);
    white-space: nowrap;
}

/* 降水確率バー */
.rain-prob-item {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
}

.rain-prob-label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    width: 55px;
    flex-shrink: 0;
}

.rain-prob-bar-container {
    flex: 1;
    height: 5px;
    background: rgba(0, 245, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.rain-prob-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #0080ff, var(--color-cyan));
    width: 0;
    transition: width 1.2s ease;
}

.rain-prob-bar.medium { background: linear-gradient(90deg, var(--color-amber), #ffe070); }
.rain-prob-bar.high   { background: linear-gradient(90deg, #ff6600, var(--color-red)); }

.rain-prob-value {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-cyan);
    width: 30px;
    text-align: right;
    flex-shrink: 0;
}

/* ===== YouTubeパネル ===== */
.youtube-body {
    display: flex;
    flex-direction: column;
}

.channel-selector {
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(0, 245, 255, 0.09);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.channel-btn {
    padding: 3px 9px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.5px;
    background: transparent;
    border: 1px solid rgba(0, 245, 255, 0.18);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 1px;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.channel-btn:hover,
.channel-btn.active {
    background: rgba(0, 245, 255, 0.10);
    border-color: var(--color-cyan);
    color: var(--color-cyan);
    box-shadow: 0 0 8px rgba(0, 245, 255, 0.18);
    text-shadow: 0 0 8px rgba(0, 245, 255, 0.5);
}

.youtube-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
}

.youtube-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ===== 水位パネル ===== */
.river-body {
    display: flex;
    flex-direction: column;
}

.river-gauge-section {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(0, 245, 255, 0.09);
    flex-shrink: 0;
    min-height: 60px;
}

.river-iframe-section {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.river-iframe-section iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* iframeフォールバック */
.river-iframe-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 8, 25, 0.95);
}

.river-iframe-fallback.visible {
    display: flex;
}

.fallback-content {
    text-align: center;
    padding: 20px;
}

.fallback-icon {
    font-size: 32px;
    margin-bottom: 8px;
    animation: wave 2s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}

.fallback-title {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--color-cyan);
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.fallback-desc {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.fallback-link {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--color-cyan);
    color: var(--color-cyan);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    border-radius: 1px;
    transition: all var(--transition-fast);
    background: rgba(0, 245, 255, 0.07);
}

.fallback-link:hover {
    background: rgba(0, 245, 255, 0.18);
    box-shadow: 0 0 12px rgba(0, 245, 255, 0.3);
}

/* 水位ゲージ */
.gauge-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.gauge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.gauge-label {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-align: center;
}

.gauge-value {
    font-family: var(--font-display);
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: 700;
    color: var(--color-cyan);
    text-shadow: 0 0 10px var(--color-cyan);
    line-height: 1;
}

.gauge-value.warn  { color: var(--color-amber); text-shadow: 0 0 10px var(--color-amber); }
.gauge-value.alert { color: var(--color-red);   text-shadow: 0 0 10px var(--color-red);   }

.gauge-unit {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
}

/* 水位バー */
.level-bar-wrap {
    flex: 1;
    min-width: 60px;
}

.level-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.level-bar-labels span {
    font-family: var(--font-mono);
    font-size: 7px;
    color: var(--text-muted);
}

.level-bar-track {
    height: 8px;
    background: rgba(0, 245, 255, 0.07);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(0, 245, 255, 0.13);
    position: relative;
}

.level-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-green), var(--color-cyan));
    transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.level-bar-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: white;
    opacity: 0.5;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    animation: level-tip-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes level-tip-pulse {
    from { opacity: 0.35; }
    to   { opacity: 0.75; }
}

/* 危険度ラベル */
.danger-level {
    font-family: var(--font-mono);
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 1px;
    letter-spacing: 1px;
    text-align: center;
    flex-shrink: 0;
}

.danger-level.normal  { background: rgba(57, 255, 20, 0.12); border: 1px solid var(--color-green); color: var(--color-green); }
.danger-level.caution { background: rgba(255, 179, 0, 0.12); border: 1px solid var(--color-amber); color: var(--color-amber); }
.danger-level.danger  { background: rgba(255, 45, 85, 0.15); border: 1px solid var(--color-red);   color: var(--color-red); animation: blink-error 0.9s ease-in-out infinite; }

/* ===== RSSパネル ===== */
.rss-body {
    padding: 4px;
    overflow: hidden;
}

.rss-feed {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-cyan-dim) transparent;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rss-item {
    padding: 6px 8px;
    border: 1px solid rgba(0, 245, 255, 0.09);
    border-radius: 2px;
    background: rgba(0, 245, 255, 0.025);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    animation: flash-in 0.45s ease;
}

.rss-item:hover {
    background: rgba(0, 245, 255, 0.08);
    border-color: rgba(0, 245, 255, 0.28);
}

.rss-item.urgent {
    border-color: rgba(255, 45, 85, 0.35);
    background: rgba(255, 45, 85, 0.07);
    animation: flash-in 0.45s ease, urgent-pulse 3s ease-in-out infinite 0.5s;
}

@keyframes urgent-pulse {
    0%, 100% { border-color: rgba(255, 45, 85, 0.28); }
    50%       { border-color: rgba(255, 45, 85, 0.75); box-shadow: 0 0 10px rgba(255, 45, 85, 0.2); }
}

.rss-title {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
    line-height: 1.3;
}

.rss-item.urgent .rss-title {
    color: #ff8fa5;
    text-shadow: 0 0 6px rgba(255, 45, 85, 0.4);
}

.rss-meta {
    display: flex;
    gap: 7px;
    align-items: center;
}

.rss-source {
    font-family: var(--font-mono);
    font-size: 8px;
    padding: 1px 5px;
    border: 1px solid rgba(0, 245, 255, 0.2);
    color: var(--color-cyan);
    letter-spacing: 1px;
    border-radius: 1px;
}

.rss-date {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
}

.rss-ext-link {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--color-cyan) !important;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.rss-ext-link:hover { opacity: 1; }

/* ===== カメラ一覧パネル ===== */
.camera-body {
    padding: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-cyan-dim) transparent;
}

.camera-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.camera-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid rgba(0, 245, 255, 0.09);
    border-radius: 2px;
    background: rgba(0, 245, 255, 0.025);
    text-decoration: none;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    cursor: pointer;
}

.camera-item:hover {
    background: rgba(0, 245, 255, 0.10);
    border-color: var(--color-cyan-dim);
    box-shadow: 0 0 12px rgba(0, 245, 255, 0.14);
    transform: translateX(3px);
}

.cam-icon {
    font-size: 17px;
    flex-shrink: 0;
}

.cam-info {
    flex: 1;
    min-width: 0;
}

.cam-name {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cam-type {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-top: 1px;
}

.cam-link {
    font-size: 13px;
    color: var(--color-cyan);
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
}

.camera-item:hover .cam-link { opacity: 1; }

/* ===== 緊急アラートオーバーレイ ===== */
.alert-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 45, 85, 0.15);
    backdrop-filter: blur(5px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: alert-bg-pulse 2s ease-in-out infinite;
}

@keyframes alert-bg-pulse {
    0%, 100% { background: rgba(255, 45, 85, 0.12); }
    50%       { background: rgba(255, 45, 85, 0.28); }
}

.alert-content {
    background: rgba(8, 0, 0, 0.97);
    border: 2px solid var(--color-red);
    border-radius: 4px;
    padding: 36px 44px;
    text-align: center;
    box-shadow:
        0 0 60px rgba(255, 45, 85, 0.5),
        0 0 120px rgba(255, 45, 85, 0.25);
    max-width: 480px;
    width: 90%;
}

.alert-icon {
    font-size: 44px;
    animation: alert-icon-pulse 0.8s ease-in-out infinite;
}

@keyframes alert-icon-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.12); }
}

.alert-text {
    font-family: var(--font-display);
    font-size: clamp(13px, 2vw, 17px);
    color: var(--color-red);
    text-shadow: 0 0 18px var(--color-red);
    margin: 18px 0 22px;
    line-height: 1.6;
    white-space: pre-line;
}

.alert-content button {
    padding: 8px 24px;
    background: transparent;
    border: 1px solid var(--color-red);
    color: var(--color-red);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 3px;
    cursor: pointer;
    border-radius: 2px;
    transition: all var(--transition-fast);
}

.alert-content button:hover {
    background: rgba(255, 45, 85, 0.15);
    box-shadow: 0 0 14px rgba(255, 45, 85, 0.3);
}

/* ===== スクロールバー ===== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 245, 255, 0.25); border-radius: 2px; }

/* ===== レスポンシブ (タブレット) ===== */
@media (max-width: 1199px) and (min-width: 769px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        grid-template-areas: none;   /* 名前付きエリア解除→ソース順に自動配置 */
        grid-auto-rows: 340px;
        overflow-y: auto;
        position: relative;
        top: 0;
        height: auto;
    }
    /* デスクトップ用の grid-area 指定（ID詳細度）を全パネルで解除しソース順に自動配置 */
    #panel-radar, #panel-weather, #panel-rss, #panel-river,
    #panel-quake, #panel-posts, #panel-cameras, #panel-ai { grid-area: auto !important; }

    html, body {
        overflow: auto;
        height: auto;
    }

    .hud-header {
        position: sticky;
    }
}

/* ===== レスポンシブ (スマホ) ===== */
@media (max-width: 768px) {
    html, body {
        overflow: auto;
        height: auto;
    }

    .hud-header {
        position: sticky;
        height: auto;
        padding: 8px 10px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .header-center { order: -1; width: 100%; }
    .header-right  { display: none; }

    .clock-time { font-size: 22px; letter-spacing: 2px; }
    .site-title { font-size: 12px; }
    .subtitle   { display: none; }

    .dashboard-grid {
        position: relative;
        top: 0;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas: none;   /* 名前付きエリア解除→ソース順に1列で並べる */
        height: auto;
        overflow: visible;
    }
    /* デスクトップ用の grid-area 指定（ID詳細度）を全パネルで解除（重なり防止） */
    #panel-radar, #panel-weather, #panel-rss, #panel-river,
    #panel-quake, #panel-posts, #panel-cameras, #panel-ai { grid-area: auto !important; }

    .panel { height: 300px; }
    .panel-weather { height: 360px; }
    .panel-cameras { height: 340px; }
    .panel-radar { height: 340px; }
    .panel-river { height: 340px; }
    .panel-posts { height: 340px; }
}

/* =====================================================
   天気ビジュアルパネル (パネル1)
   ===================================================== */

.weather-visual-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 天気シーン（アニメーション背景）*/
.weather-scene {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #000d20 0%, #001535 100%);
    transition: background 2s ease;
    min-height: 0;
}

.weather-scene.scene-clear {
    background: linear-gradient(180deg, #001530 0%, #002855 45%, #001220 100%);
}

.weather-scene.scene-cloudy {
    background: linear-gradient(180deg, #000c18 0%, #001020 100%);
}

.weather-scene.scene-rainy {
    background: linear-gradient(180deg, #00060f 0%, #000c1c 100%);
}

.weather-scene.scene-stormy {
    background: linear-gradient(180deg, #030005 0%, #08000e 100%);
    animation: storm-bg-flash 8s ease-in-out infinite;
}

@keyframes storm-bg-flash {
    0%, 94%, 100% { background: linear-gradient(180deg, #030005 0%, #08000e 100%); }
    95%           { background: linear-gradient(180deg, #0d0020 0%, #180030 100%); }
}

/* 天気メインアイコン */
.weather-main-icon-wrap {
    font-size: clamp(42px, 5vw, 68px);
    position: relative;
    z-index: 2;
    animation: icon-float 6s ease-in-out infinite;
    text-shadow: 0 0 16px rgba(255, 230, 100, 0.4);
    user-select: none;
    line-height: 1;
}

@keyframes icon-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-7px) scale(1.04); }
}

/* パーティクルコンテナ */
.weather-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* 雨粒 */
.rain-drop {
    position: absolute;
    top: -20px;
    width: 1.5px;
    border-radius: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(140, 210, 255, 0.75) 100%);
    animation: rain-fall linear infinite;
}

@keyframes rain-fall {
    from { transform: translateY(0) skewX(-10deg); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    to   { transform: translateY(220px) skewX(-10deg); opacity: 0; }
}

/* 太陽光線 */
.sun-ray-container {
    position: absolute;
    width: 90px;
    height: 90px;
    animation: sun-rotate-slow 22s linear infinite;
    z-index: 1;
}

.sun-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 220, 80, 0.45) 100%);
    transform-origin: 0 50%;
    border-radius: 1px;
}

@keyframes sun-rotate-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 星ドット */
.star-dot {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(200, 230, 255, 0.7);
    animation: star-twinkle ease-in-out infinite;
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50%       { opacity: 0.2; transform: scale(0.6); }
}

/* 雲パーティクル */
.cloud-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180, 210, 240, 0.15) 0%, transparent 70%);
    animation: cloud-drift linear infinite;
}

@keyframes cloud-drift {
    from { transform: translateX(-100px); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    to   { transform: translateX(calc(100vw + 100px)); opacity: 0; }
}

/* 気温・天気情報セクション */
.weather-info-section {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    border-top: 1px solid rgba(0, 245, 255, 0.1);
    flex-shrink: 0;
    align-items: center;
}

.weather-temp-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-right: 10px;
    border-right: 1px solid rgba(0, 245, 255, 0.1);
    min-width: 54px;
}

.temp-value-large {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.8vw, 38px);
    font-weight: 900;
    color: var(--color-amber);
    text-shadow: 0 0 16px rgba(255, 179, 0, 0.6), 0 0 32px rgba(255, 179, 0, 0.3);
    line-height: 1;
    transition: color 1s ease, text-shadow 1s ease;
}

.temp-value-large.cold { color: #80d8ff; text-shadow: 0 0 16px rgba(128, 216, 255, 0.6); }
.temp-value-large.hot  { color: #ff6b35; text-shadow: 0 0 16px rgba(255, 107, 53, 0.6); }

.temp-unit-large {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.temp-label-sub {
    font-family: var(--font-mono);
    font-size: 7px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.weather-desc-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.weather-location {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 1.5px;
}

.weather-desc-text {
    font-family: var(--font-body);
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.weather-updated {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
    opacity: 0.7;
}

/* 3日間ミニ予報 */
.forecast-mini-row {
    display: flex;
    gap: 4px;
    padding: 5px 8px;
    border-top: 1px solid rgba(0, 245, 255, 0.08);
    flex-shrink: 0;
}

.forecast-mini-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
    border: 1px solid rgba(0, 245, 255, 0.08);
    border-radius: 2px;
    background: rgba(0, 245, 255, 0.022);
    transition: all var(--transition-fast);
    cursor: default;
}

.forecast-mini-card:hover {
    background: rgba(0, 245, 255, 0.08);
    border-color: rgba(0, 245, 255, 0.25);
}

.fmc-date {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--color-amber);
}

.fmc-icon {
    font-size: clamp(16px, 2vw, 22px);
    line-height: 1;
}

.fmc-temp {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--color-cyan);
    white-space: nowrap;
}

.fmc-weather {
    font-family: var(--font-body);
    font-size: 8px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* =====================================================
   アメダス気象グラフ (パネル4 下部)
   ===================================================== */

.amedas-section {
    flex: 1;
    display: flex;
    gap: 5px;
    padding: 7px;
    align-items: stretch;
    overflow: hidden;
    min-height: 0;
}

.amedas-widget {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    border: 1px solid rgba(0, 245, 255, 0.10);
    border-radius: 2px;
    background: rgba(0, 245, 255, 0.022);
    transition: all var(--transition-fast);
    overflow: hidden;
}

.amedas-widget:hover {
    background: rgba(0, 245, 255, 0.06);
    border-color: rgba(0, 245, 255, 0.22);
}

.amedas-widget-label {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 1px;
    flex-shrink: 0;
}

.amedas-widget-value {
    font-family: var(--font-display);
    font-size: clamp(12px, 1.4vw, 17px);
    font-weight: 700;
    color: var(--color-cyan);
    text-shadow: 0 0 10px var(--color-cyan);
    line-height: 1;
    flex-shrink: 0;
    transition: color 1s ease;
}

.amedas-widget-sub {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* --- 雨量チューブ --- */
.rain-tube-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    padding: 4px 0;
    min-height: 0;
    position: relative;
}

.rain-tube {
    width: 26px;
    height: 100%;
    max-height: 90px;
    min-height: 50px;
    border: 1.5px solid rgba(0, 150, 255, 0.45);
    border-top: none;
    border-radius: 0 0 5px 5px;
    background: rgba(0, 4, 16, 0.85);
    position: relative;
    overflow: hidden;
}

/* 光沢ライン */
.rain-tube::after {
    content: '';
    position: absolute;
    top: 0;
    left: 4px;
    width: 3px;
    bottom: 0;
    background: linear-gradient(180deg, rgba(150, 220, 255, 0.15), transparent);
    border-radius: 2px;
    pointer-events: none;
}

.rain-tube-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(0, 140, 255, 0.45), rgba(0, 60, 200, 0.9));
    transition: height 2s cubic-bezier(0.4, 0, 0.2, 1);
    animation: tube-shimmer 3.5s ease-in-out infinite;
}

.rain-tube-fill.raining {
    background: linear-gradient(180deg, rgba(0, 200, 255, 0.5), rgba(0, 80, 220, 0.95));
    animation: tube-shimmer 1.5s ease-in-out infinite;
}

.rain-tube-fill.heavy {
    background: linear-gradient(180deg, rgba(255, 100, 0, 0.5), rgba(200, 40, 0, 0.9));
}

@keyframes tube-shimmer {
    0%, 100% { opacity: 0.82; }
    50%       { opacity: 1; }
}

/* 水面波紋 */
.rain-tube-ripple {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        transparent, rgba(150, 230, 255, 0.5), transparent,
        rgba(150, 230, 255, 0.4), transparent);
    animation: tube-ripple 2.5s linear infinite;
    z-index: 1;
}

@keyframes tube-ripple {
    from { background-position: -60px 0; }
    to   { background-position: 60px 0; }
}

/* 目盛り */
.rain-tube-scale {
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.rts-mark {
    position: absolute;
    right: 0;
    font-family: var(--font-mono);
    font-size: 7px;
    color: rgba(0, 245, 255, 0.35);
    white-space: nowrap;
    transform: translateY(50%);
}

/* --- 風速ゲージ --- */
.wind-gauge-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2px 0;
    min-height: 0;
}

.wind-gauge-svg {
    width: 100%;
    max-width: 105px;
    height: auto;
    overflow: visible;
}

/* --- 気温計（温度計） --- */
.thermo-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    padding: 4px 0;
    min-height: 0;
    gap: 0;
}

.thermo-scale {
    position: absolute;
    right: calc(50% - 20px);
    top: 0;
    bottom: 20px;
    pointer-events: none;
}

.thermo-mark {
    position: absolute;
    right: 0;
    font-family: var(--font-mono);
    font-size: 7px;
    color: rgba(0, 245, 255, 0.32);
    white-space: nowrap;
    transform: translateY(50%);
    padding-right: 2px;
}

.thermo-body {
    width: 14px;
    max-height: 90px;
    min-height: 50px;
    height: 100%;
    border: 1.5px solid rgba(0, 245, 255, 0.3);
    border-bottom: none;
    border-radius: 7px 7px 0 0;
    background: rgba(0, 4, 16, 0.85);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.thermo-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(255, 140, 0, 0.55), rgba(255, 50, 0, 0.92));
    transition: height 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.thermo-fill.cold { background: linear-gradient(180deg, rgba(0, 180, 255, 0.5), rgba(0, 80, 200, 0.9)); }
.thermo-fill.hot  { background: linear-gradient(180deg, rgba(255, 60, 0, 0.55), rgba(200, 0, 0, 0.95)); }

.thermo-glow {
    position: absolute;
    bottom: 0;
    left: 2px;
    width: 3px;
    right: 2px;
    height: 0;
    background: rgba(255, 255, 255, 0.25);
    transition: height 2s ease;
    border-radius: 2px;
}

.thermo-bulb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 80, 0, 0.5);
    background: radial-gradient(circle at 35% 35%, rgba(255, 120, 0, 0.8), rgba(220, 40, 0, 0.95));
    box-shadow: 0 0 10px rgba(255, 80, 0, 0.5), inset 0 0 6px rgba(255, 200, 0, 0.3);
    flex-shrink: 0;
    transition: box-shadow 1s ease, background 1s ease;
}

.thermo-bulb.cold { background: radial-gradient(circle at 35% 35%, rgba(0, 180, 255, 0.8), rgba(0, 80, 200, 0.95)); box-shadow: 0 0 10px rgba(0, 150, 255, 0.5); border-color: rgba(0, 150, 255, 0.5); }
.thermo-bulb.hot  { background: radial-gradient(circle at 35% 35%, rgba(255, 60, 0, 0.9), rgba(180, 0, 0, 0.98)); box-shadow: 0 0 14px rgba(255, 60, 0, 0.65); }

/* =====================================================
   v4: YouTube パネル フッター（※現在は未使用・将来再導入時の参考）
   ===================================================== */

.youtube-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.35);
    border-top: 1px solid rgba(0, 245, 255, 0.09);
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.youtube-foot a {
    color: var(--color-cyan);
    opacity: 0.8;
    white-space: nowrap;
}
.youtube-foot a:hover { opacity: 1; }

/* =====================================================
   v4: 河川水位（実データ版）
   ===================================================== */

.river-body {
    overflow-y: auto;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-cyan-dim) transparent;
}

.river-station-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.river-station {
    border: 1px solid rgba(0, 245, 255, 0.12);
    border-left: 3px solid var(--color-green);
    border-radius: 2px;
    padding: 6px 8px;
    background: rgba(0, 245, 255, 0.025);
    animation: flash-in 0.4s ease;
}
.river-station.status-caution { border-left-color: var(--color-amber); background: rgba(255, 179, 0, 0.05); }
.river-station.status-danger  { border-left-color: var(--color-red);   background: rgba(255, 45, 85, 0.07); }

.river-station-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.river-station-name {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.rs-river {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.rs-point {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-secondary);
}

.river-current {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
}
.rc-val {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-cyan);
    text-shadow: 0 0 10px var(--color-cyan);
    line-height: 1;
}
.river-station.status-caution .rc-val { color: var(--color-amber); text-shadow: 0 0 10px var(--color-amber); }
.river-station.status-danger  .rc-val { color: var(--color-red);   text-shadow: 0 0 10px var(--color-red); }
.rc-unit { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }

.river-status-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 1px;
    letter-spacing: 1px;
    margin-left: 4px;
}
.river-status-badge.st-normal  { background: rgba(57, 255, 20, 0.12);  border: 1px solid var(--color-green); color: var(--color-green); }
.river-status-badge.st-caution { background: rgba(255, 179, 0, 0.12);  border: 1px solid var(--color-amber); color: var(--color-amber); }
.river-status-badge.st-danger  { background: rgba(255, 45, 85, 0.15);  border: 1px solid var(--color-red);   color: var(--color-red); animation: blink-error 0.9s ease-in-out infinite; }

.river-bar-track {
    position: relative;
    height: 7px;
    background: rgba(0, 245, 255, 0.08);
    border: 1px solid rgba(0, 245, 255, 0.12);
    border-radius: 4px;
    overflow: visible;
    margin-bottom: 5px;
}
.river-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-green), var(--color-cyan));
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.river-bar-fill.st-caution { background: linear-gradient(90deg, var(--color-amber), #ffe070); }
.river-bar-fill.st-danger  { background: linear-gradient(90deg, #ff6600, var(--color-red)); }

.river-mark {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 11px;
    transform: translateX(-1px);
}
.river-mark.mark-chui  { background: var(--color-amber); box-shadow: 0 0 4px var(--color-amber); }
.river-mark.mark-kiken { background: var(--color-red);   box-shadow: 0 0 4px var(--color-red); }

.river-station-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.river-th {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.river-graph-link {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--color-cyan);
    opacity: 0.75;
    white-space: nowrap;
}
.river-graph-link:hover { opacity: 1; }

.river-aridagawa-link {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 245, 255, 0.09);
    text-align: center;
}
.river-aridagawa-link a {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-cyan);
    opacity: 0.85;
}
.river-aridagawa-link a:hover { opacity: 1; text-shadow: 0 0 8px rgba(0, 245, 255, 0.5); }

/* 水位フォールバック（PHP無し時） */
.river-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    gap: 6px;
    padding: 16px;
}
.rf-icon { font-size: 30px; animation: wave 2s ease-in-out infinite; }
.rf-title { font-family: var(--font-display); font-size: 12px; color: var(--color-cyan); letter-spacing: 1px; }
.rf-desc  { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }
.river-fallback-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    width: 100%;
    max-width: 320px;
}

/* =====================================================
   v4: 現在の天気 / 雨雲レーダー（パネル1・軽量/地図なし）
   ===================================================== */

.weather-now-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-cyan-dim) transparent;
}

.weather-now-main {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid rgba(0, 245, 255, 0.10);
    border-radius: 2px;
    background: rgba(0, 245, 255, 0.025);
}

.weather-now-icon {
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1;
    flex-shrink: 0;
}

.weather-now-temp-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 10px;
    border-right: 1px solid rgba(0, 245, 255, 0.10);
    flex-shrink: 0;
}

.weather-now-temp-row {
    display: flex;
    align-items: baseline;
    gap: 1px;
}

.weather-now-temp {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 900;
    color: var(--color-amber);
    text-shadow: 0 0 14px rgba(255, 179, 0, 0.5);
    line-height: 1;
}
.weather-now-temp.cold { color: #80d8ff; text-shadow: 0 0 14px rgba(128, 216, 255, 0.5); }
.weather-now-temp.hot  { color: #ff6b35; text-shadow: 0 0 14px rgba(255, 107, 53, 0.5); }

.weather-now-unit { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.weather-now-label { font-family: var(--font-mono); font-size: 8px; color: var(--text-muted); letter-spacing: 0.5px; margin-top: 2px; }

.weather-now-desc-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.weather-now-loc { font-family: var(--font-mono); font-size: 8px; color: var(--text-muted); letter-spacing: 1.5px; }
.weather-now-desc {
    font-family: var(--font-body);
    font-size: clamp(12px, 1.3vw, 15px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.weather-now-updated { font-family: var(--font-mono); font-size: 8px; color: var(--text-muted); opacity: 0.7; }

/* 雨雲レーダー リンクボタン */
.radar-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
}
.radar-link-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--color-cyan-dim);
    border-radius: 2px;
    background: rgba(0, 245, 255, 0.05);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.radar-link-btn:hover {
    background: rgba(0, 245, 255, 0.12);
    box-shadow: 0 0 12px rgba(0, 245, 255, 0.18);
}
.rlb-icon { font-size: 16px; flex-shrink: 0; }
.rlb-text {
    flex: 1;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.rlb-arrow { color: var(--color-cyan); font-size: 13px; flex-shrink: 0; }

/* =====================================================
   v4: 地震・津波情報（パネル5）
   ===================================================== */

.quake-body {
    padding: 4px;
    overflow: hidden;
}
.quake-list {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-cyan-dim) transparent;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.quake-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border: 1px solid rgba(0, 245, 255, 0.09);
    border-radius: 2px;
    background: rgba(0, 245, 255, 0.025);
    flex-shrink: 0;
}
.quake-item.urgent {
    border-color: rgba(255, 45, 85, 0.4);
    background: rgba(255, 45, 85, 0.08);
}

.quake-scale {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.quake-scale.scale-low { background: #1c5c6b; }
.quake-scale.scale-3   { background: #1f7a8c; }
.quake-scale.scale-4   { background: #d6a300; color: #1a1a00; }
.quake-scale.scale-5   { background: #e07b00; }
.quake-scale.scale-6   { background: #d62246; }
.quake-scale.scale-7   { background: #8b0030; box-shadow: 0 0 10px rgba(255, 45, 85, 0.6); }

.quake-info { flex: 1; min-width: 0; }
.quake-place {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quake-item.urgent .quake-place { color: #ff8fa5; }
.quake-meta {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* =====================================================
   v4: GPU負荷軽減 — モーション低減設定の尊重
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* =====================================================
   v4: 現地からの投稿（パネル7・掲示板RSS）
   ===================================================== */

.post-badge {
    border-color: var(--color-green-dim) !important;
    color: var(--color-green) !important;
    background: rgba(57, 255, 20, 0.08) !important;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.post-badge:hover { background: rgba(57, 255, 20, 0.18) !important; }

.posts-body {
    padding: 4px;
    overflow: hidden;
}
.posts-feed {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-cyan-dim) transparent;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.post-item {
    display: flex;
    gap: 8px;
    padding: 5px 6px;
    border: 1px solid rgba(0, 245, 255, 0.09);
    border-radius: 2px;
    background: rgba(0, 245, 255, 0.025);
    flex-shrink: 0;
    animation: flash-in 0.4s ease;
}

.post-thumb {
    flex-shrink: 0;
    display: block;
}
.post-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--color-cyan-dim);
    background: #001020;
    display: block;
}

.post-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
.post-text {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.post-time {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
}
.posts-empty {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    padding: 20px 10px;
}

/* ============================================================
   AI防災解説パネル（v5-ai）
   ============================================================ */
.panel-ai {
    border-color: var(--color-cyan-dim);
}
.panel-ai .panel-body.ai-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* 猫丸が喋っている演出: 左にキャラ / 右に吹き出し */
.ai-stage {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    overflow: hidden;
}
.ai-character {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 84px;
    padding-top: 4px;
}
.ai-character-img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 0 6px var(--color-cyan-glow));
}
/* 画像未配置時のフォールバック（絵文字）。JSのonerrorで表示切替 */
.ai-character-fallback {
    display: none;            /* 既定は非表示。画像読込失敗時にflexへ */
    width: 76px;
    height: 76px;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    border-radius: 50%;
    background: rgba(0, 245, 255, 0.06);
    border: 1px solid var(--color-cyan-dim);
}
.ai-character-name {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-cyan);
    text-shadow: 0 0 6px var(--color-cyan-glow);
    letter-spacing: 1px;
}
/* 吹き出し本体（左向きの三角しっぽ付き） */
.ai-bubble {
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
    background: rgba(0, 245, 255, 0.05);
    border: 1px solid var(--color-cyan-dim);
    border-radius: 10px;
    padding: 12px 14px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-cyan-dim) transparent;
}
.ai-bubble::before,
.ai-bubble::after {
    content: '';
    position: absolute;
    top: 26px;
    right: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}
/* 枠線色の三角（外側） */
.ai-bubble::before {
    border-width: 9px 11px 9px 0;
    border-color: transparent var(--color-cyan-dim) transparent transparent;
}
/* 背景色の三角（内側・1px内側にずらして枠線を残す） */
.ai-bubble::after {
    margin-right: -1px;
    border-width: 8px 10px 8px 0;
    border-color: transparent rgba(0, 8, 25, 0.96) transparent transparent;
}
.ai-summary {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.9;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}
/* モードバッジ: 平常=シアン / 緊急=赤点滅 */
#ai-mode-badge.emergency {
    color: var(--color-red);
    border-color: var(--color-red-dim);
    background: rgba(255, 45, 85, 0.12);
    animation: pulse 1.2s ease-in-out infinite;
}
/* モバイル/タブレットでは縦積み（キャラ上・吹き出し下） */
@media (max-width: 1100px) {
    .ai-stage { flex-direction: column; align-items: center; }
    .ai-character { flex-direction: row; width: auto; gap: 8px; }
    .ai-bubble { width: 100%; }
    .ai-bubble::before, .ai-bubble::after {
        top: auto; right: auto; bottom: 100%; left: 30px;
    }
    .ai-bubble::before {
        border-width: 0 9px 11px 9px;
        border-color: transparent transparent var(--color-cyan-dim) transparent;
    }
    .ai-bubble::after {
        margin-right: 0; margin-bottom: -1px;
        border-width: 0 8px 10px 8px;
        border-color: transparent transparent rgba(0, 8, 25, 0.96) transparent;
    }
}