/* =====================================================================
   第9弾（係C）：世界の時計（public/js/ui/eras.js）
   ・メニューの「お知らせ」の「世界の時計」：6つの時代の輪（SVG）と、いまの時代・次の時代まで・この時代のできごと
   ・町の空（部屋の景色の data-wx）：星ふる夜は星くず（sparkle）、くちやみの満ち潮は くらい空（gloom）
   ・お店の「お祭りの週：〇%引き」の一行
   時代の色：はじまりの朝 金・お祭りの週 ちょうちんの朱・ノイズの夜 灰むらさき・わたり鳥の季節 翠・星ふる夜 瑠璃・満ち潮 くちやみの紫
   ===================================================================== */
.era-clock {
  --ec: #f6c66b;
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center;
  margin: 0 0 10px; padding: 12px 12px 12px 10px; border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--ec) 55%, transparent);
  background: radial-gradient(140% 120% at 0% 0%, color-mix(in srgb, var(--ec) 16%, transparent), transparent 60%), rgba(5, 12, 9, .34);
}
.era-clock.k-morning { --ec: #f6c66b; }
.era-clock.k-festival { --ec: #ff9a62; }
.era-clock.k-noise { --ec: #b4afd2; }
.era-clock.k-birds { --ec: #84d6ae; }
.era-clock.k-stars { --ec: #a6bdff; }
.era-clock.k-tide { --ec: #b285ee; background: radial-gradient(140% 120% at 0% 0%, rgba(120, 60, 190, .32), transparent 62%), linear-gradient(180deg, rgba(26, 12, 40, .72), rgba(8, 5, 16, .6)); }

/* 輪 */
.ec-ring { width: 112px; height: 112px; }
.ec-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ec-bg { fill: rgba(5, 12, 9, .6); stroke: rgba(227, 179, 65, .38); stroke-width: 1.5; }
.ec-seg { fill: none; stroke-width: 15; stroke-linecap: butt; opacity: .46; }
.ec-seg.on { opacity: 1; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ec) 80%, transparent)); }
.ec-seg.e-morning { stroke: #f6c66b; }
.ec-seg.e-festival { stroke: #ff9a62; }
.ec-seg.e-noise { stroke: #b4afd2; }
.ec-seg.e-birds { stroke: #84d6ae; }
.ec-seg.e-stars { stroke: #a6bdff; }
.ec-seg.e-tide { stroke: #9b6bd6; }
/* いまの時代の進み（弧の中の、明るい線がのびる） */
.ec-prog { fill: none; stroke: rgba(255, 252, 236, .92); stroke-width: 3; stroke-linecap: round; }
.ec-ic { font-size: 12px; text-anchor: middle; dominant-baseline: central; opacity: .75; }
.ec-ic.on { font-size: 15px; opacity: 1; }
.ec-hand { stroke: var(--brass-hi, #f1cc6c); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.ec-hub { fill: var(--brass, #e3b341); stroke: #2a1e04; stroke-width: 1.5; }
.era-clock.tide .ec-hand { stroke: #e2b8ff; }

/* 文 */
.ec-body { display: grid; gap: 3px; min-width: 0; line-height: 1.45; }
.ec-kicker { color: var(--muted); font-size: var(--wf-xs, 14px); letter-spacing: .04em; }
.ec-name { display: flex; align-items: center; gap: 6px; font-family: var(--font-dot); font-weight: 400; font-size: calc(20px * var(--fs-k, 1)); line-height: 1.25; color: color-mix(in srgb, var(--ec) 70%, #fff); overflow-wrap: anywhere; }
.ec-name span { font-family: var(--font-body); font-size: .9em; }
.ec-line { margin: 0; color: var(--text); font-size: var(--wf-s, 14px); }
.ec-next { margin: 2px 0 0; font-size: var(--wf-s, 14px); color: var(--text); }
.ec-next b { margin: 0 1px; color: var(--brass-hi, #f1cc6c); font-size: 1.12em; }
.ec-next small { display: block; color: var(--muted); font-size: var(--wf-xs, 14px); }
/* この時代のできごと（せまい画面でも、ふつうに折り返す一覧） */
.ec-fx { display: grid; gap: 2px; margin: 4px 0 0; padding: 6px 0 0; list-style: none; border-top: 1px dashed color-mix(in srgb, var(--ec) 40%, transparent); }
.ec-fx li { position: relative; padding-left: 15px; color: color-mix(in srgb, var(--ec) 40%, #fff); font-size: var(--wf-xs, 14px); line-height: 1.45; }
.ec-fx li::before { content: '◆'; position: absolute; left: 0; top: .2em; font-size: .72em; color: var(--ec); }
.ec-giant {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin: 2px 0 0; padding: 2px 10px; border-radius: 10px;
  border: 1px solid rgba(255, 120, 150, .6); background: rgba(120, 20, 60, .35); color: #ffd0de; font-weight: 700; font-size: var(--wf-s, 14px);
  animation: ecPulse 2.4s ease-in-out infinite;
}
.ec-go { justify-self: start; margin-top: 6px; min-height: 44px; }
@keyframes ecPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 120, 150, .0); } 50% { box-shadow: 0 0 12px 1px rgba(255, 120, 150, .45); } }
@media (max-width: 380px) {
  .era-clock { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
  .ec-ring { width: 92px; height: 92px; }
}

/* ---------------------------------------------------------------------
   町の空（部屋の景色。room.css の天気の続き）
   星ふる夜（sparkle）：星のつぶと、ときどき流れる光のすじ。外の景色（交流広場）ははっきり、店や家の中はうっすら
   くちやみの満ち潮（gloom）：昼でも暗く、むらさきがかる
   --------------------------------------------------------------------- */
/* 外の景色は、昼でも夕ぐれのような空に（星が見えるように） */
.rm-scene[data-wx="sparkle"][data-out]:not([data-phase="night"]) .rm-tint { background: linear-gradient(180deg, rgba(46, 52, 140, .5), rgba(70, 46, 120, .16) 70%, transparent); mix-blend-mode: multiply; }
.rm-scene[data-wx="sparkle"] .rm-tint::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2.4px 2.4px at 18% 28%, #fffbe0, transparent 75%),
    radial-gradient(1.8px 1.8px at 66% 14%, #e6f0ff, transparent 75%),
    radial-gradient(2.6px 2.6px at 44% 62%, #fff4c8, transparent 75%),
    radial-gradient(1.8px 1.8px at 86% 48%, #ffffff, transparent 75%),
    radial-gradient(2px 2px at 30% 82%, #fff8d8, transparent 75%),
    linear-gradient(118deg, transparent 46%, rgba(255, 244, 196, .75) 49.5%, transparent 51%);
  background-size: 110px 84px, 150px 104px, 130px 96px, 96px 76px, 170px 120px, 300px 220px;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
  animation: ecStars 7s linear infinite;
}
.rm-scene:not([data-out])[data-wx="sparkle"] .rm-tint::after { opacity: .4; }
@keyframes ecStars {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 120% -120%; }
  to { background-position: -30px 84px, -40px 104px, -20px 96px, -16px 76px, -46px 120px, -60% 160%; }
}
.rm-scene[data-wx="gloom"] .rm-tint { background: linear-gradient(180deg, rgba(40, 14, 66, .6), rgba(14, 6, 26, .46)); mix-blend-mode: multiply; }
.rm-scene[data-wx="gloom"][data-out] .rm-tint::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% -10%, rgba(120, 50, 170, .32), transparent 72%); }
@media (prefers-reduced-motion: reduce) {
  .rm-scene[data-wx="sparkle"] .rm-tint::after, .ec-giant { animation: none; }
}

/* お店の「お祭りの週：〇%引き」（絆の値引きの一行の、時代の色） */
.shop-off.era-off { color: #ffcf9e; }
.shop-off.era-off b { color: #ffb070; }