/* 方向性: 招待状のような上品な紙もの。白い紙・水彩の丸・金の細線・筆記体と明朝。
   部品はカード（4マス・金の枠・ピンクのマス）から取る */
:root {
  --ink: #2f2724;
  --ink-soft: #857a74;
  --ink-faint: #b9aea7;
  --gold: #b48a52;
  --gold-soft: #e3d2b6;
  --blush: #f8e7e4;
  --blush-deep: #d79d97;
  --rose: #b0485b;
  --paper: #fffdfa;
  --line: #ece4dc;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  line-height: 1.9;
  letter-spacing: .05em;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

/* 紙の質感（ごく薄いノイズ） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .5  0 0 0 0 .45  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* 四隅の水彩の丸（カード1面と同じ配置）。ゆっくり漂う。はみ出した分は紙の端で切る */
.wc-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.wc { position: absolute; pointer-events: none; mix-blend-mode: multiply; z-index: 0; opacity: 0; animation: wc-in 1.6s var(--ease-out) forwards, drift 14s ease-in-out infinite alternate; }
.wc-pink   { top: -34px;  left: -40px;  width: 150px; animation-delay: .05s, 0s; }
.wc-blue   { top: -40px;  right: -34px; width: 128px; animation-delay: .2s, -3s; }
.wc-yellow { top: 74px;   right: -14px; width: 78px;  animation-delay: .3s, -5s; }
.wc-green  { bottom: -44px; left: -46px; width: 150px; animation-delay: .4s, -7s; }
.wc-cyan   { bottom: -40px; left: 70px;  width: 104px; animation-delay: .5s, -9s; }
.wc-purple { bottom: -46px; right: -46px; width: 170px; animation-delay: .6s, -11s; }
@keyframes wc-in { from { opacity: 0; transform: scale(.85); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes drift { from { translate: 0 0; rotate: 0deg; } to { translate: 6px -8px; rotate: 8deg; } }

main {
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin: 0 auto;
  padding: 76px 26px 150px;
}

/* 出てくる動き（スタッガー＋ブラーイン） */
.reveal { opacity: 0; transform: translateY(14px); filter: blur(6px); animation: reveal .9s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
@keyframes reveal { to { opacity: 1; transform: none; filter: none; } }

/* 見出し */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.eyebrow::after { content: ""; flex: 0 0 42px; height: 1px; background: var(--gold-soft); }

.script {
  font-family: "Ms Madi", cursive;
  font-weight: 400;
  font-size: 60px;
  line-height: 1.15;
  margin: 0 0 22px;
  letter-spacing: 0;
  padding-right: 12px;
}
/* 筆記体が左から書かれていくように見せる（マスクリビール） */
.script.write { clip-path: inset(-20% 100% -20% 0); animation: write 1.6s cubic-bezier(.6, .05, .25, 1) .25s forwards; }
@keyframes write { to { clip-path: inset(-20% -5% -20% 0); } }

.lead { font-size: 15px; margin: 0 0 30px; }
.note { font-size: 12.5px; color: var(--ink-soft); letter-spacing: .06em; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* 細い金の区切り（中央に小さなひし形） */
.ornament { display: flex; align-items: center; gap: 12px; margin: 36px 0 30px; color: var(--gold); }
.ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft)); }
.ornament::after { background: linear-gradient(90deg, var(--gold-soft), transparent); }
.ornament span { width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg); }

/* カードと同じ4マスの答え欄 */
.boxes-wrap { position: relative; margin: 0 0 10px; }
.boxes { display: flex; justify-content: center; gap: 10px; cursor: text; }
.box {
  position: relative;
  flex: 0 1 64px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  background: #fff;
  font-size: 30px;
  line-height: 1;
  transition: border-color .3s, background .3s, transform .35s var(--ease-out);
}
.box.filled { animation: pop .35s var(--ease-out); }
@keyframes pop { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: none; } }
.box.caret::after {
  content: "";
  position: absolute;
  bottom: 14%;
  width: 40%;
  height: 1.5px;
  background: var(--gold);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.boxes-wrap.focus .box { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(215, 157, 151, .12); }
.boxes.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.box.pink { background: var(--blush); border-color: var(--blush-deep); }
.box.pink::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(180, 138, 82, .55); }

/* 4マスの上に重ねる見えない入力欄（IMEのため実際の入力はここで受ける） */
.ghost-input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  font-size: 16px;
  border: 0;
  color: transparent;
  background: transparent;
  caret-color: transparent;
}

/* ボタン（招待状の二重線） */
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  font: inherit;
  font-size: 15px;
  letter-spacing: .24em;
  text-decoration: none;
  padding: 17px 20px;
  margin: 0 0 14px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--ease-out), box-shadow .3s;
  box-shadow: 0 10px 24px -14px rgba(47, 39, 36, .55);
}
.btn::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255, 255, 255, .28); pointer-events: none; }
.btn .arrow { position: relative; width: 26px; height: 1px; background: currentColor; transition: width .35s var(--ease-out); }
.btn .arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn:hover .arrow, .btn:focus-visible .arrow { width: 40px; }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: default; }
.btn .ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; transform: scale(0); animation: ripple .8s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

