/* css/05-tower.css — AREA 03 チャイムの とけいだい（unit=henshin-tower。SPEC §4-05）
   短い区画（スマホで2画面以内）。音は押した後だけ。 */

.sec-tower { --tw-ink-panel: var(--ink); padding-bottom: var(--sp-9); }
@supports (animation-timeline: view()) {
  .sec-tower { view-timeline-name: --tower-vt; view-timeline-axis: block; }
}
.tw-inner { position: relative; z-index: 1; display: grid; gap: var(--sp-7); }

/* ---------- 上段: 見出し・ボタン・波形 ---------- */
.tw-top { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) { .tw-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7); } }
.tw-title { margin-bottom: var(--sp-4); }
.tw-title .sp { display: block; width: auto; height: 0; }
.tw-lead { margin: 0 0 var(--sp-3); font-weight: 700; }
.tw-note {
  display: inline-block; margin: 0; padding: var(--sp-2) var(--sp-4);
  background: var(--paper-hi); border: 2px solid var(--ink); border-radius: var(--r-s);
  font-weight: 700; font-size: var(--fs-small); box-shadow: 0 3px 0 var(--ink); transform: rotate(-1deg);
}

.tw-play { display: grid; gap: var(--sp-4); }
.tw-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); }

/* ベル（8-50 の鼓動。押したら止まる） */
.bell-btn {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 64px; padding: 8px 26px 8px 10px;
  background: var(--clay); color: var(--ink); border: var(--line); border-radius: var(--r-pill);
  box-shadow: 0 6px 0 var(--ink); cursor: pointer; font-family: var(--f-pop); font-size: 1.15rem; line-height: 1.2;
  transition: transform .18s var(--ease-spring), box-shadow .18s var(--ease-spring);
  touch-action: manipulation;
}
.bell-btn:active, .bell-btn.is-press { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.bell-ico { width: 48px; height: 48px; flex: none; padding: 4px; background: var(--mi); border: 3px solid var(--ink); border-radius: 50%; overflow: visible; transform-origin: 50% 12%; }
.bell-body { fill: var(--mi); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.bell-clap { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.bell-btn:not(.is-rung) { animation: tw-beat 1.6s var(--ease-soft) infinite; }
@keyframes tw-beat { 0%, 60%, 100% { transform: scale(1); } 12% { transform: scale(1.06); } 24% { transform: scale(.99); } 36% { transform: scale(1.04); } }
@media (hover: hover) and (pointer: fine) { .bell-btn:hover { background: color-mix(in oklab, var(--clay) 80%, var(--mi)); } }

/* 8-40 ど・み・そ */
.note-btns { display: flex; gap: var(--sp-3); }
.note-btn {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer;
  touch-action: manipulation;
}
.nb-face {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--nc); border: var(--line); box-shadow: 0 5px 0 var(--ink);
  font-family: var(--f-pop); font-size: 1.6rem; line-height: 1; color: var(--ink);
  transition: transform .16s var(--ease-spring), box-shadow .16s;
}
.note-btn--do .nb-face { color: var(--paper-hi); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.note-btn:active .nb-face, .note-btn.is-hit .nb-face { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.nb-time { font-size: .75rem; }
.note-btn::after {
  content: ''; position: absolute; left: 50%; top: 30px; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  border: 3px solid var(--nc); opacity: 0; pointer-events: none;
}
.note-btn.is-ring::after { animation: tw-ring .6s var(--ease-soft); }
@keyframes tw-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

.tw-muted { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.tw-muted-text { margin: 0; font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft); }
.sec-tower[data-sound="on"] .tw-muted { display: none; }
.tw-muted.is-nudge { animation: tw-nudge .4s steps(4); }
@keyframes tw-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* 6-47 波形 */
.wave {
  position: relative; padding: 40px 18px 34px; background: var(--ink); color: var(--paper-hi);
  border: 3px solid var(--ink); border-radius: var(--r-l); box-shadow: 0 8px 0 var(--clay-deep);
  background-image: linear-gradient(rgba(242, 234, 219, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 234, 219, .07) 1px, transparent 1px);
  background-size: 24px 24px;
}
.wave-canvas { display: block; width: 100%; height: clamp(110px, 16vw, 180px); }
.dms { position: absolute; left: 18px; right: 18px; top: 6px; height: 30px; pointer-events: none; }
.dms-mark { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); }
.dms-mark .ch {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--nc); color: var(--ink); border: 2px solid var(--paper-hi);
  font-family: var(--f-pop); font-size: 1rem; line-height: 1;
  animation: tw-float 2.4s ease-in-out infinite;
}
.dms-mark[data-note="mi"] .ch { animation-delay: -.8s; }
.dms-mark[data-note="so"] .ch { animation-delay: -1.6s; }
@keyframes tw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.dms-mark.is-pop .ch { outline: 3px solid var(--paper-hi); outline-offset: 2px; }
.wave-axis { position: absolute; left: 18px; right: 18px; bottom: 8px; display: flex; justify-content: space-between; font-size: .75rem; opacity: .7; }
.wave-axis span:nth-child(2) { transform: translateX(-50%); position: absolute; left: 50%; }

/* ---------- 中段: 3本の帯（2-36）と リング・文字盤 ---------- */
.tw-mid { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 1024px) { .tw-mid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--sp-7); } }
.timeline {
  --tl-label: 9.5em; --tl-sec: 5.5em; --tl-gap: 14px;
  position: relative; padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--paper-hi); border: var(--line); border-radius: var(--r-l); box-shadow: var(--sh-step-lg);
}
.tl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.tl-row { display: grid; grid-template-columns: var(--tl-label) minmax(0, 1fr) var(--tl-sec); align-items: center; gap: var(--tl-gap); }
.tl-row--1 { margin-top: 26px; }
.tl-label { font-weight: 900; line-height: 1.3; }
.tl-bar-wrap { position: relative; height: 34px; }
.tl-bar { position: relative; display: flex; height: 100%; border: var(--line); border-radius: 10px; background: var(--paper); }
.tl-seg { position: relative; height: 100%; }
.tl-seg--a { flex: none; background: var(--mi); border-right: 3px solid var(--ink); border-radius: 7px 0 0 7px; }
.tl-seg--b { flex: 1; border-radius: 0 7px 7px 0; }
.tl-row--1 .tl-seg--b { background: var(--so); }
.tl-row--2 .tl-seg--b { background: repeating-linear-gradient(-45deg, var(--pop-2) 0 10px, color-mix(in oklab, var(--pop-2) 70%, var(--paper-hi)) 10px 20px); border-radius: 7px; }
.tl-row--3 .tl-seg--b { background: var(--clay); border-radius: 7px; }
.tl-seg-label { position: absolute; white-space: nowrap; font-size: .8rem; font-weight: 900; line-height: 1.3; }
.tl-seg--a .tl-seg-label { left: -3px; bottom: calc(100% + 7px); padding: 1px 8px; background: var(--mi); border: 2px solid var(--ink); border-radius: 6px; }
.tl-seg--a .tl-seg-label::after { content: ''; position: absolute; left: 8px; top: 100%; width: 2px; height: 8px; background: var(--ink); }
.tl-seg--b .tl-seg-label { left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 8px; background: var(--paper-hi); border-radius: 6px; }
.tl-sec { font-size: 1.15rem; }
.tl-unit { font-family: var(--f-body); font-weight: 700; font-size: .8rem; margin-left: 2px; }
.tl-needle-track {
  position: absolute; pointer-events: none;
  top: calc(var(--sp-6) - 6px); bottom: calc(var(--sp-5) - 6px);
  left: calc(var(--sp-5) + var(--tl-label) + var(--tl-gap)); right: calc(var(--sp-5) + var(--tl-sec) + var(--tl-gap));
}
.needle { position: absolute; top: 0; bottom: 0; left: 100%; width: 3px; margin-left: -1.5px; background: var(--do); border-radius: 2px; }
.needle::before { content: ''; position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--do); border: 2px solid var(--ink); }
@supports (animation-timeline: view()) {
  html:not([data-reduced]) .needle { animation: tw-needle linear both; animation-timeline: --tower-vt; animation-range: cover 25% cover 75%; }
}
@keyframes tw-needle { from { left: 0%; } to { left: 100%; } }
html[data-reduced] .needle { animation: none; left: 100%; }

