:root {
  --bg: #070604;
  --panel: #11100c;
  --panel-2: #18150f;
  --line: #4a3820;
  --line-soft: #2b2418;

  --text: #f3ead7;
  --muted: #a99a7a;

  --accent: #ff9f1c;
  --accent-soft: #c8872f;
  --amber: #ffb13b;
  --amber-deep: #8a4f13;

  --rain: #5cc8ff;
  --danger: #ff5c5c;
}

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

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050403;
  color: var(--text);
  font-family: "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* 外枠：16:9の看板を中央に置く */
.screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 160, 40, 0.08), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(80, 50, 20, 0.18), transparent 35%),
    linear-gradient(180deg, #080705 0%, #050403 100%);
}

/* 中身：16:9固定レイアウト */
.layout {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 30% 70%;

  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
    var(--bg);
  background-size: 18px 18px, 18px 18px, auto;
}

/* =====================
   CLOCK
===================== */

.clock-panel {
  grid-column: 1 / 2;
  grid-row: 1 / 3;

  border-right: none /*1px solid var(--line)*/;
  padding: 56px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  transform: translateY(-40px);

  background:
    radial-gradient(circle at 50% 40%, rgba(255, 130, 20, 0.10), transparent 34%),
    linear-gradient(180deg, #100d08 0%, #070604 100%);

  box-shadow: inset -18px 0 40px rgba(0, 0, 0, 0.35);
}

.section-label {
  font-size: 20px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.time-wrap {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.time {
  font-size: clamp(120px, 13vw, 210px);
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.045em;
}

.nixie-time {
  color: var(--accent);
  text-shadow:
    0 0 4px rgba(255, 174, 66, 0.95),
    0 0 14px rgba(255, 122, 20, 0.72),
    0 0 34px rgba(255, 92, 0, 0.42),
    0 0 72px rgba(255, 92, 0, 0.22);
}

.seconds {
  font-size: 34px;
  color: var(--amber);
  opacity: 0.95;
  font-weight: 500;
}

.nixie-seconds {
  text-shadow:
    0 0 4px rgba(255, 174, 66, 0.8),
    0 0 16px rgba(255, 92, 0, 0.35);
}

.date {
  margin-top: 18px;
  font-size: clamp(24px, 1.8vw, 34px);
  color: var(--muted);
  letter-spacing: 0.03em;
}

/* ===== Weather ===== */

.weather-panel {
  position: relative;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  border-bottom: none;
  padding: 32px;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 38%, rgba(255, 177, 59, 0.10), transparent 32%),
    radial-gradient(circle at 82% 44%, rgba(92, 200, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #17120b 0%, #0d0b08 100%);
  box-shadow:
    inset 0 -10px 24px rgba(0, 0, 0, 0.10);
}

.weather-wrap {
  height: calc(100% - 44px);
  position: relative;
  display: block;
}

.weather-left {
  height: 100%;
  padding-right: 190px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;

  transform: translateY(-4px);
}

.weather-rain {
  font-size: 24px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.03em;
  text-shadow:
    0 0 8px rgba(255, 160, 40, 0.35),
    0 0 22px rgba(255, 120, 20, 0.20);
}

/* 2つの forecast-line を横並びグループとして扱う */
.forecast-lines {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  margin-top: 14px;
}

/* main/sub という2段を解除して、横一列の部品群にする */
.forecast-line {
  display: contents;
}

/* 大きめ丸チップ */
.forecast-chip {
  --prob: 0;
  --angle: 0deg;

  width: 82px;
  height: 82px;
  border-radius: 999px;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  position: relative;
  border: none/*1px solid rgba(255, 177, 59, 0.35)*/;

  background:
    conic-gradient(
      from -90deg,
      #ff9f1c 0deg var(--angle),
      rgba(255, 177, 59, 0.1) var(--angle) 360deg
    );

  box-shadow:
    0 0 10px rgba(255, 160, 40, 0.40),
    0 0 24px rgba(255, 100, 20, 0.40);
}

.forecast-chip::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 28%, rgba(255, 190, 80, 0.08), transparent 45%),
    rgba(0, 0, 0, 0.78);

  box-shadow:
    inset 0 0 10px rgba(255, 170, 50, 0.08),
    inset 0 -6px 14px rgba(0, 0, 0, 0.38);
}

.forecast-chip-inner {
  position: relative;
  z-index: 1;

  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  line-height: 1;
}

.forecast-chip b {
  font-size: 16px;
  color: var(--text);
  font-weight: 800;
}

.forecast-chip small {
  margin-top: 8px;
  font-size: 18px;
  color: var(--amber);
  font-weight: 800;
}

/* 後半時間は少し控えめ。でも消えすぎない */
.forecast-line-sub .forecast-chip {
  opacity: 0.84;
}

/* 気温は右側に固定 */
.temp-box {
  position: absolute;
  right: 28px;
  top: 54px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;

  min-width: 150px;
}

.temp-high {
  font-size: 64px;
  line-height: 0.95;
  font-weight: 800;
  color: var(--accent);
  text-shadow:
    0 0 8px rgba(255, 160, 40, 0.38),
    0 0 22px rgba(255, 90, 0, 0.18);
}

.temp-low {
  font-size: 40px;
  line-height: 1;
  color: var(--rain);
  font-weight: 700;
  text-shadow:
    0 0 8px rgba(92, 200, 255, 0.24);
}

/* =====================
   TRAIN
===================== */

.train-panel {
  grid-column: 2 / 3;
  grid-row: 2 / 3;

  padding: 24px 32px;

  background:
    linear-gradient(180deg, rgba(255, 180, 70, 0.020), rgba(0, 0, 0, 0.10)),
    #100d09;

  box-shadow:
    inset 0 18px 28px rgba(0, 0, 0, 0.18);
}

.train-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 18px;

  color: var(--muted);
  font-size: 18px;
  letter-spacing: 0.08em;
}

.train-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.train-row {
  display: grid;
  grid-template-columns: 110px 1fr 120px;
  gap: 16px;
  align-items: center;

  padding: 14px 18px;

  border: none;
  border-radius: 14px;

  background:
    linear-gradient(180deg, rgba(255, 177, 59, 0.055), rgba(255, 177, 59, 0.012)),
    rgba(255, 255, 255, 0.025);

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
}

.train-time {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
}

.train-dest {
  min-width: 0;
}

.train-dest-main {
  font-size: 27px;
  font-weight: 700;
  color: var(--text);
}

.train-dest-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.train-min {
  text-align: right;
  font-size: 30px;
  font-weight: 700;
  color: var(--amber);

  text-shadow:
    0 0 8px rgba(255, 140, 20, 0.45),
    0 0 22px rgba(255, 90, 0, 0.20);
}

.train-min small {
  display: none;
}

.danger {
  color: var(--danger);
}