/* クロックパズル スタイル。
   背景演出はプラットフォーム(トップページ)と同じダーク(シンセウェイブ)に統一。
   見せ場は「触れたダイヤルで一緒に回る時計が光る」連動の可視化。 */
:root {
  --aqua: #2de2ff; --aqua-deep: #7ef0ff; --pink: #ff3caf;
  --amber: #ffb02e; --good: #5ef2c0;
  --ink: #e9ecff; --mut: #9a9ed6; --bg: #08060f; --panel: #151129; --line: #2c2a55;
  --clock: 60px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--ink); line-height: 1.5;
  background: var(--bg); min-height: 100vh; padding: .5rem;
  -webkit-user-select: none; user-select: none;
}
/* 背景演出をトップページ(サイト)に統一:夕焼けグロー + ネオングリッド床 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% -25%, rgba(255,60,175,.38), transparent 55%),
    radial-gradient(90% 60% at 8% 0%, rgba(45,226,255,.26), transparent 60%),
    radial-gradient(90% 60% at 100% 8%, rgba(124,77,255,.26), transparent 60%),
    var(--bg);
  animation: skyPulse 5s ease-in-out infinite;
}
@keyframes skyPulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
body::after {
  content: ""; position: fixed; left: -25%; right: -25%; bottom: 0; height: 48vh; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(45,226,255,.7) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,60,175,.5) 2px, transparent 2px);
  background-size: 44px 44px;
  transform: perspective(300px) rotateX(66deg); transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 6%, transparent 84%);
          mask-image: linear-gradient(to top, #000 6%, transparent 84%);
  opacity: .85; filter: drop-shadow(0 0 6px rgba(45,226,255,.5));
  animation: gridScroll 2.4s linear infinite;
}
@keyframes gridScroll { from { background-position: 0 0, 0 0; } to { background-position: 0 44px, 0 44px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: 640px; margin: 0 auto; }

/* ---- 見出し ---- */
.head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 .4rem; flex-wrap: wrap; }
.chip {
  font-family: ui-monospace, "Courier New", monospace; font-size: .62rem; letter-spacing: .12em;
  color: #04121a; background: var(--aqua); border-radius: 999px; padding: 2px 8px; font-weight: 800;
  white-space: nowrap;
}
.head h1 {
  font-size: 1.05rem; margin: 0; color: #fff3d8;
  text-shadow: 0 0 10px rgba(255,200,120,.5); letter-spacing: .04em;
}
.stats { margin-left: auto; display: flex; gap: 10px; }
.stat { display: inline-flex; align-items: baseline; gap: 4px; }
.lbl {
  font-size: .58rem; color: var(--aqua-deep); letter-spacing: .12em;
  font-family: ui-monospace, "Courier New", monospace;
}
.stat b { font-size: 1rem; font-variant-numeric: tabular-nums; font-family: ui-monospace, "Courier New", monospace; }

/* ---- 盤面(表・裏) ---- */
.boards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.board { flex: 0 0 auto; }
.board h2 {
  margin: 0 0 2px; font-size: .68rem; letter-spacing: .3em; color: var(--aqua-deep);
  font-family: ui-monospace, "Courier New", monospace; text-align: center;
}
/* 3x3 の周りにダイヤルを置くので、その分の余白を取る */
.board-inner {
  position: relative;
  padding: 26px 34px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  box-shadow: inset 0 0 24px rgba(0,0,0,.5);
}
.grid { display: grid; grid-template-columns: repeat(3, var(--clock)); grid-template-rows: repeat(3, var(--clock)); gap: 4px; }

