/* Layout: TV 16:9.
   Row 1: clock + date + weather (left) | live news (right)
   Row 2: hourly forecast strip, full width
   Row 3: garbage / umbrella notice + warnings ticker + memo band
   Sized in --u (1/100 of a 16:9 frame) so it scales from 960x540 TV browsers to 4K.
   Behind everything: a live sky canvas that follows real sunrise/sunset and the current weather
   (stars at night, drifting clouds, rain or snow). Panels are smoked glass over it. */
:root {
  --u: min(1vw, 1.7778vh);
  --bg: #0b1226;
  --panel: rgba(6, 12, 28, .42);
  --fg: #f4f7ff;
  --muted: rgba(228, 236, 255, .72);
  --line: rgba(255, 255, 255, .16);
  --accent: #ffd98a;
  --hot: #ffb29a;
  --cold: #b9d3ff;
  --notice: #f2c14e;
  --notice-ink: #1d1604;
  /* 気象庁の配色指針に合わせた警報色 */
  --lv2: #f2e700; --lv2-ink: #1a1800;
  --lv3: #ff2800; --lv4: #aa00aa; --lv5: #0c000c;
  --font-clock: "Azeret Mono", ui-monospace, Menlo, monospace;
  --font-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-ui);
  overflow: hidden;
  display: grid; place-items: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .28);
}
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.frame {
  position: relative; z-index: 2;
  width: calc(var(--u) * 100); height: calc(var(--u) * 56.25);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 3.6);
  display: grid;
  grid-template-columns: 58fr 42fr;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: calc(var(--u) * 2) calc(var(--u) * 3);
}

/* 時計 */
.timeblock { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * .9); min-width: 0; flex: none; }
.greet { font-size: calc(var(--u) * 1.7); color: var(--muted); letter-spacing: .1em; }
.clock {
  font-family: var(--font-clock); font-weight: 300;
  font-size: calc(var(--u) * 11.5); line-height: .85;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
  display: flex; align-items: baseline;
}
.colon { color: var(--accent); animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .colon { animation: none; } }
.date { display: flex; align-items: baseline; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 3.4); font-weight: 700; }
.wd { color: var(--accent); }
.wd.sat { color: var(--cold); }
.wd.sun { color: var(--hot); }
.wareki { font-weight: 400; color: var(--muted); font-size: .5em; letter-spacing: .08em; }

/* 天気パネル */
.weather {
  background: var(--panel); border-radius: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 2) calc(var(--u) * 2.6);
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.4);
  min-width: 0; min-height: 0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line);
}
.w-head { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(var(--u) * 1.4); color: var(--muted); letter-spacing: .12em; }
.now { display: flex; align-items: center; gap: calc(var(--u) * 1.8); }
.now .icon { font-size: calc(var(--u) * 6); line-height: 1; }
.now .temp { font-family: var(--font-clock); font-size: calc(var(--u) * 6); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.now .temp small { font-size: .4em; color: var(--muted); margin-left: .1em; }
.now .desc { font-size: calc(var(--u) * 2.2); font-weight: 700; margin-top: calc(var(--u) * .5); }
.days { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); border-top: 1px solid var(--line); padding-top: calc(var(--u) * 1.4); }
.day { display: flex; flex-direction: column; gap: calc(var(--u) * .5); min-width: 0; }
.day .name { color: var(--muted); font-size: calc(var(--u) * 1.4); letter-spacing: .12em; }
.day .row { display: flex; align-items: center; gap: calc(var(--u) * .7); font-size: calc(var(--u) * 2); font-weight: 700; }
.day .row .ic { font-size: 1.25em; }
.day .nums { font-family: var(--font-clock); font-size: calc(var(--u) * 2.8); font-variant-numeric: tabular-nums; font-weight: 500; }
.hi { color: var(--hot); }
.lo { color: var(--cold); }
.sep { color: var(--muted); }
.rain { font-size: calc(var(--u) * 1.8); }
.rain b { font-family: var(--font-clock); font-weight: 500; color: var(--cold); }
.w-error { color: var(--hot); font-size: calc(var(--u) * 1.6); }