.btn-light { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-light::before { border-color: var(--line); }
.btn-blush { background: var(--blush); color: var(--ink); box-shadow: inset 0 0 0 1px var(--blush-deep), 0 10px 24px -16px rgba(176, 72, 91, .45); }
.btn-blush::before { border-color: rgba(180, 138, 82, .5); }

.link {
  position: relative;
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  letter-spacing: .16em;
  padding: 4px 0;
}
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform-origin: right; transition: transform .45s var(--ease-out); }
.link:hover::after { transform: scaleX(0); }

/* 入力 */
.field { margin: 0 0 22px; }
.label { display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; letter-spacing: .12em; }
.text-input {
  width: 100%;
  font: inherit;
  font-size: 18px;
  padding: 10px 2px 8px;
  border: 0;
  border-bottom: 1px solid var(--ink-faint);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  transition: border-color .3s;
}
.text-input:focus { outline: none; border-bottom-color: var(--ink); }
.text-input::placeholder { color: var(--ink-faint); }

/* 新郎側・新婦側の選択カード */
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sides input { position: absolute; opacity: 0; pointer-events: none; }
.side-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 18px 8px 14px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.side-card .en { font-family: "Ms Madi", cursive; font-size: 30px; line-height: 1.1; position: relative; z-index: 1; }
.side-card .ja { font-size: 12.5px; color: var(--ink-soft); letter-spacing: .2em; position: relative; z-index: 1; }
.side-card .blot { position: absolute; width: 96px; left: 50%; top: 50%; translate: -50% -50%; scale: 0; opacity: 0; mix-blend-mode: multiply; transition: scale .6s var(--ease-out), opacity .4s; }
.side-card .check { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border: 1px solid var(--ink-faint); border-radius: 50%; }
.sides input:checked + .side-card { border-color: var(--gold); transform: translateY(-2px); }
.sides input:checked + .side-card .blot { scale: 1; opacity: .9; }
.sides input:checked + .side-card .check { border-color: var(--ink); background: var(--ink); }
.sides input:checked + .side-card .check::after { content: ""; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.sides input:focus-visible + .side-card { outline: 2px solid var(--gold); outline-offset: 2px; }

.msg { font-size: 13.5px; margin: 0 0 16px; min-height: 1.6em; letter-spacing: .06em; }
.msg.error { color: var(--rose); }

/* 登録済みの札 */
.ticket {
  position: relative;
  text-align: center;
  padding: 24px 18px 20px;
  margin: 0 0 18px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--gold-soft), 0 18px 40px -26px rgba(47, 39, 36, .5);
  animation: reveal .8s var(--ease-out) both;
}
.ticket::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); pointer-events: none; }
.ticket .side { font-size: 11.5px; letter-spacing: .3em; color: var(--gold); }
.ticket .who { font-size: 22px; font-weight: 600; margin: 2px 0 4px; letter-spacing: .08em; }
.ticket .who small { font-size: 14px; font-weight: 400; margin-left: 4px; }
.ticket .note { margin: 0; }

/* ヒント */
.hint-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  padding: 20px 18px 8px;
  margin: 0 0 16px;
}
.hint-head { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.qno {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  letter-spacing: .08em;
}
.hint-head h2 { flex: 1; margin: 0; font-family: "Ms Madi", cursive; font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: 0; }
.dots { display: flex; gap: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--gold); transition: background .4s; }
.dots i.on { background: var(--gold); }
.hint-step {
  position: relative;
  padding: 2px 0 14px 18px;
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.85;
  animation: reveal .7s var(--ease-out) both;
}
.hint-step::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 14px; width: 1px; background: var(--gold-soft); }
.hint-step .tag { display: block; font-family: "Cormorant Garamond", serif; font-size: 11px; color: var(--gold); letter-spacing: .3em; }
.hint-step.answer::before { background: var(--blush-deep); width: 2px; }
.hint-step.answer .tag { color: var(--rose); }
.hint-card .btn { font-size: 13px; padding: 12px 14px; letter-spacing: .16em; margin: 4px 0 12px; }

/* 紙吹雪の canvas */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

[hidden] { display: none !important; }

@media (min-width: 640px) {
  .wc-pink { width: 240px; top: -50px; left: -60px; }
  .wc-blue { width: 210px; top: -60px; right: -50px; }
  .wc-yellow { width: 130px; top: 120px; right: -20px; }
  .wc-green { width: 240px; bottom: -70px; left: -70px; }
  .wc-cyan { width: 170px; bottom: -60px; left: 120px; }
  .wc-purple { width: 270px; bottom: -70px; right: -70px; }
  main { padding-top: 120px; }
  .script { font-size: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .script.write { clip-path: none; }
}