/* ---- 時計 ---- */
.clock {
  position: relative; width: var(--clock); height: var(--clock); border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #232046, #12102a);
  border: 2px solid #3b3870;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
/* 文字盤の目盛り(12方向) */
.clock::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background:
    repeating-conic-gradient(from -1.5deg, rgba(154,158,214,.55) 0 3deg, transparent 3deg 30deg);
  -webkit-mask-image: radial-gradient(circle, transparent 62%, #000 63%);
          mask-image: radial-gradient(circle, transparent 62%, #000 63%);
}
.clock .hand {
  position: absolute; left: 50%; bottom: 50%; width: 3px; height: 38%;
  margin-left: -1.5px; border-radius: 2px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, var(--amber), #ff7b3c);
  box-shadow: 0 0 8px rgba(255,176,46,.8);
  transition: transform .18s ease-out;
}
.clock .num {
  position: absolute; bottom: 12%; font-size: .58rem; color: var(--mut);
  font-family: ui-monospace, "Courier New", monospace; font-weight: 700;
}
.clock::after {                                  /* 中心の軸 */
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #ffd67a; box-shadow: 0 0 6px rgba(255,214,122,.9);
}
/* 揃った時計 */
.clock.ok { border-color: var(--good); box-shadow: 0 0 12px rgba(94,242,192,.45); background: radial-gradient(circle at 38% 32%, #123c31, #0b241d); }
.clock.ok .hand { background: linear-gradient(180deg, var(--good), #23b98c); box-shadow: 0 0 8px rgba(94,242,192,.8); }
/* 表裏で共有されている角 */
.clock.corner { border-style: dashed; }
/* これから一緒に回る時計(ダイヤルに触れている間) */
.clock.will-move { border-color: var(--aqua); box-shadow: 0 0 0 2px rgba(45,226,255,.35), 0 0 16px rgba(45,226,255,.5); }
/* 実際に回った直後 */
.clock.moved { animation: pop .42s ease-out; }
@keyframes pop { 0% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* ---- ピン(2x2 区画の中心 = 時計の交点) ---- */
.pin {
  position: absolute; width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid #6f74a8; background: #1b1836; z-index: 3;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.6);
  transition: background .12s, border-color .12s, box-shadow .12s, transform .12s;
}
.pin::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #3a3768; }
.pin.up {
  border-color: var(--pink); background: #40103a; transform: scale(1.12);
  box-shadow: 0 0 12px rgba(255,60,175,.65);
}
.pin.up::after { background: var(--pink); box-shadow: 0 0 8px rgba(255,60,175,.9); }
/* 交点の座標。盤の余白(34,26) + 時計60px + すき間4px から算出し、20pxのピンを中心に合わせる。
   例: UL の交点は x=(94+98)/2=96, y=(86+90)/2=88 なので left/top は -10 した値。 */
.pin-UL { left: 86px; top: 78px; }
.pin-UR { left: 150px; top: 78px; }
.pin-DL { left: 86px; top: 142px; }
.pin-DR { left: 150px; top: 142px; }

/* ---- ダイヤル(四隅の ＋/−) ---- */
.dial { position: absolute; display: flex; flex-direction: column; gap: 2px; z-index: 2; }
.dial-btn {
  width: 28px; height: 24px; padding: 0; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 800;
  border-radius: 6px; border: 1px solid var(--aqua); color: var(--aqua-deep);
  background: rgba(45,226,255,.08); line-height: 1;
}
.dial-btn:hover, .dial-btn:focus-visible { background: rgba(45,226,255,.28); box-shadow: 0 0 10px rgba(45,226,255,.5); }
.dial-btn:active { transform: translateY(1px); }
.dial-UL { left: 2px; top: 22px; }
.dial-UR { right: 2px; top: 22px; }
.dial-DL { left: 2px; bottom: 22px; }
.dial-DR { right: 2px; bottom: 22px; }

/* ---- ボタン・メッセージ ---- */
.controls { display: flex; flex-wrap: wrap; gap: 6px; margin: .6rem 0 .3rem; justify-content: center; }
.btn {
  font: inherit; font-size: .8rem; font-weight: 800; letter-spacing: .03em;
  border: 0; border-radius: 8px; cursor: pointer; padding: .42rem .9rem;
  background: linear-gradient(135deg, var(--aqua), #13b6d6); color: #04121a;
  box-shadow: 0 0 12px rgba(45,226,255,.5);
}
.btn.ghost {
  background: transparent; color: var(--aqua-deep); border: 1px solid var(--aqua);
  box-shadow: inset 0 0 10px rgba(45,226,255,.12);
}
:focus-visible { outline: 3px solid #ffd47a; outline-offset: 2px; }

.msg { min-height: 1.6em; font-size: .72rem; font-weight: 700; color: var(--aqua-deep); margin: 0 0 .3rem; text-align: center; }
.msg.warn { color: #ffcf6b; }
.msg.info { color: var(--aqua-deep); }
.howto { font-size: .66rem; color: var(--mut); line-height: 1.65; margin: .2rem 0 0; }
.howto b { color: var(--aqua-deep); }

/* ---- クリアパネル ---- */
.clear-panel {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(8,6,15,.72); padding: 1rem;
}
.clear-panel[hidden] { display: none; } /* display:flex に hidden 属性が負けるのを防ぐ */
.clear-panel.show { animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.clear-card {
  background: linear-gradient(180deg, #1a1430, #120e22);
  border: 1px solid rgba(45,226,255,.45); border-radius: 14px;
  padding: 1.1rem 1.4rem; text-align: center; max-width: 21rem;
  box-shadow: 0 0 34px rgba(45,226,255,.28);
}
.clear-card h2 { margin: 0 0 .5rem; font-size: 1.2rem; color: #ff86d2; text-shadow: 0 0 12px rgba(255,60,175,.6); }
.clear-body { margin: 0 0 .4rem; font-size: .84rem; }
.clear-save { margin: 0 0 .8rem; font-size: .74rem; min-height: 1.2em; color: var(--aqua-deep); }

/* 狭い画面: 時計を小さくして2面を並べたまま収める */
@media (max-width: 620px) {
  :root { --clock: 46px; }
  .board-inner { padding: 22px 30px; }
  .pin-UL { left: 68px; top: 60px; }
  .pin-UR { left: 118px; top: 60px; }
  .pin-DL { left: 68px; top: 110px; }
  .pin-DR { left: 118px; top: 110px; }
  .dial-btn { width: 24px; height: 22px; }
  .howto { font-size: .62rem; }
}

/* アニメーション低減の希望を尊重 */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .clear-panel.show, .clock.moved { animation: none; }
  .clock .hand { transition: none; }
}