:root{
  --ink:#141C45;
  --lantern:#2A3E88;
  --night:#0F1638;
  --flame:#F3A332;
  --brass:#B38B45;
  --paper:#FFFFFF;
  --mist:#EEF0F7;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
.app{margin:0;background:var(--night);color:var(--ink);font-family:var(--gothic);line-height:1.8;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
.app__main{display:block}
.app p,.app h1,.app h2,.app h3,.app li{word-break:auto-phrase;text-wrap:pretty}
[hidden]{display:none !important}

/* 画面：スマホは全幅、PCは中央に1列 */
.screen{min-height:100vh;min-height:100svh}
.screen--paper{background:var(--paper);color:var(--ink)}
.screen--night{background:var(--night);color:#F4EEDD}
.screen__inner{width:100%;max-width:24rem;margin:0 auto}
.screen__inner:focus,.entry__title:focus,.chart__title:focus,.letter__to:focus,.stone__title:focus{outline:none}
.screen.is-entering .screen__inner{animation:enter .35s ease both}
@keyframes enter{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
.screen__back{margin:1.4rem 0 0;text-align:center;font-size:.85rem}
.link{color:#C9CDE3;text-underline-offset:.25em}
.link:focus-visible,.linkbtn:focus-visible{outline:3px solid var(--flame);outline-offset:3px;border-radius:.2rem}
.link--paper{color:#4C5478}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:#4C5478;text-decoration:underline;text-underline-offset:.25em;cursor:pointer}

/* ボタン */
.btn{display:block;width:100%;border:0;border-radius:999px;padding:1rem 1.25rem;font-family:var(--gothic);font-size:1rem;font-weight:700;letter-spacing:.04em;cursor:pointer}
.btn:focus-visible,.chip:focus-visible{outline:3px solid var(--flame);outline-offset:3px}
.btn--flame{background:var(--flame);color:var(--night)}
.btn--ink{background:var(--ink);color:#fff}
.btn--line{background:transparent;color:#F4EEDD;border:1.5px solid rgba(244,238,221,.55);font-size:.9rem}

/* 画面1：入口 */
.entry{padding:1.5rem 1.4rem 2rem;text-align:center}
.entry__lantern{width:9.5rem;height:auto;display:block;margin:0 auto -.4rem}
.entry__name{margin:0;font-size:.75rem;letter-spacing:.14em;color:var(--brass);font-weight:700}
.entry__title{margin:.5rem 0 1.4rem;font-family:var(--mincho);font-weight:700;font-size:1.55rem;line-height:1.55;letter-spacing:.03em}
.pick{text-align:left}
.pick__group{border:0;margin:0 0 1.2rem;padding:0}
.pick__legend{padding:0;margin-bottom:.5rem;font-size:.8rem;font-weight:700;letter-spacing:.06em}
.pick__signs{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.pick__months{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.chip{border:1.5px solid #CCD1E4;background:#fff;color:var(--ink);border-radius:.8rem;padding:.6rem .2rem;font-family:var(--mincho);font-size:.95rem;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s}
.chip--month{padding:.85rem .2rem;font-size:1.05rem}
.chip[aria-pressed="true"]{background:var(--lantern);border-color:var(--lantern);color:#fff;font-weight:700}
.chip--month[aria-pressed="true"]{box-shadow:inset 0 -4px 0 var(--flame)}
.pick__foot{margin:.8rem 0 0;text-align:center;font-size:.78rem;color:#5A6288}

/* 誕生日の入力 */
.birth{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:.5rem}
.birth__field{position:relative;display:block}
.birth__select{width:100%;appearance:none;-webkit-appearance:none;border:1.5px solid #CCD1E4;border-radius:.8rem;background:#fff;color:var(--ink);padding:.8rem 2rem .8rem .8rem;font-family:var(--mincho);font-size:1.15rem;font-weight:700}
.birth__select:focus-visible{outline:3px solid var(--flame);outline-offset:2px}
.birth__unit{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);font-size:.78rem;color:#5A6288;pointer-events:none}

/* 画面2：ホロスコープ */
.chart{padding:2rem 1.5rem 2rem;background:radial-gradient(18rem 18rem at 50% 15rem,rgba(42,62,136,.55),transparent 72%)}
.chart__title{margin:.5rem 0 .4rem;font-family:var(--mincho);font-weight:700;font-size:1.5rem;letter-spacing:.04em}
.chart__wheel{display:block;width:100%;max-width:20rem;height:auto;margin:0 auto .6rem}
.wheel__ring{fill:none;stroke:rgba(244,238,221,.35);stroke-width:1}
.wheel__spoke{stroke:rgba(244,238,221,.18);stroke-width:1}
.wheel__sign{fill:#C9CDE3;font-family:var(--mincho);font-size:11px;text-anchor:middle;dominant-baseline:central}
.wheel__sign--own{fill:var(--flame);font-weight:700}
.wheel__band--own{fill:rgba(243,163,50,.16)}
.wheel__dot{fill:#F4EEDD}
.wheel__dot--sun{fill:var(--flame)}
.wheel__glow{fill:rgba(243,163,50,.25)}
.wheel__name{fill:#F4EEDD;font-family:var(--gothic);font-size:9.5px;text-anchor:middle;dominant-baseline:central}
.wheel__name--sun{fill:var(--flame);font-weight:700;font-size:11px}
.wheel__tick{stroke:rgba(244,238,221,.4);stroke-width:1}
.chart__big3{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:0 0 1rem}
.chart__item{border:1px solid rgba(244,238,221,.22);border-radius:.8rem;padding:.6rem .3rem;text-align:center}
.chart__item--sun{border-color:var(--flame)}
.chart__key{font-size:.72rem;color:#C9CDE3;letter-spacing:.1em}
.chart__item--sun .chart__key{color:var(--flame);font-weight:700}
.chart__val{margin:.1rem 0 0;font-family:var(--mincho);font-size:.92rem;font-weight:700;white-space:nowrap}
.chart__mean{margin:0;font-size:.7rem;color:#C9CDE3}
.chart__body{margin:0 0 1.3rem;font-size:.88rem;line-height:1.95;color:#DCDDEA}
.chart__save{margin-top:.6rem}

/* 画面3：手紙 */
.letter{padding:2rem 1.5rem 2rem;background:radial-gradient(22rem 16rem at 50% -2rem,rgba(243,163,50,.22),transparent 70%)}
.letter__sky{margin:0;font-size:.75rem;letter-spacing:.12em;color:var(--flame);font-weight:700}
.letter__to{margin:.6rem 0 1rem;font-family:var(--mincho);font-weight:700;font-size:1.8rem;line-height:1.45;letter-spacing:.04em}
.letter__lead{margin:0 0 1.6rem;font-size:.95rem;line-height:2}
/* 灯に照らされた道：左の線が道、丸が灯 */
.path{list-style:none;margin:0 0 1.6rem;padding:0 0 0 1.4rem;border-left:1.5px solid rgba(244,238,221,.22)}
.path__stop{position:relative;padding:0 0 1.5rem}
.path__stop:last-child{padding-bottom:0}
.path__stop::before{content:"";position:absolute;left:calc(-1.4rem - .35rem - .75px);top:.45rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--night);border:1.5px solid rgba(244,238,221,.6)}
.path__stop--bright::before{background:var(--flame);border-color:var(--flame);box-shadow:0 0 0 .35rem rgba(243,163,50,.2),0 0 1.2rem .3rem rgba(243,163,50,.55)}
.path__stop--dim{opacity:.72}
.path__when{margin:0;font-size:.78rem;letter-spacing:.06em;color:#C9CDE3}
.path__stop--bright .path__when{color:var(--flame);font-weight:700}
.path__what{margin:.1rem 0 .3rem;font-family:var(--mincho);font-size:1.12rem;font-weight:700;letter-spacing:.03em}
.path__body{margin:0;font-size:.88rem;line-height:1.9;color:#DCDDEA}
.letter__sign{margin:0 0 1.4rem;font-size:.88rem;text-align:right;color:#DCDDEA}
.letter__name{font-family:var(--mincho);font-size:1.3rem;font-weight:700;color:#F4EEDD;letter-spacing:.2em}

/* 画面4：石 */
.stone{padding:2.2rem 1.5rem 2rem;text-align:center}
.stone__eyebrow{margin:0;font-size:.75rem;letter-spacing:.12em;color:var(--brass);font-weight:700}
.stone__title{margin:.5rem 0 .6rem;font-family:var(--mincho);font-weight:700;font-size:1.55rem;line-height:1.55}
.stone__ring{width:13rem;height:13rem;display:block;margin:0 auto .8rem}
.stone__pair{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:0 0 1.2rem}
.stone__item{background:var(--mist);border-radius:.9rem;padding:.8rem .5rem}
.stone__kind{font-size:.75rem;color:#4C5478;display:flex;align-items:center;justify-content:center;gap:.35rem}
.stone__dot{width:.7rem;height:.7rem;border-radius:50%;display:inline-block;border:1px solid rgba(20,28,69,.25)}
.stone__name{margin:.15rem 0 0;font-family:var(--mincho);font-size:1.1rem;font-weight:700}
.stone__body{margin:0 0 1.3rem;font-size:.86rem;line-height:1.95;text-align:left;color:#3A4268}
.stone__foot{margin:.8rem 0 0;font-size:.78rem;color:#5A6288}



/* 追加：フォームの補助 */
.birth--time{margin-top:.6rem;grid-template-columns:1fr 1fr}
.pick__error{margin:0 0 .9rem;padding:.6rem .8rem;border-radius:.6rem;background:#FCEBE6;color:#8A2A12;font-size:.85rem;line-height:1.7}
.pick__foot+.pick__foot{margin-top:.4rem}
a.btn{text-decoration:none;text-align:center}
.btn:disabled{opacity:.6}

/* 追加：画面2の補助 */
.chart__lines{list-style:none;margin:0 0 1.2rem;padding:0;font-size:.88rem;line-height:1.9;color:#DCDDEA}
.chart__lines li{display:grid;grid-template-columns:2.6rem 1fr;gap:.4rem;margin-bottom:.35rem}
.chart__lk{font-size:.72rem;letter-spacing:.1em;color:var(--flame);font-weight:700;padding-top:.15rem}
.chart__note{margin:-.5rem 0 1.2rem;font-size:.78rem;color:#C9CDE3;line-height:1.8}
.chart__val--wrap{white-space:normal}
.chart__check{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:1.1rem 0 .1rem;font-size:.85rem;color:#DCDDEA;cursor:pointer}
.chart__checkbox{width:1.1rem;height:1.1rem;accent-color:var(--flame)}
.chart__checkbox:focus-visible{outline:3px solid var(--flame);outline-offset:2px}
.chart__saved{margin:.6rem 0 0;text-align:center;font-size:.8rem;color:#C9CDE3}
.wheel__name--approx{opacity:.6}
.wheel__dot--approx{opacity:.6}
.chart__save{margin-top:.5rem}

/* 追加：画面4の補助 */
.stone__soon{margin:0;padding:.9rem 1rem;border-radius:999px;background:var(--mist);color:#4C5478;font-weight:700;font-size:.95rem}

@media (min-width:48rem){.entry,.chart,.letter,.stone{padding-top:3rem;padding-bottom:3rem}}
@media (prefers-reduced-motion:reduce){.chip{transition:none}.screen.is-entering .screen__inner{animation:none}}