@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap');

:root {
  color-scheme: dark;
  color: #e5e7eb;
  background-color: #050505;
}

body {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background-color: transparent;
}

.home body,
.front-page body,
.home,
.front-page {
  font-family: 'Orbitron', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.home h1, .home h2, .home h3, .home h4, .home h5, .home h6,
.front-page h1, .front-page h2, .front-page h3, .front-page h4, .front-page h5, .front-page h6 {
  font-family: 'Orbitron', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home .glow-text,
.front-page .glow-text {
  font-family: 'Orbitron', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.main-content {
  margin-top: 60px;
  height: calc(100vh - 60px);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px;
}


.weatherPanel {
  min-width: 250px;
  max-width: 100%;
  box-sizing: border-box;
  flex: 1;
  padding: 12px;
  max-height: 400px;
  color: #d7f6ff;
}

.weatherPanel p {
  margin: 8px 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #d7f6ff;
}

.weatherPanel button {
  color: #d7f6ff;
}

.glow {
  fill: #00ffe0;
  opacity: 0.8;
  r: 5;
  animation: pulse 1s ease-out forwards;
}

@keyframes pulse {
  0% {
    r: 5;
    opacity: 0.8;
  }

  100% {
    r: 20;
    opacity: 0;
  }
}



h2 {
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff;
  margin-bottom: 10px;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: auto;
  gap: 20px;
  padding: 20px;
}

.active,
.online {
  color: #00ffcc;
  font-weight: bold;
}

#event-log {
  list-style: none;
  padding-left: 0;
  max-height: 200px;
  overflow-y: auto;
}

@keyframes alertBlink {
  0% {
    box-shadow: 0 0 10px red;
  }

  50% {
    box-shadow: 0 0 20px red;
  }

  100% {
    box-shadow: 0 0 10px red;
  }
}

.radar-alert {
  animation: alertBlink 1s infinite;
  border-color: red;
}

@keyframes blinkTarget {
  0% {
    fill: red;
  }

  50% {
    fill: yellow;
  }

  100% {
    fill: red;
  }
}

.blinking {
  animation: blinkTarget 0.5s infinite;
}

@keyframes rotateRadar {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#scan-line-group {
  transform-origin: 100px 100px;
  animation: rotateRadar 2s linear infinite;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 10px #00ffff;
  }

  50% {
    box-shadow: 0 0 20px #00ffff;
  }

  100% {
    box-shadow: 0 0 10px #00ffff;
  }
}

.active {
  animation: pulseGlow 1.5s infinite;
  color: #00ffff;
}

.threat-matrix-panel {
  padding: 20px;
  min-width: 250px;
  min-height: 300px;
  max-height: 400px;
}

#threat-list {
  list-style: none;
  padding: 0;
}

#threat-list li {
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #cceeff;
}

.low {
  color: #00ffcc;
}

.medium {
  color: #ffff66;
}

.high {
  color: #ff3b3b;
  font-weight: bold;
}

.home .metrics-panel,
.front-page .metrics-panel {
  flex: 1;
  color: #0ff;
  font-family: 'Orbitron', sans-serif;
  min-width: 180px;
  max-height: 400px;
}

.status-panel {
  background-image: url('../img/cyber-tag.svg'); /* ← SVGファイル名をここに */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-width: 350px;
  height: auto;
}

.gauge {
  margin-bottom: 15px;
}

.gauge label {
  display: block;
  font-size: 0.7em;
  margin-bottom: 5px;
  color: #00ffff;
  text-shadow: 0 0 3px #00ffff;
}

