/* ═══════════════════════════════════════════
   魂の羅針盤 ── style.css
   palette:
     --ink   #0a0920  深宇宙
     --nebula #8a6cff 星雲紫
     --cyan  #6fd8e8  幽玄シアン
     --gold  #d9b45b  蝋燭金
     --bone  #efe9dc  面の白(能面)
   type: Shippori Mincho(見出し) / Noto Serif JP(本文)
   ═══════════════════════════════════════════ */

:root{
  --ink:#0a0920;
  --ink-2:#141235;
  --nebula:#8a6cff;
  --cyan:#6fd8e8;
  --gold:#d9b45b;
  --gold-deep:#a8843a;
  --bone:#efe9dc;
  --text:#ded9ec;
  --text-dim:#9d95c0;
  --card-w:clamp(84px, 24vw, 118px);
  --card-r:2.86; /* 縦横比 h = w * r/2 */
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%}
body{
  font-family:'Noto Serif JP', serif;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(10,9,32,.55) 0%, rgba(10,9,32,.78) 55%, rgba(10,9,32,.95) 100%),
    url('img/bg.webp') center top / cover no-repeat fixed,
    var(--ink);
  min-height:100dvh;
  overflow-x:hidden;
  line-height:1.9;
}
@media (max-width:768px){
  body{background-attachment:scroll}
}

