/* 発車標 — 駅のソラリー式反転フラップ。更新の瞬間がパタパタと駆ける */
:root {
  --board: #0e1013;
  --panel: #16191f;
  --flap: #1e222a;
  --flap-edge: #0a0c0f;
  --white: #f2f4f6;
  --amber: #ffb000;
  --green: #35d07f;
  --red: #ff4d5e;
  --dim: #7d8694;
  --font-board: "Noto Sans JP", sans-serif;
  --font-data: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100dvh;
  background:
    linear-gradient(180deg, #14171c 0%, var(--board) 30%),
    var(--board);
  color: var(--white);
  font-family: var(--font-board);
  display: flex;
  flex-direction: column;
}

.board-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px clamp(16px, 4vw, 44px);
  border-bottom: 3px solid var(--amber);
  background: #101318;
}

.back {
  color: var(--dim);
  text-decoration: none;
  font-size: 13px;
}

.back:hover { color: var(--white); }

.board-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.line-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--amber);
  color: #131313;
  font-weight: 900;
  font-size: 18px;
}

.board-head h1 {
  font-size: clamp(16px, 2.6vw, 22px);
  font-weight: 900;
  letter-spacing: 0.14em;
}

.clock {
  font-family: var(--font-data);
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 700;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.board {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  grid-template-areas: "overall arrivals" "departures arrivals";
  gap: clamp(14px, 2.5vw, 28px);
  padding: clamp(14px, 2.5vw, 28px) clamp(16px, 4vw, 44px);
  align-content: start;
}

.overall { grid-area: overall; }
.departures { grid-area: departures; }
.arrivals { grid-area: arrivals; }

.overall {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.overall-label {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.3em;
}

/* ---- フラップ ---- */
.flap-line {
  display: inline-flex;
  gap: 3px;
}

.flap-cell {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--cell-w, 1.5em);
  height: var(--cell-h, 2em);
  background: linear-gradient(180deg, var(--flap) 0%, #171a20 48%, #14171d 52%, var(--flap) 100%);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 2px 3px rgb(0 0 0 / 50%);
  font-weight: 900;
  overflow: hidden;
  perspective: 300px;
}

.flap-cell::after {
  /* 中央のヒンジ線 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--flap-edge);
}

.flap-cell .glyph {
  display: block;
  transform-origin: center;
}

.flap-cell.is-flipping .glyph {
  animation: flap 90ms linear;
}

@keyframes flap {
  0% { transform: rotateX(0deg); filter: brightness(1); }
  49% { transform: rotateX(-88deg); filter: brightness(0.55); }
  51% { transform: rotateX(88deg); filter: brightness(0.55); }
  100% { transform: rotateX(0deg); filter: brightness(1); }
}

.flap-xl {
  --cell-w: clamp(44px, 7vw, 76px);
  --cell-h: clamp(58px, 9vw, 100px);
  font-size: clamp(30px, 5vw, 54px);
  color: var(--tone-color, var(--green));
}

.flap-num {
  --cell-w: clamp(26px, 3.4vw, 40px);
  --cell-h: clamp(36px, 4.6vw, 54px);
  font-size: clamp(20px, 3vw, 30px);
  font-family: var(--font-data);
  color: var(--white);
}

.flap-sm {
  --cell-w: 1.25em;
  --cell-h: 1.7em;
  font-size: 15px;
}

.tally {
  display: flex;
  gap: clamp(14px, 3vw, 34px);
  flex-wrap: wrap;
}

.tally-item {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.tally-item label {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.2em;
}

.tally-item.is-hot .flap-num { color: var(--red); }

/* ---- 出発一覧 ---- */
.dep-row {
  display: grid;
  grid-template-columns: 72px minmax(120px, 0.8fr) minmax(90px, 0.6fr) minmax(0, 1.6fr) 84px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #23272f;
}

.dep-header {
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 0.25em;
  border-bottom: 2px solid #2c313b;
  padding-bottom: 8px;
}

.dep-row:not(.dep-header) {
  background: var(--panel);
  border-radius: 8px;
  border-bottom: 0;
  margin-top: 8px;
  transition: box-shadow 0.4s ease;
}

.dep-row.is-changed {
  box-shadow: 0 0 0 1px var(--amber);
}

.dep-status {
  display: inline-grid;
  place-items: center;
  padding: 5px 0;
  border-radius: 6px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.15em;
  background: var(--green);
  color: #08130d;
}

.dep-status[data-sev="warning"] { background: var(--amber); color: #191203; }
.dep-status[data-sev="danger"] { background: var(--red); color: #1c0507; animation: hot 1s steps(2) infinite; }

@keyframes hot { 50% { filter: brightness(0.6); } }

.dep-name {
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 17px);
}

.dep-state {
  color: var(--amber);
  font-weight: 700;
  font-size: 14px;
}

.dep-note {
  color: var(--white);
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dep-note small {
  color: var(--dim);
  margin-left: 8px;
}

.dep-fresh {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--dim);
  text-align: right;
}

.dep-fresh[data-freshness="live"] { color: var(--green); }
.dep-fresh[data-freshness="stale"],
.dep-fresh[data-freshness="degraded"] { color: var(--red); }

/* ---- 到着情報 ---- */
.arrivals {
  background: var(--panel);
  border-radius: 10px;
  padding: 16px 18px;
  align-self: start;
  max-height: calc(100dvh - 220px);
  display: grid;
  grid-template-rows: auto 1fr;
}

.arrivals h2 {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.2em;
  border-bottom: 2px solid var(--amber);
  padding-bottom: 8px;
}

.arrivals h2 small {
  color: var(--dim);
  font-weight: 500;
  font-size: 11px;
  margin-left: 8px;
  letter-spacing: 0.1em;
}

.arrivals ol {
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c313b transparent;
}

.arrival {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  padding: 10px 2px;
  border-bottom: 1px dashed #262b34;
  font-size: 13px;
}

.arrival.is-new { animation: slide-in 0.7s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes slide-in {
  from { transform: translateY(-10px); opacity: 0; background: rgb(255 176 0 / 12%); }
  to { transform: translateY(0); opacity: 1; }
}

.arrival .time {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--amber);
}

.arrival .msg { grid-column: 1 / -1; line-height: 1.5; }

.arrival .name { color: var(--dim); font-size: 11px; }

.arrival[data-tone="danger"] .time { color: var(--red); }

/* ---- ティッカー ---- */
.ticker-wrap {
  border-top: 3px solid var(--amber);
  background: #101318;
  overflow: hidden;
  padding: 10px 0;
}

.ticker {
  white-space: nowrap;
  display: inline-block;
  animation: ticker 36s linear infinite;
  color: var(--amber);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  padding-left: 100vw;
}

@keyframes ticker {
  to { transform: translateX(-100%); }
}

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

@media (max-width: 960px) {
  .board { grid-template-columns: 1fr; grid-template-areas: "overall" "departures" "arrivals"; }
  .arrivals { max-height: 380px; }
  .dep-row { grid-template-columns: 60px minmax(90px, 1fr) minmax(70px, 0.7fr) 70px; }
  .dep-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .flap-cell.is-flipping .glyph,
  .dep-status[data-sev="danger"],
  .ticker,
  .arrival.is-new { animation: none !important; }
}

/* ===== 駅の掲示板(詳細) ===== */
.mdet { padding: 6px clamp(16px, 4vw, 44px) 22px; display: grid; gap: 12px; }
.mdet-title { font-size: 15px; font-weight: 900; letter-spacing: 0.25em; border-left: 6px solid var(--amber); padding-left: 12px; }
.mdet-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mdet-tab {
  position: relative;
  border: 1px solid #2c313b; background: var(--panel); color: var(--dim);
  font-family: var(--font-board); font-weight: 700; font-size: 12.5px; letter-spacing: 0.2em;
  padding: 9px 18px; border-radius: 6px; cursor: pointer; transition: all 0.25s ease;
}
.mdet-tab:hover { color: var(--white); }
.mdet-tab.is-active { background: var(--amber); border-color: var(--amber); color: #191203; }
.mdet-tab[data-badge]:not([data-badge=""])::after {
  content: attr(data-badge);
  position: absolute; top: -7px; right: -5px; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; line-height: 17px; text-align: center;
}
.mdet-panel { display: grid; gap: 10px; max-width: 1100px; }
.mdet-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mdet-search {
  flex: 1 1 240px; background: var(--panel); border: 1px solid #2c313b; color: var(--white);
  border-radius: 6px; padding: 9px 14px; font-family: var(--font-board); font-size: 13px; outline: none;
}
.mdet-search:focus { border-color: var(--amber); }
.mdet-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.mdet-filter {
  border: 1px solid #2c313b; background: transparent; color: var(--dim);
  font-size: 11px; letter-spacing: 0.12em; border-radius: 6px; padding: 6px 12px; cursor: pointer; transition: all 0.2s ease;
}
.mdet-filter.is-active { border-color: var(--amber); color: var(--amber); }
.mdet-group { display: grid; gap: 6px; }
.mdet-group-title { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 900; letter-spacing: 0.25em; color: var(--amber); border-bottom: 1px solid #23272f; padding-bottom: 5px; }
.mdet-group-title small { color: var(--dim); font-family: var(--font-data); font-size: 10px; }
.mdet-check-list { display: grid; gap: 5px; }
.mdet-check {
  display: grid; grid-template-columns: 10px minmax(160px, 0.8fr) 90px minmax(0, 1.4fr);
  gap: 12px; align-items: center; background: var(--panel); border-radius: 6px; padding: 8px 12px;
}
.mdet-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--green); }
.mdet-check[data-status="error"] .mdet-dot { background: var(--red); animation: hot 1s steps(2) infinite; }
.mdet-check[data-status="warning"] .mdet-dot, .mdet-check[data-status="transient"] .mdet-dot { background: var(--amber); }
.mdet-check-name { display: grid; }
.mdet-check-name strong { font-size: 12.5px; }
.mdet-check-name span { font-size: 10.5px; color: var(--dim); }
.mdet-check-state { font-size: 11px; color: var(--amber); font-weight: 700; }
.mdet-check-summary { font-size: 11px; color: var(--dim); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mdet-event {
  display: grid; grid-template-columns: 78px 44px minmax(120px, 0.6fr) minmax(0, 1.6fr);
  gap: 10px; align-items: baseline; background: var(--panel); border-radius: 6px; padding: 8px 12px;
  border-left: 4px solid var(--green);
}
.mdet-event[data-tone="danger"] { border-left-color: var(--red); }
.mdet-event[data-tone="warning"] { border-left-color: var(--amber); }
.mdet-event-time { font-family: var(--font-data); font-size: 10.5px; color: var(--amber); }
.mdet-event-source { font-size: 9.5px; color: var(--dim); }
.mdet-event-name { font-size: 12px; font-weight: 700; }
.mdet-event-msg { font-size: 11.5px; color: var(--dim); }
.mdet-history-list { display: grid; gap: 5px; max-height: 54vh; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.mdet-more {
  justify-self: center; border: 1px solid #2c313b; background: var(--panel); color: var(--dim);
  border-radius: 6px; padding: 9px 24px; font-family: var(--font-board); font-weight: 700; font-size: 12px; letter-spacing: 0.15em; cursor: pointer;
}
.mdet-more:hover:not(:disabled) { color: var(--amber); border-color: var(--amber); }
.mdet-release-summary { font-size: 12px; color: var(--dim); }
.mdet-release, .mdet-backup {
  display: grid; gap: 4px 14px; align-items: baseline; background: var(--panel); border-radius: 6px; padding: 10px 14px;
  border-left: 4px solid var(--green);
}
.mdet-release { grid-template-columns: minmax(140px, 0.9fr) minmax(180px, 1fr) auto auto; }
.mdet-release[data-tone="warning"], .mdet-backup[data-tone="warning"] { border-left-color: var(--amber); }
.mdet-release[data-tone="danger"], .mdet-backup[data-tone="danger"] { border-left-color: var(--red); }
.mdet-release-name { font-size: 13px; font-weight: 700; }
.mdet-release-ver { font-family: var(--font-data); font-size: 11px; display: inline-flex; gap: 8px; color: var(--dim); }
.mdet-release-ver code:last-child { color: var(--amber); }
.mdet-release[data-tone="success"] .mdet-release-ver code:last-child { color: var(--green); }
.mdet-release-state { font-size: 11.5px; color: var(--white); }
.mdet-release-decision { font-size: 10.5px; color: var(--dim); }
.mdet-backup { grid-template-columns: minmax(150px, 1fr) auto auto auto; }
.mdet-backup-name { display: grid; }
.mdet-backup-name strong { font-family: var(--font-data); font-size: 12.5px; }
.mdet-backup-name small { font-size: 10px; color: var(--dim); }
.mdet-backup-gens, .mdet-backup-age { font-family: var(--font-data); font-size: 11px; color: var(--dim); }
.mdet-backup-state { font-size: 11.5px; color: var(--amber); font-weight: 700; }
.mdet-backup-problems { grid-column: 1 / -1; font-size: 11px; color: var(--red); }
.mdet-empty { color: var(--dim); font-size: 12.5px; padding: 8px 2px; }
@media (max-width: 720px) {
  .mdet-check { grid-template-columns: 10px 1fr auto; }
  .mdet-check-summary { grid-column: 2 / -1; }
  .mdet-event { grid-template-columns: 70px 1fr; }
  .mdet-event-msg { grid-column: 1 / -1; }
  .mdet-release { grid-template-columns: 1fr; }
  .mdet-backup { grid-template-columns: 1fr auto; }
}