/* 「準備中」の 木の かんばん。 本番で まだ公開しないページ（src/worker.js の UNRELEASED）に つかう。
   .wood-sign … トップページの カードに つける ちいさい 札
   .soon-page … /download/ などを ひらいたときの ページ（ひもで ぶらさがった 大きい かんばん） */

.wood-sign {
  --wood: #c98a4e; --wood-dark: #8a5426; --wood-edge: #5e3515;
  position: relative; display: inline-block; align-self: flex-start;
  padding: 5px 16px 6px; border-radius: 8px;
  border: 2px solid var(--wood-edge);
  background:
    repeating-linear-gradient(176deg, transparent 0 7px, rgba(94,53,21,.18) 7px 8px, transparent 8px 15px),
    linear-gradient(180deg, #d99a5c, var(--wood) 55%, #b9773f);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.15), 0 3px 0 var(--wood-edge);
  color: #fff6e0; text-shadow: 0 2px 0 var(--wood-edge);
  font-family: "Mochiy Pop One", "Hiragino Maru Gothic ProN", sans-serif; letter-spacing: .08em;
}

/* トップページの カード: くぎと ひもで ぶらさがった 札。 札に カーソルを のせると ゆれる */
.door .soon.wood-sign { margin-top: auto; padding: 5px 16px 6px; font-size: 15px; transform-origin: 50% -28px; transform: rotate(-3deg); }
.door:has(.wood-sign) p { margin-bottom: 38px; } /* ひもの ぶんの すきま */
.door .wood-sign::before { /* ひも: 四角の 上の 2辺を 45度 まわして「へ」の字に */
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 40px; height: 40px; margin-left: -20px; margin-bottom: -20px;
  border-left: 2.5px solid var(--wood-edge); border-top: 2.5px solid var(--wood-edge); transform: rotate(45deg); pointer-events: none;
}
.door .wood-sign::after { /* くぎ */
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 24px); width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #eee, #777); box-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.door .wood-sign:hover { animation: tagSwing 1.1s ease-out; }
@keyframes tagSwing {
  0% { transform: rotate(-3deg); } 20% { transform: rotate(9deg); } 40% { transform: rotate(-8deg); }
  60% { transform: rotate(5deg); } 80% { transform: rotate(-4deg); } 100% { transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .door .wood-sign:hover { animation: none; } }

/* 大きい かんばんの くぎ */
.hang .wood-sign::before, .hang .wood-sign::after {
  content: ""; position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #eee, #777); box-shadow: 0 1px 0 rgba(0,0,0,.4);
}

/* ---------- 準備中ページ ---------- */
.soon-page {
  margin: 0; min-height: 100vh; display: grid; place-items: center; overflow-x: hidden;
  background: #ff1aa6 radial-gradient(rgba(255,255,255,.18) 2px, transparent 2.5px) 0 0 / 26px 26px;
  color: #fff; font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; text-align: center;
}
.soon-page main { padding: 24px 16px 40px; }
.hang { position: relative; display: inline-block; padding-top: 70px; transform-origin: 50% 0; animation: swing 3.6s ease-in-out infinite; }
.hang .rope { position: absolute; top: 0; left: 0; width: 100%; height: 76px; overflow: visible; }
.hang .wood-sign { display: block; padding: 18px 46px 16px; border-width: 4px; border-radius: 16px; transform: none;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.25), inset 0 -5px 0 rgba(0,0,0,.15), 0 6px 0 #5e3515, 0 16px 26px rgba(42,15,46,.35); }
.hang .wood-sign::before, .hang .wood-sign::after { top: 14px; width: 9px; height: 9px; margin: 0; }
.hang .wood-sign::before { left: 14px; }
.hang .wood-sign::after { right: 14px; }
.hang .big { display: block; font-size: clamp(44px, 14vw, 76px); line-height: 1.1; letter-spacing: .12em; }
.hang .ruby { display: block; font-size: 15px; letter-spacing: .3em; opacity: .9; }
.peek { position: absolute; right: -54px; bottom: -26px; width: 104px; height: auto; transform: rotate(12deg); }
.soon-page p { margin: 48px 0 6px; font-size: 17px; font-weight: 700; }
.soon-page .en { margin: 0 0 22px; font-size: 13px; opacity: .85; }
.soon-page .home {
  display: inline-block; padding: 10px 24px; border-radius: 999px; background: #ffe51a; color: #2a0f2e;
  font-family: "Mochiy Pop One", sans-serif; text-decoration: none; box-shadow: 0 4px 0 #2a0f2e;
}
.soon-page .home:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes swing { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { .hang { animation: none; } }
@media (max-width: 420px) { .hang .wood-sign { padding: 16px 30px 14px; } .peek { width: 78px; right: -30px; } }

/* 開発用サイトで ?view=prod のときだけ出る しるし（押すと もとに もどる） */
.view-badge {
  position: fixed; left: 12px; bottom: 12px; z-index: 9999; padding: 8px 14px; border-radius: 999px;
  background: #2a0f2e; color: #ffe51a; border: 2px solid #ffe51a; font: 700 13px/1.2 system-ui, sans-serif;
  text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.3);
}