.bar {
  background: rgba(0,0,0,0);
  height: 10px;
  width: 100%;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.fill {
  background: linear-gradient(to right, rgba(0, 0, 0,0), rgb(0, 225, 255));
  height: 100%;
  transition: width 0.5s ease;
}

.gauge span {
  float: right;
  font-size: 0.8em;
  margin-top: 5px;
  color: #cceeff;
}

.radar-panel {
  flex: 0 0 220px;
  text-align: center;
  min-width: 250px;
  max-width: 300px;
  min-height: 400px;
  margin: 20px;
}

/* グリッド密度別スタイル */
.grid-fine {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

.grid-medium {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

.grid-coarse {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}



@keyframes moveLight {
  0% {
    transform: translate(0px, 0px);
  }

  25% {
    transform: translate(300px, 100px);
  }

  50% {
    transform: translate(150px, 250px);
  }

  75% {
    transform: translate(400px, 50px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}



.dashboard-grid {
  display: grid;
  grid-template-areas:
    "metrics map radar"
    "status traffic threat"
    "status log threat";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px;
  padding: 20px;
}

.panel {
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid #00ffff33;
  padding: 16px;
  position: relative;
}

/* グリッド密度 */
.grid-fine {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 20px 20px;
}

.grid-medium {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

.grid-coarse {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

.map-panel {
  grid-area: map;
  padding: 16px;
  min-width: 350px;
  min-height: 400px;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

section {
  position: relative;
  overflow: hidden;
}

#world-map-section {
  text-align: center;
  margin-top: 10px;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.home .map-controls button,
.front-page .map-controls button {
  background-color: rgba(0, 60, 100, 0.6);
  color: #00f0ff;
  padding: 8px 16px;
  margin: 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  cursor: pointer;
  clip-path: polygon(
    10px 0,                      /* 左上 */
    calc(100% - 10px) 0,         /* 右上 */
    100% 10px,                   /* 右上角の内側 */
    100% calc(100% - 10px),      /* 右下角の内側 */
    calc(100% - 10px) 100%,      /* 右下 */
    10px 100%,                   /* 左下 */
    0 calc(100% - 10px),         /* 左下角の内側 */
    0 10px                       /* 左上角の内側 */
  );
  border: 1px solid rgba(0, 0, 0,0)
}

.map-controls button:hover {
  background-color: rgba(0, 100, 150, 0.8);
}

/* スキャンラインオーバーレイ */
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.map-container::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
  background: repeating-linear-gradient(to bottom,
      rgba(0, 255, 255, 0.25) 0px,
      rgba(0, 255, 255, 0.25) 2px,
      transparent 4px,
      transparent 8px);
  animation: scanMove 20s linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes scanMove {
  0% {
    top: -100%;
  }

  100% {
    top: 0%;
  }
}

#world-map-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: none;
  border: none;
}

.glow-text {
  color: #00ffff;
  /* 好きな色に変更可能 */
  text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 20px #00ffff;
}

.glow-red {
  color: #ff4444;
  text-shadow: 0 0 5px #ff4444, 0 0 10px #ff4444, 0 0 20px #ff0000;
}

.worldmap-section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.worldmap-section .map-wrapper {
  width: 100%;
  height: 100%;
  max-width: 1000px;
  min-width: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.worldmap-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mica-fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}


.mica-header-form {
  display: flex;
  gap: 8px;
}

.mica-header-form input,
.mica-header-form button {
  all: unset;
  padding: 6px 40px;
  min-height: 36px;
  /* ← 高さをしっかり確保 */
  background-color: #111;
  color: #00ffff;
  border: 1px solid #00ffff66;
  border-radius: 4px;
  font-size: 0.9em;
  line-height: 1.2;
  /* ← 高さ調整で文字が収まりやすくなる */
  white-space: nowrap;
  /* ← 改行防止 */
  box-sizing: border-box;
  width: 100%;
  flex: 1;
}

.mica-fixed-header button {
  all: unset;
  padding: 8px 16px;
  background-color: #111;
  color: #00ffff;
  border: 1px solid #00ffff66;
  border-radius: 4px;
  font-size: 0.95em;
  line-height: 1.4;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
}

.mica-header-form button:hover {
  background-color: #00ffff22;
  box-shadow: 0 0 8px #00ffff88;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.mica-fixed-section {
  display: flex;
  flex-wrap: nowrap;
  /* ← 折り返しを禁止！ */
  padding: 8px 16px;
  overflow: hidden;
  /* はみ出し防止（必要に応じて） */
  align-items: center;
}

.mica-fixed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.85);
  color: #00ffff;
  z-index: 9999;
}

.mica-left,
.mica-right {
  display: flex;
  flex-wrap: nowrap;
  padding: 0px 5px;
  gap: 8px;
}

.map-container img {
  width: 100%;
  height: auto;
}

.auto-button {
  color: #161616;
  background-color: rgba(1, 76, 138, 0.76);
  border: 1px solid rgb(0, 225, 255);
  border-radius: 4px;
  padding: 8px;
}

.auto-button-2 {
  background-color: rgba(1, 76, 138, 0.76);
  border: 1px solid rgb(0, 225, 255);
  border-radius: 4px;
  padding: 8px;
}

.buttonlyaut {
  background-color: rgba(0, 0, 0, 0);
  border: solid 1px rgba(0, 0, 0, 0)
}

#cyberGaugeHUD {
  width: 180px;
  height: 180px;
}

.bg {
  stroke: transparent;
  fill: none;
}

.fg1,
.fg2,
.fg3 {
  stroke: #00ffe0;
  fill: none;
  filter: url(#neonGlow);
  transition: stroke-dashoffset 0.8s ease-out;
}

.fg1 {
  stroke-width: 4;
}

.fg2 {
  stroke-width: 8;
}

.fg3 {
  stroke-width: 4;
}

.layer {
  transform-origin: 90px 90px;
}

.layer1 {
  animation: rotateClockwise 10s linear infinite;
}

.layer2 {
  animation: rotateCounter 20s linear infinite;
}

.layer3 {
  animation: rotateClockwise 30s linear infinite;
}

@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateCounter {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

.img-change {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.img-change img {
  width: 50px;
  height: auto;
}

.img-change-2 {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.img-change-2 img {
  width: 50px;
  height: auto;
}

.ghost-button {
  width: 41px; /* サイズはお好みで */
  height: 41px;
  background: transparent;
  border-radius: 6px;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  padding: 0;
}

.ghost-button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.tyuuouyose{
  text-align: center;
}

.tyuuouyose.glow-text {
  font-size: 1.7rem;
  line-height: 1.2;
}

.log-panel{
  min-width: 300px;
  max-height: 400px;
}

.grid.gap-8 > article {
  background: rgba(8, 15, 25, 0.164);
  border: 1px solid rgba(6, 182, 212, 0.18);
  box-shadow: 0 0 35px rgba(0, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.grid.gap-8 > article:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 255, 255, 0.18);
  border-color: rgba(0, 255, 255, 0.35);
}

.grid.gap-8 > article::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08), transparent 40%, rgba(0, 255, 255, 0.04));
}

.grid.gap-8 > article .w-full.md\:w-48.h-32 {
  background: rgba(4, 10, 18, 0.85);
  border: 1px solid rgba(6, 182, 212, 0.12);
}

.grid.gap-8 > article .text-\[10px\] {
  letter-spacing: 0.22em;
  color: #7ce7ff;
}

.grid.gap-8 > article h3 {
  color: #a5f3fc;
  text-shadow: 0 0 18px rgba(0, 255, 255, 0.16);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.grid.gap-8 > article .text-sm {
  color: #cdefff;
}

.grid.gap-8 > article .hud-border {
  border-color: rgba(0, 255, 255, 0.12);
  box-shadow: inset 0 0 22px rgba(0, 255, 255, 0.08);
}

.grid.gap-8 > article a {
  position: relative;
  z-index: 1;
}

.grid.gap-8 > article {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  min-height: 120px;
}

.grid.gap-8 > article .post-thumbnail {
  flex: 0 0 180px;
  max-width: 180px;
  height: 100px;
  overflow: hidden;
  border-radius: 12px;
}

.grid.gap-8 > article .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid.gap-8 > article .entry-header {
  margin-bottom: 0;
}

.grid.gap-8 > article .entry-title {
  font-size: 1.05rem;
  margin-top: 0.25rem;
}

.grid.gap-8 > article .entry-summary {
  margin-top: 0.75rem;
  max-width: calc(100% - 180px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  text-overflow: ellipsis;
}

@media (max-width: 860px) {
  .grid.gap-8 > article {
    flex-direction: column;
    min-height: auto;
  }

  .grid.gap-8 > article .post-thumbnail {
    width: 100%;
    max-width: 100%;
    height: 180px;
  }
}

canvas {
  display: block;
  max-width: 600px;
  width: 100%;
  height: auto;
  margin: 20px auto;
}

.traffic-panel {
  padding: 20px;
  background-color: transparent;
  margin-bottom: 40px;
  min-width: 350px;
  display: flex;
  flex-direction: column;
}

.text-layout-1 {
  padding-left: 20px;
}

.tizu {
  max-height: none;
  min-width: 350px;
}

#mapsection {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  overflow: visible;
  gap: 16px;
}

#mapsection svg {
  width: 100%;
  min-height: 320px;
  height: auto;
}

@keyframes warp {
  0% {
    filter: grayscale(1) brightness(0.5);
    transform: scale(0.1, 0.1);
    opacity: 0;
  }
  10% {
    filter: contrast(2) brightness(1.5) blur(2px);
    transform: scale(1.5, 0.3);
    opacity: 1;
  }
  20% {
    filter: hue-rotate(45deg) contrast(1.2);
    transform: scale(0.3, 1.5);
  }
  30% {
    filter: none;
    transform: scale(1.05, 0.95);
  }
  40% {
    filter: blur(1px);
    transform: scale(0.95, 1.05);
  }
  50% {
    filter: none;
    transform: scale(1, 1);
  }
  100% {
    filter: none;
    transform: scale(1, 1);
    opacity: 1;
  }
}

.warp-effect {
  animation: warp 1.5s ease-in-out;
}

.status-text {
  height: auto;
}

.menntori {
  clip-path: polygon(
    10px 0,                      /* 左上 */
    calc(100% - 10px) 0,         /* 右上 */
    100% 10px,                   /* 右上角の内側 */
    100% calc(100% - 10px),      /* 右下角の内側 */
    calc(100% - 10px) 100%,      /* 右下 */
    10px 100%,                   /* 左下 */
    0 calc(100% - 10px),         /* 左下角の内側 */
    0 10px                       /* 左上角の内側 */
  );
}

.neon-textured {
  display: block;      /* inline-block から変更 */
    width: 100%;        /* 横幅をいっぱいまで広げる */
    text-align: center;  /* 広がった幅の中で、文字を中央に寄せる */

  /* 1. 全体的に明度を落としたグラデーション */
  background: linear-gradient(
    110deg,
    #a0e2e6 0%,    /* 最も明るい部分も「白」ではなく「淡い水色」に */
    #00aeb8 15%,   /* メインの色を暗めに */
    #003a3d 35%,   /* 影の部分をより深く（背景に馴染むよう） */
    #00aeb8 50%,
    #82d5db 60%,   /* セカンドハイライト */
    #004e53 85%,
    #00aeb8 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* 2. 外光（グロー）をより控えめに、かつ深く */
  /* ぼかし距離を抑え、ボヤけすぎないように調整 */
  filter: drop-shadow(0 0 1px rgba(0, 174, 184, 0.5))
          drop-shadow(0 0 4px rgba(0, 174, 184, 0.2));

  animation: 
    neon-pulse 40s linear infinite, 
    neon-flicker 6s infinite; /* 少し周期を伸ばして落ち着かせる */
}

/* 質感のゆらぎ（40秒かけて一周） */
@keyframes neon-pulse {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* 不規則な点滅（さらに控えめな明滅） */
@keyframes neon-flicker {
  0%, 70%, 72%, 75%, 77%, 82%, 91%, 94%, 100% {
    opacity: 0.9; /* 通常時も100%ではなく、少し透かすことで背景と馴染ませる */
  }
  71%, 76%, 80%, 93% {
    opacity: 0.5;
    filter: brightness(80%);
  }
  73%, 81% {
    opacity: 0.3;
    filter: brightness(110%);
  }
}

.neon-metrics {
  display: block;      /* inline-block から変更 */
    width: 100%;        /* 横幅をいっぱいまで広げる */
    text-align: center;  /* 広がった幅の中で、文字を中央に寄せる */
    font-size: 1.7rem;
  /* 質感：Scannerより少し「硬い」色味に変更 */
  background: linear-gradient(
    110deg,
    #98e5e9 0%,    /* 少しだけ白に近い */
    #0097a1 20%,
    #002426 40%,   /* 影を鋭く */
    #0097a1 60%,
    #bffffc 75%,
    #003d40 90%,
    #0097a1 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* アニメーション：呼吸(pulse) と 鋭い点滅(double-flicker) */
  animation: 
    metrics-pulse 10s ease-in-out infinite, 
    metrics-double-flicker 7s infinite;
}

/* 呼吸のような緩やかな明暗変化 */
@keyframes metrics-pulse {
  0%, 100% { filter: brightness(100%) drop-shadow(0 0 2px rgba(0, 151, 161, 0.4)); }
  50% { filter: brightness(80%) drop-shadow(0 0 1px rgba(0, 151, 161, 0.2)); }
}

/* 鋭い「パチッ、パチッ」という二連点滅 */
@keyframes metrics-double-flicker {
  0%, 80%, 83%, 86%, 100% { opacity: 1; }
  81%, 84% { opacity: 0.4; filter: contrast(150%); } /* 1回目の瞬き */
  82%, 85% { opacity: 1; }                          /* 復帰 */
}