/* ── 環境装飾 ── */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(4,3,18,.72) 100%)}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0}
.stars::before,.stars::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 55%, transparent),
    radial-gradient(1px 1px at 68% 8%,  #cfe6ff 55%, transparent),
    radial-gradient(1.6px 1.6px at 84% 30%, #ffe9bd 55%, transparent),
    radial-gradient(1px 1px at 30% 44%, #fff 55%, transparent),
    radial-gradient(1.3px 1.3px at 52% 66%, #d9c8ff 55%, transparent),
    radial-gradient(1px 1px at 8% 78%,  #fff 55%, transparent),
    radial-gradient(1.5px 1.5px at 92% 82%, #bfeef7 55%, transparent);
  animation:twinkle 4.5s ease-in-out infinite;
}
.stars::after{transform:translate(3vw,6vh) scale(1.3);animation-delay:2.2s;opacity:.6}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:.9}}

/* ── ヘッダー ── */
.site-head{position:fixed;top:0;left:0;z-index:30;padding:14px 18px}
.site-mark{
  font-family:'Shippori Mincho', serif;font-size:13px;letter-spacing:.42em;
  color:var(--gold);opacity:.85;text-shadow:0 0 12px rgba(217,180,91,.4)}

/* ── 画面共通 ── */
.screen{
  position:relative;z-index:2;display:none;min-height:100dvh;
  padding:calc(52px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
  max-width:720px;margin:0 auto;flex-direction:column}
.screen.active{display:flex;animation:screenIn .7s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.glass{
  background:linear-gradient(160deg, rgba(26,22,64,.72), rgba(14,12,40,.82));
  border:1px solid rgba(138,108,255,.28);
  border-radius:18px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ═══════ 画面1 ═══════ */
.intro-inner{margin:auto;width:100%;text-align:center}

.medallion{position:relative;width:132px;height:132px;margin:0 auto 18px}
.medallion img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  filter:saturate(.82) brightness(.92);
  box-shadow:0 0 0 1px rgba(239,233,220,.25), 0 0 34px rgba(138,108,255,.45)}
.medallion-ring{
  position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(217,180,91,.55);
  border-top-color:transparent;border-bottom-color:transparent;
  animation:ringspin 14s linear infinite}
@keyframes ringspin{to{transform:rotate(360deg)}}

.site-title{
  font-family:'Shippori Mincho', serif;font-weight:800;
  font-size:clamp(34px, 9.5vw, 48px);letter-spacing:.2em;color:var(--bone);
  text-shadow:0 0 26px rgba(138,108,255,.55), 0 2px 4px rgba(0,0,0,.6)}
.title-dot{font-size:.6em;color:var(--gold);vertical-align:.12em;margin:0 .1em}
.site-sub{
  font-size:12px;letter-spacing:.14em;color:var(--text-dim);margin:8px 0 24px}

.intro-card{padding:24px 20px 26px;text-align:left}
.teller-line{
  font-family:'Shippori Mincho', serif;font-size:14.5px;color:var(--bone);
  letter-spacing:.06em;line-height:2;margin-bottom:16px;text-align:center}

textarea{
  width:100%;resize:none;padding:13px 14px;border-radius:12px;
  background:rgba(6,5,22,.65);border:1px solid rgba(138,108,255,.35);
  color:var(--text);font-family:inherit;font-size:16px;line-height:1.8;
  transition:border-color .25s, box-shadow .25s}
textarea::placeholder{color:#6a6390}
textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,180,91,.18)}

.input-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);margin:8px 2px 16px}

.btn-gold{
  display:block;width:100%;padding:15px 18px;border:none;border-radius:999px;
  font-family:'Shippori Mincho', serif;font-size:16px;font-weight:600;letter-spacing:.22em;
  color:#241a05;cursor:pointer;text-align:center;text-decoration:none;
  background:linear-gradient(135deg, #f0d48a 0%, var(--gold) 45%, var(--gold-deep) 100%);
  box-shadow:0 6px 22px rgba(217,180,91,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .2s, box-shadow .2s, opacity .2s}
.btn-gold:not(:disabled):active{transform:scale(.97)}
.btn-gold:disabled{opacity:.35;cursor:not-allowed}
.btn-gold:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.limit-block{margin-top:18px;text-align:center;border-top:1px solid rgba(138,108,255,.25);padding-top:18px}
.limit-block p{font-family:'Shippori Mincho', serif;font-size:14px;color:var(--bone);margin-bottom:14px;line-height:2}

/* ═══════ 画面2 ═══════ */
#screen-select{padding-left:0;padding-right:0;overflow:hidden}

.guide-pill{
  align-self:center;background:rgba(14,12,40,.85);border:1px solid rgba(217,180,91,.4);
  border-radius:999px;padding:9px 20px;font-size:12.5px;letter-spacing:.1em;color:var(--bone);
  box-shadow:0 4px 18px rgba(0,0,0,.45);margin:0 18px}

.slots{display:flex;justify-content:center;gap:clamp(10px,3.5vw,26px);margin:26px 12px 0}
.slot{display:flex;flex-direction:column;align-items:center;gap:7px}
.slot-frame{
  width:var(--card-w);aspect-ratio:1 / calc(var(--card-r)/2);
  border-radius:9px;border:1px dashed rgba(138,108,255,.4);
  background:rgba(10,9,32,.4);perspective:900px;position:relative;
  transition:border-color .4s, box-shadow .4s}
.slot.filled .slot-frame{border-style:solid;border-color:rgba(217,180,91,.55);
  box-shadow:0 0 22px rgba(138,108,255,.35)}
.flipper{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.35,0,.2,1)}
.slot.revealed .flipper{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-size:cover;background-position:center;opacity:0}
.slot.filled .face{opacity:1}
.face-front{transform:rotateY(180deg)}
.slot.reversed .face-front{transform:rotateY(180deg) rotate(180deg)}
.slot-label{font-family:'Shippori Mincho', serif;font-size:12px;letter-spacing:.3em;color:var(--gold)}
.slot-cardname{font-size:10.5px;color:var(--text-dim);min-height:1.6em;letter-spacing:.05em}

.table-zone{position:relative;margin-top:auto;height:min(46vh, 420px)}
.table-top{
  position:absolute;left:50%;bottom:-14%;width:150%;height:64%;
  transform:translateX(-50%);border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(58,40,110,.85), rgba(20,14,48,.95) 70%),
    #140e30;
  border-top:2px solid rgba(217,180,91,.5);
  box-shadow:0 -18px 60px rgba(138,108,255,.22), inset 0 24px 60px rgba(0,0,0,.55)}

.candle{position:absolute;bottom:38%;width:13px;height:52px;border-radius:5px;
  background:linear-gradient(180deg,#efe6d2,#c9b896);z-index:3;
  box-shadow:0 4px 10px rgba(0,0,0,.5)}
.candle-l{left:7%}.candle-r{right:7%}
.flame{position:absolute;top:-17px;left:50%;width:11px;height:17px;
  transform:translateX(-50%);border-radius:50% 50% 42% 42%;
  background:radial-gradient(circle at 50% 78%, #fff6d8, #ffc65c 55%, rgba(255,120,40,.15));
  filter:blur(.4px);animation:flick 1.7s ease-in-out infinite;
  box-shadow:0 0 22px 8px rgba(255,190,90,.35)}
.candle-r .flame{animation-delay:.7s}
@keyframes flick{0%,100%{transform:translateX(-50%) scale(1)}30%{transform:translateX(-46%) scale(1.06,.94)}65%{transform:translateX(-53%) scale(.95,1.08)}}

.fan{position:absolute;inset:0;z-index:4}
.fan-card{
  position:absolute;width:var(--card-w);aspect-ratio:1 / calc(var(--card-r)/2);
  border-radius:9px;background-size:cover;background-position:center;
  border:1px solid rgba(217,180,91,.35);
  box-shadow:0 6px 16px rgba(0,0,0,.55);
  cursor:pointer;transform-origin:50% 120%;
  transition:transform .3s ease, box-shadow .3s ease, opacity .5s;
  animation:dealIn .6s ease backwards}
@keyframes dealIn{from{opacity:0;transform:translateY(60px) rotate(0deg)}}
.fan-card.picked{pointer-events:none}
.fan-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (hover:hover){
  .fan-card:not(.picked):hover{box-shadow:0 0 24px rgba(138,108,255,.6), 0 10px 22px rgba(0,0,0,.6)}
}
.fan.done .fan-card:not(.picked){opacity:.18;pointer-events:none}

.fly-card{
  position:fixed;z-index:60;border-radius:9px;background-size:cover;background-position:center;
  border:1px solid rgba(217,180,91,.5);
  box-shadow:0 0 30px rgba(138,108,255,.7), 0 14px 30px rgba(0,0,0,.6);
  transition:all .75s cubic-bezier(.3,.7,.25,1);pointer-events:none}

.waiting-line{
  position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));
  text-align:center;font-family:'Shippori Mincho', serif;font-size:13px;
  color:var(--bone);letter-spacing:.1em;text-shadow:0 2px 8px #000;
  animation:pulseText 2.4s ease-in-out infinite}
@keyframes pulseText{0%,100%{opacity:.5}50%{opacity:1}}

/* ═══════ 画面3 ═══════ */
.result-cards{display:flex;justify-content:center;gap:12px;margin-bottom:18px}
.rcard{display:flex;flex-direction:column;align-items:center;gap:6px;width:calc((100% - 24px)/3);max-width:110px}
.rcard-img{width:100%;aspect-ratio:1/1.43;border-radius:8px;background-size:cover;background-position:center;
  border:1px solid rgba(217,180,91,.45);box-shadow:0 8px 22px rgba(0,0,0,.55)}
.rcard.reversed .rcard-img{transform:rotate(180deg)}
.rcard-pos{font-family:'Shippori Mincho', serif;font-size:11px;letter-spacing:.24em;color:var(--gold)}
.rcard-name{font-size:10.5px;color:var(--text-dim);text-align:center;line-height:1.5}

.reading-card{padding:24px 20px;min-height:200px}
.reading{font-size:15px;line-height:2.15;letter-spacing:.02em;word-break:break-word}
.reading h3{
  font-family:'Shippori Mincho', serif;font-size:15px;color:var(--gold);
  letter-spacing:.14em;margin:26px 0 6px;padding-left:12px;
  border-left:3px solid var(--gold)}
.reading h3:first-child{margin-top:0}
.reading h3 .rev-tag{font-size:11px;color:var(--nebula);margin-left:8px;letter-spacing:.06em}
.reading p{margin-bottom:4px;white-space:pre-wrap}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--gold);
  vertical-align:-.15em;animation:caretBlink .8s step-end infinite}