.tw-dials { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); justify-items: center; align-items: center; }
.ring { position: relative; margin: 0; width: min(100%, 220px); aspect-ratio: 1; }
.ring-svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-svg circle { fill: none; }
.ring-bg { stroke: var(--paper-deep); stroke-width: 12; }
.ring-open { stroke: var(--mi); stroke-width: 16; stroke-dasharray: 2 68; }
.ring-prog { stroke: var(--do); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 70 70; stroke-dashoffset: 70; }
html[data-reduced] .ring-prog { stroke-dashoffset: 0; }
.ring::before { content: ''; position: absolute; inset: 1%; border-radius: 50%; border: 3px solid var(--ink); pointer-events: none; }
.ring::after { content: ''; position: absolute; inset: 20%; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper-hi); pointer-events: none; }
.ring-cap { position: absolute; inset: 20%; z-index: 1; display: grid; place-content: center; text-align: center; line-height: 1.15; }
.ring-num { font-size: clamp(1.4rem, 4vw, 2.2rem); }
.ring-label { font-size: .75rem; font-weight: 900; letter-spacing: -.02em; } /* 統合: 12px 未満禁止（§2-2） */
.clockface {
  position: relative; width: min(100%, 220px); aspect-ratio: 1;
}
.clockface::before {
  /* 時計台の屋根 */
  content: ''; position: absolute; left: 12%; right: 12%; top: -16%; height: 20%;
  background: var(--do); border: var(--line); border-bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.clock-canvas { position: relative; display: block; width: 100%; height: 100%; }

/* ---------- 下段: 数字（2-33）と 工程図（2-31） ---------- */
.tw-bottom { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .tw-bottom { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--sp-7); } }
:where(.sec-tower) .nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
:where(.sec-tower) .num { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-2); text-align: center; background: var(--paper-hi); border: var(--line); border-radius: var(--r-m); box-shadow: var(--sh-step); }
:where(.sec-tower) .num:nth-child(2) { transform: rotate(1.5deg); }
.num-v { display: flex; align-items: baseline; justify-content: center; gap: 2px; white-space: nowrap; }
.num-n { font-family: var(--f-pop); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; -webkit-text-stroke: .07em var(--ink); paint-order: stroke fill; text-shadow: .04em .05em 0 var(--ink); font-variant-numeric: tabular-nums; }
:where(.sec-tower) .num:nth-child(1) .num-n { color: var(--mi); }
:where(.sec-tower) .num:nth-child(2) .num-n { color: var(--so); }
:where(.sec-tower) .num:nth-child(3) .num-n { color: var(--do); }
.num-u { font-weight: 900; font-size: .85rem; }
.num-l { font-size: .8rem; font-weight: 700; line-height: 1.35; }