/* 時間別 */
.hourly {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  background: var(--panel); border: 1px solid var(--line);
  border-radius: calc(var(--u) * 1.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hour {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .35);
  padding-block: calc(var(--u) * 1);
  font-variant-numeric: tabular-nums;
}
.hour + .hour { border-left: 1px solid var(--line); }
.hour .t { font-family: var(--font-clock); font-size: calc(var(--u) * 1.5); color: var(--muted); }
.hour .t.tomorrow::after { content: " 翌"; font-family: var(--font-ui); font-size: .8em; }
.hour .ic { font-size: calc(var(--u) * 2.8); line-height: 1.1; }
.hour .tp { font-family: var(--font-clock); font-size: calc(var(--u) * 2.4); font-weight: 500; }
.hour .pr { font-family: var(--font-clock); font-size: calc(var(--u) * 1.4); color: var(--muted); }
.hour .pr.wet { color: var(--cold); font-weight: 500; }
.hour-empty { grid-column: 1 / -1; text-align: center; padding-block: calc(var(--u) * 1.6); color: var(--muted); font-size: calc(var(--u) * 1.6); }

/* 下段：ゴミ・傘＋警報テロップ＋メモ */
.band {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(var(--u) * 1) calc(var(--u) * 1.6);
  min-height: calc(var(--u) * 4.4);
}
.garbage {
  flex: none;
  background: var(--notice); color: var(--notice-ink);
  font-weight: 700; font-size: calc(var(--u) * 2.2);
  padding: calc(var(--u) * .6) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * .8);
  animation: pulse 3s ease-in-out infinite;
  text-shadow: none;
}
@keyframes pulse { 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .garbage { animation: none; } }
.garbage.umbrella { background: var(--cold); color: #0b1a33; }
.nightshade {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity 60s linear;
}
.nightshade.on { opacity: 1; }
.label { font-size: calc(var(--u) * 1.4); letter-spacing: .2em; color: var(--muted); flex: none; }
.memo-wrap { flex: 1 1 calc(var(--u) * 16); min-width: calc(var(--u) * 16); display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.memo { flex: 1; min-width: 0; font-size: calc(var(--u) * 2.1); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; border-radius: 6px; }
.memo:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.memo:empty::before { content: "＋"; color: var(--muted); font-weight: 400; }
.fs {
  flex: none; font: inherit; font-size: calc(var(--u) * 1.2); color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: calc(var(--u) * .4) calc(var(--u) * 1.2); cursor: pointer;
}
.fs:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* 警報・注意報テロップ */
.alerts {
  flex: 3 1 calc(var(--u) * 34); min-width: 0;
  display: flex; align-items: center; gap: calc(var(--u) * 1.2);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: calc(var(--u) * .9);
  padding: calc(var(--u) * .55) calc(var(--u) * 1.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.alerts.warn { border-color: var(--lv3); box-shadow: 0 0 0 1px var(--lv3), 0 0 calc(var(--u) * 1.6) rgba(255, 40, 0, .35); }
.alerts.danger { border-color: #d65cd6; box-shadow: 0 0 0 1px #d65cd6, 0 0 calc(var(--u) * 1.8) rgba(170, 0, 170, .5); }
.alerts-label { flex: none; font-size: calc(var(--u) * 1.3); letter-spacing: .14em; color: var(--muted); }
.alerts.warn .alerts-label, .alerts.danger .alerts-label { color: var(--fg); font-weight: 700; }
.alerts-view { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.alerts-view.moving {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.alerts-track { display: inline-flex; will-change: transform; }
.alerts-view.moving .alerts-track { animation: ticker var(--dur, 30s) linear infinite; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.seg { display: inline-flex; align-items: center; gap: calc(var(--u) * 2.4); padding-right: calc(var(--u) * 2.4); font-size: calc(var(--u) * 1.9); }
.alerts-view:not(.moving) .seg { padding-right: 0; }
.area { display: inline-flex; align-items: center; gap: calc(var(--u) * .6); }
.area b { font-weight: 700; margin-right: calc(var(--u) * .2); }
.wn { font-weight: 700; font-size: .9em; padding: .12em .55em; border-radius: .3em; text-shadow: none; }
.wn.lv2 { background: var(--lv2); color: var(--lv2-ink); }
.wn.lv3 { background: var(--lv3); color: #fff; }
.wn.lv4 { background: var(--lv4); color: #fff; }
.wn.lv5 { background: var(--lv5); color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.none { color: var(--muted); font-size: .9em; }
.a-note { color: var(--muted); }

/* レイアウト調整：左に時計＋天気、右にライブ映像 */
.left { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 1.6); min-width: 0; min-height: 0; }
.left .weather { flex: none; min-height: auto; }
.weather {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: calc(var(--u) * .8) calc(var(--u) * 2.4);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2);
}
.w-head { grid-column: 1 / -1; font-size: calc(var(--u) * 1.2); }
.now .icon { font-size: calc(var(--u) * 4.4); }
.now .temp { font-size: calc(var(--u) * 4.6); }
.now .desc { font-size: calc(var(--u) * 1.7); margin-top: calc(var(--u) * .3); }
/* 今日・明日は1行ずつ：「今日 ☀ 晴れ 25°/17° ☂10%」 */
.days { border-top: 0; padding-top: 0; border-left: 1px solid var(--line); padding-left: calc(var(--u) * 2.2);
  grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: calc(var(--u) * 1.2); row-gap: calc(var(--u) * 1.1); align-items: center; }
.day { display: contents; }
.day .name { font-size: calc(var(--u) * 1.4); white-space: nowrap; }
.day .row { font-size: calc(var(--u) * 1.6); white-space: nowrap; overflow: hidden; min-width: 0; }
.day .row span:last-child { overflow: hidden; text-overflow: ellipsis; }
.day .nums { font-size: calc(var(--u) * 2.1); white-space: nowrap; }
.day .rain { font-size: calc(var(--u) * 1.5); white-space: nowrap; }
.now .desc { white-space: nowrap; }
.rain { font-size: calc(var(--u) * 1.5); }

.tv { align-self: center; display: flex; flex-direction: column; gap: calc(var(--u) * 1); min-width: 0; }
.tv-head { display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--u) * 1.4); color: var(--muted); letter-spacing: .1em; }
.live { background: #e5484d; color: #fff; font-weight: 700; font-size: .8em; letter-spacing: .12em; padding: .15em .6em; border-radius: .3em; margin-right: .5em; text-shadow: none; }
.screen {
  position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9;
  border-radius: calc(var(--u) * 1.2); overflow: hidden;
  background: #000; border: 1px solid var(--line);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .35);
}
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-off { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em;
  text-align: center; background: #0b1226; color: var(--muted); font-size: calc(var(--u) * 1.5); line-height: 1.6; padding: 1em; }
.yt-off[hidden] { display: none; }
.yt-off small { font-size: .8em; }
.sound {
  font: inherit; font-size: calc(var(--u) * 1.3); color: var(--fg);
  background: rgba(255, 255, 255, .12); border: 1px solid var(--line); border-radius: 999px;
  padding: calc(var(--u) * .35) calc(var(--u) * 1.3); cursor: pointer; letter-spacing: .05em;
}
.sound:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* ニュース映像は右上の角に寄せて大きく（上と右の余白を詰めた分だけ広げる） */
.frame { grid-template-columns: 54fr 46fr; }
.tv { align-self: start; margin-top: calc(var(--u) * -1.6); margin-right: calc(var(--u) * -2.6); }

/* 画面の切り替えボタン（左下の隅。ふだんは薄く、触ると濃くなる） */
.jump {
  position: fixed; z-index: 600;
  left: calc(50vw - var(--u) * 50 + var(--u) * 3.6); bottom: calc(50vh - var(--u) * 28.125 + var(--u) * .35);
  display: flex; gap: calc(var(--u) * .5);
  opacity: .28; transition: opacity .6s ease;
}
.jump.awake, .jump:focus-within { opacity: 1; }
.jump button {
  font: inherit; font-size: calc(var(--u) * 1.05); color: var(--muted); letter-spacing: .05em;
  background: rgba(6, 12, 28, .45); border: 1px solid var(--line); border-radius: 999px;
  padding: calc(var(--u) * .15) calc(var(--u) * .9); cursor: pointer;
}
.jump button:hover { color: var(--fg); }
.jump button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; color: var(--fg); }

/* 地図モード：映像の枠だけ残して、ほかを地図に切り替える */
.frame > * { transition: opacity .8s ease; }
body.mapmode .frame > :not(.tv) { opacity: 0; pointer-events: none; }
.mapview { position: fixed; inset: 0; z-index: 1; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
body.mapmode .mapview { opacity: 1; }
#map { position: absolute; inset: 0; background: #1d3a57; }
.st-tip.big.leaflet-tooltip { font-size: calc(var(--u) * 1.6); background: rgba(6, 12, 28, .85); border: 1px solid rgba(255,255,255,.35); }
.leaflet-container { font-family: var(--font-ui); background: #1d3a57; }
.base-tiles { filter: invert(1) hue-rotate(180deg) brightness(.8) contrast(.9) saturate(.5); }
.base-photo { filter: brightness(.95) contrast(1.08) saturate(1.05); }
/* 夜の減光は地図のあいだだけ弱める（写真が真っ黒にならないように） */
body.mapmode .nightshade.on { opacity: .35; transition: opacity 1s ease; }
.leaflet-control-container { display: none; }
.map-card {
  position: absolute; z-index: 500; left: calc(var(--u) * 3.6); bottom: calc(var(--u) * 2.6);
  min-width: calc(var(--u) * 26);
  background: rgba(6, 12, 28, .72); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: calc(var(--u) * .8);
}
.map-top { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 2); }
.map-title { font-size: calc(var(--u) * 2.4); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.map-card { overflow: hidden; }
.map-card.tight .map-src { display: none; }
.map-card.tighter .legend { display: none; }
.map-card.tighter { gap: calc(var(--u) * .5); padding-block: calc(var(--u) * 1); }
.map-clock { font-family: var(--font-clock); font-size: calc(var(--u) * 2.4); color: var(--muted); font-variant-numeric: tabular-nums; }
.map-sub { font-size: calc(var(--u) * 2); font-weight: 700; font-variant-numeric: tabular-nums; }
.map-sub .fc { color: var(--accent); }
.map-bar { height: calc(var(--u) * .5); background: var(--line); border-radius: 999px; position: relative; overflow: hidden; }
.map-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 999px; }
.map-bar b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--fg); }
.legend { display: flex; align-items: center; gap: calc(var(--u) * .4); font-size: calc(var(--u) * 1.2); color: var(--muted); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: .3em; }
.legend i { display: inline-block; width: 1.1em; height: 1.1em; border-radius: .2em; }
.map-src { font-size: calc(var(--u) * 1.1); color: var(--muted); }
.home-tip.leaflet-tooltip {
  background: rgba(6, 12, 28, .8); color: var(--fg); border: 1px solid var(--line);
  font-family: var(--font-ui); font-size: calc(var(--u) * 1.6); font-weight: 700;
  padding: .2em .6em; border-radius: .4em; box-shadow: none;
}
.home-tip.leaflet-tooltip::before { display: none; }
.home-tip .wn { font-size: .8em; margin-left: .4em; }
.st-tip.leaflet-tooltip, .road-tip.leaflet-tooltip {
  background: rgba(6, 12, 28, .7); color: var(--fg); border: 0; box-shadow: none;
  font-family: var(--font-ui); font-size: calc(var(--u) * 1.25); font-weight: 700;
  padding: .1em .45em; border-radius: .3em;
}
.road-tip.leaflet-tooltip { color: #ffe7a8; font-weight: 400; }
.line-tip.leaflet-tooltip { background: #f4f7ff; color: #0b1226; border: 0; box-shadow: none; font-family: var(--font-ui);
  font-size: calc(var(--u) * 1.3); font-weight: 700; padding: .1em .5em; border-radius: .3em; }
.line-tip.leaflet-tooltip::before { display: none; }
.st-tip.leaflet-tooltip::before, .road-tip.leaflet-tooltip::before { display: none; }
.map-status { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5) calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.5); }
.map-status span { display: inline-flex; align-items: center; gap: .35em; }
.map-status i { display: inline-block; width: 1.6em; height: .35em; border-radius: 999px; }
.map-status .bad { color: #ff8c75; font-weight: 700; }
.route { flex-basis: 100%; display: flex; align-items: center; gap: .3em; font-size: calc(var(--u) * 1.55); font-weight: 700; white-space: nowrap; min-width: 0; }
.route b { flex: 1; height: .42em; min-width: .8em; background: repeating-linear-gradient(90deg, #111 0 .6em, #fff .6em 1.2em);
  box-shadow: 0 0 0 1px #111, 0 0 0 .22em var(--c); border-radius: 1px; }
.route.road b { background: var(--c); box-shadow: none; border-radius: 999px; }
.hi-delay { animation: hiblink 1.2s ease-in-out infinite; }
@keyframes hiblink { 50% { stroke-opacity: .25; } }
.route small { font-size: .6em; color: var(--muted); font-weight: 400; }
.route em { font-style: normal; font-size: .55em; color: var(--accent); border: 1px solid currentColor; border-radius: .3em; padding: 0 .3em; }