@keyframes caretBlink{50%{opacity:0}}

.btn-skip{
  display:block;margin:16px auto 0;background:none;border:1px solid rgba(138,108,255,.4);
  color:var(--text-dim);font-family:inherit;font-size:12px;letter-spacing:.15em;
  padding:8px 22px;border-radius:999px;cursor:pointer}

.cta-block{margin-top:24px;text-align:center;animation:screenIn .8s ease both}
.cta-line{margin-bottom:16px}
.btn-cta{max-width:340px;margin:0 auto}
.btn-ghost{
  display:inline-block;margin-top:16px;background:none;border:none;cursor:pointer;
  color:var(--text-dim);font-family:inherit;font-size:12.5px;letter-spacing:.12em;
  text-decoration:underline;text-underline-offset:4px}

/* ── エラー ── */
.error-toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:80;
  width:min(90vw, 420px);text-align:center;padding:18px 20px;border-radius:14px;
  background:rgba(20,14,44,.96);border:1px solid rgba(217,180,91,.45);
  box-shadow:0 14px 40px rgba(0,0,0,.6)}
.error-toast p{font-family:'Shippori Mincho', serif;font-size:13.5px;color:var(--bone);line-height:2;margin-bottom:8px}

/* ── PC(サブ対応) ── */
@media (min-width:769px){
  :root{--card-w:108px}
  .site-mark{font-size:15px}
  .table-zone{height:400px}
  .candle-l{left:16%}.candle-r{right:16%}
  .reading{font-size:16px}
}

/* ── reduced motion ── */
@media (prefers-reduced-motion:reduce){
  .stars::before,.stars::after,.flame,.medallion-ring,.waiting-line{animation:none}
  .flipper{transition-duration:.01s}
  .fan-card{animation:none}
  .fly-card{transition-duration:.01s}
  .screen.active{animation:none}
}