.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); counter-reset: pr; }
@media (min-width: 600px) { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } }
.pr-step {
  position: relative; display: grid; grid-template-rows: auto auto 1fr; justify-items: center; gap: 6px; padding: var(--sp-3) var(--sp-2) var(--sp-3);
  text-align: center; background: var(--paper-hi); border: var(--line); border-radius: var(--r-m); box-shadow: var(--sh-step);
}
.pr-no { font-size: .75rem; color: var(--ink-soft); }
.pr-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; border: 3px solid var(--ink); overflow: hidden; background: #55ff00; }
.pr-ico--2 { background: var(--paper-deep); }
.pr-ico--3, .pr-ico--4 { background: var(--ink); }
.pr-ico img.chara { width: 100%; height: 100%; display: block; }
.pr-ico--1 img.chara { object-fit: contain; }
.pr-ico--2 img.chara { object-fit: cover; }
.pr-ico--3 { display: flex; gap: 5px; justify-content: center; align-items: center; }
.pr-dot { display: block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--paper-hi); }
.pr-dot--do { background: var(--do); } .pr-dot--mi { background: var(--mi); } .pr-dot--so { background: var(--so); }
.pr-film {
  display: block; width: 44px; height: 30px; border-radius: 3px; background: var(--paper-hi);
  box-shadow: inset 0 5px 0 var(--ink), inset 0 -5px 0 var(--ink);
  background-image: radial-gradient(circle, var(--ink) 1.4px, transparent 1.8px);
  background-size: 7px 30px; background-position: 0 -12px;
}
.pr-text { font-size: .85rem; font-weight: 900; line-height: 1.45; }
.pr-arrow { position: absolute; right: -30px; top: 42px; z-index: 2; width: 40px; height: 18px; overflow: visible; display: none; }
.pr-arrow path { fill: none; stroke: var(--do); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 600px) { .pr-arrow { display: block; } }

/* ---------- 止める ---------- */
html[data-reduced] .bell-btn, html[data-reduced] .dms-mark .ch { animation: none; }
@media (prefers-reduced-motion: reduce) { .bell-btn, .dms-mark .ch { animation: none; } }

/* ---------- スマホ ---------- */
@media (max-width: 599px) {
  .sec-tower { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
  .tw-inner { gap: var(--sp-5); }
  .tw-title { margin-bottom: var(--sp-3); }
  .tw-lead { font-size: 1rem; line-height: 1.7; }
  .tw-buttons { gap: var(--sp-3); }
  .bell-btn { font-size: 1rem; min-height: 56px; padding-right: 18px; }
  .bell-ico { width: 40px; height: 40px; }
  .nb-face { width: 52px; height: 52px; font-size: 1.35rem; }
  .note-btn::after { top: 26px; width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .wave { padding: 36px 12px 28px; }
  .dms, .wave-axis { left: 12px; right: 12px; }
  .wave-canvas { height: 96px; }
  /* 帯は縦に3本並べる（ラベルは帯の上） */
  .timeline { --tl-gap: 6px; padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .tl-list { gap: 12px; }
  .tl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'label sec' 'bar bar'; gap: 2px 8px; }
  .tl-label { grid-area: label; font-size: .9rem; }
  .tl-sec { grid-area: sec; font-size: 1rem; }
  .tl-bar-wrap { grid-area: bar; height: 28px; }
  .tl-row--1 { margin-top: 0; }
  .tl-row--1 .tl-bar-wrap { margin-top: 30px; }
  .tl-needle-track { left: var(--sp-4); right: var(--sp-4); top: var(--sp-5); bottom: var(--sp-4); }
  .tw-dials { gap: var(--sp-3); }
  .ring, .clockface { width: 37vw; }
  .timeline { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
  .tl-needle-track { top: var(--sp-4); bottom: var(--sp-3); left: var(--sp-3); right: var(--sp-3); }
  .tl-list { gap: 8px; }
  .tl-row--1 .tl-bar-wrap { margin-top: 26px; }
  .tl-bar-wrap { height: 24px; }
  :where(.sec-tower) .nums { gap: var(--sp-2); }
  :where(.sec-tower) .num { padding: var(--sp-2) 4px; }
  .num-n { font-size: 2rem; }
  .num-u { font-size: .75rem; }
  .num-l { font-size: .75rem; }
  .ring-label { font-size: .75rem; }
  .tw-top { gap: var(--sp-4); }
  .tw-play { gap: var(--sp-3); }
  .tw-note { font-size: .8rem; }
  .process { gap: var(--sp-2); }
  .pr-step { grid-template-columns: auto 1fr; grid-template-rows: auto; justify-items: start; align-items: center; text-align: left; column-gap: 8px; padding: 6px 8px; }
  .pr-no { display: none; }
  .ring-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pr-ico { width: 38px; height: 38px; border-radius: 9px; }
  .pr-dot { width: 9px; height: 9px; }
  .pr-film { width: 32px; height: 22px; background-size: 6px 22px; background-position: 0 -8px; }
  .pr-text { font-size: .8rem; align-self: center; }
}