/* ============================================================
   Uranova — style.css  神秘的×上品（ダーク＋ゴールド／星空）
   ============================================================ */
:root{
  --bg:#0b0a1c; --bg2:#141131; --panel:#191536; --panel2:#211d4c;
  --gold:#e3c179; --gold2:#f6e4ab; --ink:#eeeaff; --mut:#a9a3d6;
  --line:rgba(231,199,120,.26); --rose:#e79bbd; --ok:#7fe0c2;
  --r:18px; --sh:0 14px 44px rgba(0,0,0,.5);
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","Times New Roman",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  color:var(--ink); line-height:1.78;
  padding:0 0 env(safe-area-inset-bottom);
  overflow-x:hidden;
  background:#0b0a1c;
}
/* 生成した星空を固定背景に（宇宙感を活かしつつ文字は読める程度に重ねる） */
.sky{position:fixed;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(11,10,28,.28) 0%, rgba(11,10,28,.5) 55%, rgba(8,7,20,.78) 100%),
    url("../img/bg_stars.png") center top / cover no-repeat,
    #0b0a1c;
  animation:skyFloat 60s ease-in-out infinite alternate;
}
@keyframes skyFloat{0%{background-position:center top,center 48%;background-size:auto,120%}100%{background-position:center top,center 52%;background-size:auto,128%}}
.sky::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -8%, rgba(150,115,230,.18), transparent 60%);
  animation:nebulaPulse 9s ease-in-out infinite}
/* またたく星の層（宇宙的アニメーション） */
.sky::before{content:"";position:absolute;inset:-12%;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 15% 18%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.3px 1.3px at 70% 12%, rgba(253,240,200,.9), transparent),
    radial-gradient(1.2px 1.2px at 40% 32%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.9px 1.9px at 85% 26%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.2px 1.2px at 24% 52%, rgba(253,240,200,.8), transparent),
    radial-gradient(1.5px 1.5px at 60% 58%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.3px 1.3px at 90% 66%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.2px 1.2px at 10% 78%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.7px 1.7px at 50% 84%, rgba(253,240,200,.85), transparent),
    radial-gradient(1.2px 1.2px at 33% 92%, rgba(255,255,255,.8), transparent);
  background-repeat:no-repeat;
  animation:twinkle 5s ease-in-out infinite alternate, starDrift 100s linear infinite}
@keyframes twinkle{0%{opacity:.4}100%{opacity:1}}
@keyframes starDrift{0%{transform:translateY(0)}100%{transform:translateY(3.5%)}}
@keyframes nebulaPulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.sky::before,.sky::after{animation:none}}

/* ---- ヘッダー/フッター ---- */
.app-head{text-align:center;padding:24px 16px 8px}
.logo{font-family:"Cormorant Garamond","Georgia",serif;font-size:34px;letter-spacing:.22em;line-height:1;
  background:linear-gradient(180deg,var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;
  text-shadow:0 0 24px rgba(231,199,120,.18)}
.tagline{color:var(--gold2);font-size:12px;letter-spacing:.24em;margin-top:8px;opacity:.85;font-family:var(--serif)}
/* 金の飾り罫（中央に菱星） */
.rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px auto 2px;max-width:220px;color:var(--gold)}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.rule i{font-style:normal;font-size:10px;opacity:.9}
.app-foot{text-align:center;color:var(--mut);font-size:11px;padding:28px 16px 36px;opacity:.8;font-family:var(--serif)}
.app-foot span{color:var(--gold)}

.wrap{max-width:520px;margin:0 auto;padding:8px 16px 10px}

/* ---- ビュー ---- */
.view{display:none;animation:fade .45s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- カード ---- */
.card{position:relative;background:
    linear-gradient(180deg, rgba(25,21,54,.92), rgba(20,17,45,.94));
  border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:14px 0;box-shadow:var(--sh);
  backdrop-filter:blur(2px)}
/* 見出しは明朝体＋左に金の小星 */
.card h3{margin:0 0 13px;font-size:16.5px;letter-spacing:.06em;color:var(--gold2);font-family:var(--serif);font-weight:700;
  display:flex;align-items:center;gap:8px}
.card h3::before{content:"✦";color:var(--gold);font-size:12px;opacity:.9}
.card p{margin:8px 0;font-size:14.5px;color:var(--ink)}
.muted{color:var(--mut) !important;font-size:13px !important}

/* ---- 入力 ---- */
.intro-card{text-align:center}
.moon{font-size:44px;color:var(--gold);filter:drop-shadow(0 0 14px rgba(231,199,120,.5))}
.intro-card h1{font-size:22px;line-height:1.5;margin:10px 0 6px;font-weight:700}
.intro{color:var(--mut);font-size:13.5px;margin-bottom:18px}
.field{display:block;text-align:left;margin:16px 0}
.field>span{display:block;font-size:12.5px;color:var(--gold2);letter-spacing:.06em;margin-bottom:7px}
input[type=text],select{
  width:100%;padding:13px 14px;border-radius:13px;border:1px solid var(--line);
  background:rgba(10,8,25,.6);color:var(--ink);font-size:15px;outline:none}
input[type=text]::placeholder{color:#6f6a9c}
input:focus,select:focus{border-color:var(--gold)}
.dob{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cats label{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 4px;border:1px solid var(--line);
  border-radius:13px;font-size:12.5px;color:var(--mut);cursor:pointer;background:rgba(10,8,25,.4)}
.cats label i{font-style:normal;font-size:19px}
.cats input{display:none}
.cats label:has(input:checked){border-color:var(--gold);color:var(--ink);background:rgba(231,199,120,.12)}

/* ---- ボタン ---- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;
  padding:15px;border:none;border-radius:13px;cursor:pointer;font-size:15.5px;font-weight:700;letter-spacing:.1em;
  font-family:var(--serif);
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2c05;box-shadow:0 8px 24px rgba(231,199,120,.3)}
.cta:active{transform:translateY(1px)}
.cta.big{margin-top:8px;font-size:16.5px;padding:16px;letter-spacing:.14em}
.cta.ghost{background:transparent;color:var(--gold2);border:1px solid var(--gold);box-shadow:none;text-decoration:none}
.again{width:100%;margin-top:10px;background:transparent;border:1px solid var(--line);color:var(--mut);
  padding:12px;border-radius:13px;cursor:pointer;font-size:13.5px}
.note{font-size:11.5px;color:var(--mut);margin-top:14px}

/* ---- 結果ヘッダ ---- */
.head-card{text-align:center;position:relative;padding-top:40px}
.reset{position:absolute;top:14px;left:14px;background:none;border:none;color:var(--mut);font-size:12.5px;cursor:pointer}
.sign-mark{font-size:46px;color:var(--gold);line-height:1}
.head-card h2{margin:6px 0 4px;font-size:19px}
.head-card .sub{color:var(--gold2);font-size:12.5px;letter-spacing:.03em}
.head-card .date{color:var(--mut);font-size:12px;margin-top:8px;letter-spacing:.08em}

/* ---- 今日の運勢 ---- */
.today{text-align:center}
.ring{--p:60;width:132px;height:132px;border-radius:50%;margin:4px auto 6px;display:grid;place-content:center;position:relative;
  background:conic-gradient(var(--gold) calc(var(--p)*1%), rgba(255,255,255,.08) 0);}
.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--panel)}
.ring b{position:relative;font-size:34px;color:var(--gold2);line-height:1}
.ring small{position:relative;display:block;font-size:11px;color:var(--mut);margin-top:2px}
.stars{font-size:20px;letter-spacing:4px;color:#4a4570}
.stars .on{color:var(--gold)}
.tarot{display:flex;gap:14px;align-items:center;text-align:left;margin:16px 0 6px;
  padding:14px;border:1px solid var(--line);border-radius:15px;background:rgba(10,8,25,.35)}
.tarot-card{flex:0 0 66px;height:96px;border-radius:9px;display:grid;place-content:center;text-align:center;
  font-size:14px;font-weight:700;color:#2a1f52;padding:4px;
  background:linear-gradient(160deg,#f4dfa6,#d9b45f);border:2px solid #fff3d0}
.tarot-card{position:relative}
.tarot-card.rev{background:linear-gradient(160deg,#e9cfe0,#c79bd6);border-color:#f3ddf0}
.tarot-card .rev-badge{position:absolute;top:5px;right:6px;font-size:12px;color:#6a3d7a}
.tarot-txt b{display:block;font-size:11px;color:var(--gold2);letter-spacing:.1em}
.tarot-txt span{display:block;font-size:15px;font-weight:700;margin:2px 0 4px}
.tarot-txt p{margin:0;font-size:13px;color:var(--mut)}
.lucky{display:flex;gap:10px;margin-top:8px}
.lucky span{flex:1;font-size:11.5px;color:var(--mut);padding:10px;border:1px solid var(--line);border-radius:12px}
.lucky b{display:block;font-size:15px;color:var(--gold2);margin-top:3px}

.lead{font-size:15px !important;color:var(--gold2) !important;font-weight:700}

/* ---- 深掘り（ゲート） ---- */
.deep{margin:14px 0;padding:15px;border:1px solid var(--line);border-radius:15px;background:rgba(10,8,25,.3);position:relative;overflow:hidden}
.deep-head{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700}
.deep-head .ico{font-size:18px}
.deep-head .score{margin-left:auto;color:var(--gold2);font-size:18px;font-weight:700}
.deep-head .score small{font-size:11px;color:var(--mut);font-weight:400}
.bar{height:7px;border-radius:6px;background:rgba(255,255,255,.08);margin:10px 0 12px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--rose))}
.deep-body p{margin:6px 0;font-size:13.5px}
.deep-body .tip{color:var(--gold2);font-size:12.5px}
.deep.locked .deep-body{filter:blur(6px);opacity:.55;pointer-events:none;user-select:none;max-height:70px;overflow:hidden}
.unlock-btn{display:block;width:100%;margin-top:10px;padding:11px;border-radius:12px;cursor:pointer;font-weight:700;font-size:13.5px;
  border:1px solid var(--gold);background:rgba(231,199,120,.12);color:var(--gold2)}

/* ---- プロモ/サブスク ---- */
.promo p{color:var(--mut);font-size:13.5px}
.promo .cta{margin-top:6px}
.sub ul{margin:6px 0 14px;padding-left:20px;color:var(--ink);font-size:14px}
.sub li{margin:4px 0}
.demo{width:100%;margin-top:8px;background:none;border:none;color:var(--mut);font-size:12px;cursor:pointer;text-decoration:underline}
.disclaimer{text-align:center;font-size:11px;color:var(--mut);margin:18px 6px 4px;opacity:.85}

/* ---- モーダル ---- */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,5,16,.72);backdrop-filter:blur(3px)}
.modal.open{display:flex;animation:fade .25s}
.modal-box{max-width:360px;width:100%;background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--sh)}
.modal-box h4{margin:0 0 10px;color:var(--gold2);font-size:16px}
.modal-box p{font-size:13.5px;color:var(--ink);margin:8px 0}
.modal-box .mini{color:var(--mut);font-size:12px}
.price{list-style:none;padding:0;margin:10px 0}
.price li{display:flex;justify-content:space-between;padding:9px 12px;border:1px solid var(--line);border-radius:11px;margin:6px 0;font-size:13.5px}
.price b{color:var(--gold2)}
.modal-close{width:100%;margin-top:10px;background:none;border:1px solid var(--line);color:var(--mut);padding:11px;border-radius:12px;cursor:pointer}
.modal-box .cta{margin-top:6px}

@media(max-width:360px){ .cats{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   v2 ポータル追加スタイル
   ============================================================ */
/* ホームのヒーロー */
.home-hero{padding:20px}
/* 未入力時＝生成した星空アートのヒーローバナー */
.home-hero.empty{text-align:center;padding:0;overflow:hidden}
.hero-art{height:300px;background:url("../img/hero.png") center 42% / cover no-repeat;position:relative}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,17,45,.7) 82%,rgba(20,17,45,.96) 100%)}
.hero-copy{padding:6px 24px 26px;margin-top:-8px;position:relative}
.hero-copy h1{font-size:23px;line-height:1.55;margin:6px 0 8px;font-family:var(--serif);letter-spacing:.03em;color:var(--gold2)}
.hero-copy .intro{color:var(--mut);font-size:13.5px;margin-bottom:20px;font-family:var(--serif)}
.hh-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.hh-star{font-size:42px;line-height:1;filter:drop-shadow(0 0 12px rgba(231,199,120,.5))}
.hh-hi{font-size:12px;color:var(--mut);font-family:var(--serif);letter-spacing:.1em}
.hh-type{font-size:24px;font-weight:700;color:var(--gold2);font-family:var(--serif);letter-spacing:.06em}
.hh-type small{font-size:12px;color:var(--mut);margin-left:8px;font-weight:400;font-family:var(--serif)}
.hh-today{text-align:center;border-top:1px solid var(--line);padding-top:14px}
.hh-today .ring{width:108px;height:108px;margin:2px auto 4px}
.hh-today .ring b{font-size:28px}
.edit-prof{display:block;width:100%;margin-top:12px;background:none;border:1px solid var(--line);color:var(--mut);padding:9px;border-radius:11px;font-size:12.5px;cursor:pointer;font-family:var(--serif);letter-spacing:.08em}

/* 占い師 ルナ の挨拶カード */
.seer-card{display:flex;gap:15px;align-items:center;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(150,115,230,.18), transparent 55%),
    linear-gradient(180deg, rgba(28,24,60,.92), rgba(20,17,45,.94))}
.seer-portrait{flex:none;width:92px;height:92px;border-radius:50%;
  background:url("../img/seer.png") center 16% / 150% no-repeat;
  border:1.5px solid var(--gold);box-shadow:0 0 0 5px rgba(231,199,120,.08),0 0 22px rgba(150,115,230,.4)}
.seer-text{flex:1;min-width:0}
.seer-name{font-family:var(--serif);font-size:16.5px;color:var(--gold2);letter-spacing:.06em}
.seer-name span{display:block;font-size:10.5px;color:var(--mut);letter-spacing:.18em;margin-top:2px}
.seer-msg{margin:8px 0 0;font-size:13px;color:var(--ink);line-height:1.7;font-family:var(--serif)}

/* 占いメニュー */
.menu-h{margin:22px 0 12px;color:var(--gold2);font-size:14px;letter-spacing:.2em;text-align:center;font-family:var(--serif)}
.menu-h::before,.menu-h::after{content:"—";color:var(--line);margin:0 10px}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.menu-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  padding:17px 15px 15px;border:1px solid var(--line);border-radius:15px;cursor:pointer;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(231,199,120,.06), transparent 60%),
    linear-gradient(180deg, rgba(28,24,60,.95), rgba(19,16,42,.96));
  box-shadow:var(--sh);color:var(--ink);transition:border-color .2s,transform .1s}
/* 四隅の金コーナー装飾（占術カード風） */
.menu-card::before{content:"";position:absolute;top:6px;left:6px;right:6px;bottom:6px;border-radius:11px;
  border:1px solid rgba(231,199,120,.14);pointer-events:none}
.menu-card:active{transform:translateY(1px)}
.menu-card.hero{grid-column:1 / -1;border-color:var(--gold);
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(231,199,120,.16), transparent 55%),
    linear-gradient(120deg,#2c2564,#3b2e70)}
.menu-card.hero::before{border-color:rgba(231,199,120,.3)}
.menu-card .micon{line-height:0;filter:drop-shadow(0 0 8px rgba(231,199,120,.25))}
.micon .ic{width:28px;height:28px;color:var(--gold2);display:block}
.menu-card.hero .micon .ic{width:37px;height:37px}
/* 結果ヘッダのアイコン */
.rh-title{display:inline-flex;align-items:center;gap:7px}
.rh-title .ic{width:19px;height:19px;color:var(--gold);flex:none}
/* 各占いのミニ挿絵バナー（生成イラスト） */
.fortune-art{height:172px;border-radius:var(--r);margin:12px 0 4px;overflow:hidden;position:relative;
  background-size:cover;background-position:center;box-shadow:var(--sh);border:1px solid var(--line)}
.fortune-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(15,12,34,.55) 100%)}
.mtitle{font-size:15px;font-weight:700;margin-top:5px;font-family:var(--serif);letter-spacing:.02em}
.menu-card.hero .mtitle{font-size:19px;color:var(--gold2)}
.mdesc{font-size:11.5px;color:var(--mut);line-height:1.55}
.mtag{position:absolute;top:10px;right:10px;font-size:10px;font-weight:700;color:#3a2c05;letter-spacing:.04em;
  background:linear-gradient(180deg,var(--gold2),var(--gold));padding:2px 9px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* 結果ヘッダ */
.result-head{display:flex;align-items:center;gap:10px;margin:6px 2px 2px}
.result-head .reset{position:static;background:none;border:none;color:var(--mut);font-size:12.5px;cursor:pointer;padding:6px 0}
.rh-title{font-weight:700;color:var(--gold2);font-size:16px;font-family:var(--serif);letter-spacing:.04em}

/* タイプ表示（看板・数秘・九星など共通） */
.type-hero{text-align:center;padding:30px 20px 26px;position:relative}
.type-mark{width:96px;height:96px;margin:0 auto 12px;border-radius:50%;display:grid;place-content:center;
  font-size:42px;background:radial-gradient(circle at 50% 32%,#3d3178,#171338);
  border:1px solid var(--gold);box-shadow:0 0 0 6px rgba(231,199,120,.08),0 0 36px rgba(231,199,120,.32);
  color:var(--gold2);font-weight:700;font-family:var(--serif)}
.type-group{font-size:11.5px;color:var(--gold2);letter-spacing:.26em;font-family:var(--serif)}
.type-name{font-size:29px;margin:6px 0;font-family:var(--serif);letter-spacing:.06em}
.type-name small{display:block;font-size:12.5px;color:var(--mut);font-weight:400;margin-top:5px;letter-spacing:.08em;font-family:var(--serif)}
.type-catch{font-size:15px;color:var(--ink);margin:8px 0 0;font-family:var(--serif)}

/* key-value 行（深掘り鑑定） */
.kv{padding:11px 0;border-bottom:1px dashed var(--line);font-size:13.5px;line-height:1.7}
.kv:last-child{border-bottom:none}
.kv b{display:block;color:var(--gold2);font-size:13px;margin-bottom:2px}

/* 深掘りカテゴリ（今日の運勢・バイオリズム） */
.deepcat{margin:12px 0}
.deepcat:first-child{margin-top:2px}
.deepcat p{margin:6px 0 0;font-size:13.5px}
.deepcat .tip{color:var(--gold2);font-size:12.5px}

/* タロット 3枚スプレッド */
.spread{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;text-align:center}
.t3lab{font-size:12px;color:var(--gold2);margin-bottom:6px}
.t3 p{font-size:11.5px;color:var(--mut);margin:6px 0 0}
.tarot-card.sm{flex:none;width:100%;height:78px;font-size:12px;margin:0 auto}

/* 血液型セレクト */
.cats.blood{grid-template-columns:repeat(4,1fr)}
.cats.blood.sm{grid-template-columns:repeat(4,1fr);gap:6px}
.cats.blood.sm label{flex-direction:row;justify-content:center;padding:9px 4px;font-size:14px}
.cats.blood.sm input{display:inline-block;margin-right:4px;accent-color:var(--gold)}

/* 汎用の解放ブロックに余白（.deep 内 .kv） */
.deep .kv:first-child{padding-top:2px}
.modal-box .field{margin:12px 0}
.modal-box .cats.blood.sm{margin-top:4px}

/* v3 都度課金 */
.menu-card.prem{border-color:rgba(231,155,189,.5)}
.mtag.love{background:linear-gradient(180deg,#f4b6cf,#e79bbd);color:#5a1f38}
.paynote{margin-top:8px;text-align:center;font-size:11px;color:var(--mut)}
.unlock-btn{font-size:14px}
.deep.unlocked{background:rgba(10,8,25,.3)}

/* v4 四柱推命・五格・手相 */
.rank{font-size:11px;padding:1px 8px;border-radius:20px;margin-left:5px;vertical-align:middle}
.rank.ok{background:rgba(127,224,194,.2);color:#7fe0c2}
.rank.mid{background:rgba(231,199,120,.2);color:var(--gold2)}
.rank.bad{background:rgba(231,155,189,.22);color:#e79bbd}
.pillars{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.pillar{text-align:center;padding:12px 6px;border:1px solid var(--line);border-radius:12px;background:rgba(10,8,25,.35)}
.pl-lab{font-size:11px;color:var(--mut)}
.pl-gs{font-size:24px;font-weight:700;color:var(--gold2);margin:5px 0;font-family:"Hiragino Mincho ProN",serif}
.pl-el{font-size:11px;color:var(--mut)}
.elems{margin-bottom:8px}
.elrow{display:flex;align-items:center;gap:9px;margin:7px 0;font-size:13px}
.elrow>span{width:20px;color:var(--gold2);font-weight:700}
.elrow .bar{flex:1;margin:0}
.elrow>b{width:16px;text-align:right;color:var(--gold2)}
.palmq{margin:14px 0;padding:13px;border:1px solid var(--line);border-radius:13px;background:rgba(10,8,25,.3)}
.pq-title{font-size:13.5px;margin-bottom:9px;color:var(--ink)}
.pq-opts{display:flex;flex-direction:column;gap:7px}
.pq-opts label{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;cursor:pointer}
.pq-opts input{accent-color:var(--gold);flex:none}
.pq-opts label:has(input:checked){border-color:var(--gold);background:rgba(231,199,120,.12)}

/* ============================================================
   v7 銀河背景・豪華装飾（最終版）
   ============================================================ */
/* --- 銀河キャンバス（またたく星・流れ星） --- */
#galaxy{position:fixed;inset:0;z-index:-1;pointer-events:none}
/* --- オーロラ星雲（紫・ローズ・ティール＋天の川バンド） --- */
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.aurora i:nth-child(1){width:74vmax;height:74vmax;left:-26vmax;top:-30vmax;
  background:radial-gradient(circle,rgba(126,94,255,.20),transparent 62%);animation:auf1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:62vmax;height:62vmax;right:-24vmax;top:6vmax;
  background:radial-gradient(circle,rgba(231,155,189,.15),transparent 60%);animation:auf2 33s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:58vmax;height:58vmax;left:-12vmax;bottom:-26vmax;
  background:radial-gradient(circle,rgba(92,214,200,.11),transparent 60%);animation:auf3 39s ease-in-out infinite alternate}
/* 天の川：斜めに走る淡い光の帯 */
.aurora i:nth-child(4){width:160vmax;height:34vmax;left:-30vmax;top:22%;border-radius:50%;
  transform:rotate(-19deg);
  background:radial-gradient(closest-side,rgba(190,170,255,.10),rgba(190,170,255,.045) 55%,transparent 75%);
  animation:aufBand 44s ease-in-out infinite alternate}
@keyframes auf1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(7vmax,5vmax) scale(1.12)}}
@keyframes auf2{0%{transform:translate(0,0) scale(1.06)}100%{transform:translate(-6vmax,7vmax) scale(.95)}}
@keyframes auf3{0%{transform:translate(0,0) scale(.96)}100%{transform:translate(6vmax,-5vmax) scale(1.1)}}
@keyframes aufBand{0%{transform:rotate(-19deg) translateX(0);opacity:.85}100%{transform:rotate(-19deg) translateX(6vmax);opacity:1}}
@media(prefers-reduced-motion:reduce){.aurora i{animation:none}}

/* --- 占いメニューカード：挿絵アート＋発光 --- */
.menu-card{min-height:150px;padding:15px 14px 13px}
.menu-card .mart{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 30%;
  filter:saturate(1.06)}
.menu-card::before{z-index:2}
.menu-card .mtag{z-index:3}
.menu-card .micon,.menu-card .mtitle,.menu-card .mdesc{position:relative;z-index:1}
.menu-card .micon{filter:drop-shadow(0 1px 4px rgba(0,0,0,.65)) drop-shadow(0 0 8px rgba(231,199,120,.3))}
.menu-card .mtitle{margin-top:auto;text-shadow:0 1px 8px rgba(8,7,20,.95),0 0 2px rgba(8,7,20,.8)}
.menu-card .mdesc{text-shadow:0 1px 6px rgba(8,7,20,.95)}
.menu-card:hover{border-color:rgba(231,199,120,.6);box-shadow:0 14px 44px rgba(0,0,0,.5),0 0 22px rgba(231,199,120,.14)}
.menu-card.hero{min-height:212px}
/* 看板カードは光のスイープが走る */
.menu-card.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,243,208,.16) 50%,transparent 60%);
  background-size:260% 100%;animation:sheenMove 5.6s ease-in-out infinite}
@keyframes sheenMove{0%,35%{background-position:135% 0}75%,100%{background-position:-135% 0}}
@media(prefers-reduced-motion:reduce){.menu-card.hero::after{animation:none}}

/* --- お悩みから占う（気持ち起点の入口） --- */
.worry-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:2px 0}
.worry{display:flex;align-items:center;gap:9px;padding:13px 13px;border:1px solid var(--line);border-radius:13px;
  background:linear-gradient(180deg,rgba(28,24,60,.9),rgba(19,16,42,.94));color:var(--ink);cursor:pointer;
  font-family:var(--serif);font-size:12.8px;letter-spacing:.01em;text-align:left;box-shadow:var(--sh);
  transition:border-color .2s,transform .1s;position:relative;overflow:hidden}
.worry .ic{width:19px;height:19px;color:var(--gold2);flex:none;filter:drop-shadow(0 0 6px rgba(231,199,120,.25))}
.worry span{flex:1;min-width:0;line-height:1.4}
.worry .warr{font-style:normal;color:var(--gold);opacity:.55;font-size:15px;flex:none}
.worry::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--gold),var(--rose));opacity:.5}
.worry:hover{border-color:rgba(231,199,120,.55)}
.worry:active{transform:translateY(1px)}
@media(max-width:340px){ .worry-grid{grid-template-columns:1fr} }

/* --- ホームの信頼バッジ --- */
.trust{display:flex;gap:8px;margin:12px 0 2px}
.trust span{flex:1;text-align:center;font-size:10.5px;color:var(--mut);border:1px solid var(--line);
  border-radius:11px;padding:8px 4px;background:rgba(10,8,25,.4);line-height:1.5}
.trust b{display:block;color:var(--gold2);font-size:12px;margin-bottom:1px}

/* --- 結果画面：金のコーナー飾り（占術書の趣） --- */
#result .card::before{content:"";position:absolute;inset:7px;pointer-events:none;border-radius:12px;opacity:.6;
  background:
    linear-gradient(rgba(231,199,120,.75),rgba(231,199,120,.75)) 0 0/16px 1px,
    linear-gradient(rgba(231,199,120,.75),rgba(231,199,120,.75)) 0 0/1px 16px,
    linear-gradient(rgba(231,199,120,.75),rgba(231,199,120,.75)) 100% 0/16px 1px,
    linear-gradient(rgba(231,199,120,.75),rgba(231,199,120,.75)) 100% 0/1px 16px,
    linear-gradient(rgba(231,199,120,.75),rgba(231,199,120,.75)) 0 100%/16px 1px,
    linear-gradient(rgba(231,199,120,.75),rgba(231,199,120,.75)) 0 100%/1px 16px,
    linear-gradient(rgba(231,199,120,.75),rgba(231,199,120,.75)) 100% 100%/16px 1px,
    linear-gradient(rgba(231,199,120,.75),rgba(231,199,120,.75)) 100% 100%/1px 16px;
  background-repeat:no-repeat}
/* 見出しの右へ伸びる金の飾り線 */
.card h3::after{content:"";flex:1;height:1px;margin-left:4px;
  background:linear-gradient(90deg,var(--line),transparent)}
/* 結果タイトル下の金グラデ罫 */
.result-head{padding-bottom:8px;border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(231,199,120,.55),transparent) 1}

/* --- 挿絵バナー：金の額縁 --- */
.fortune-art::before{content:"";position:absolute;inset:7px;z-index:1;pointer-events:none;border-radius:12px;
  border:1px solid rgba(231,199,120,.34);
  background:
    linear-gradient(var(--gold),var(--gold)) 0 0/22px 2px,
    linear-gradient(var(--gold),var(--gold)) 0 0/2px 22px,
    linear-gradient(var(--gold),var(--gold)) 100% 0/22px 2px,
    linear-gradient(var(--gold),var(--gold)) 100% 0/2px 22px,
    linear-gradient(var(--gold),var(--gold)) 0 100%/22px 2px,
    linear-gradient(var(--gold),var(--gold)) 0 100%/2px 22px,
    linear-gradient(var(--gold),var(--gold)) 100% 100%/22px 2px,
    linear-gradient(var(--gold),var(--gold)) 100% 100%/2px 22px;
  background-repeat:no-repeat;opacity:.85}

/* --- タイプ紋章：回る星の軌道リング --- */
.type-mark{position:relative}
.type-mark::before{content:"";position:absolute;inset:-11px;border-radius:50%;
  background:conic-gradient(from 20deg,transparent 0 8%,rgba(231,199,120,.55) 12%,transparent 16% 40%,
    rgba(246,228,171,.5) 46%,transparent 52% 72%,rgba(231,199,120,.45) 78%,transparent 84%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px));
  animation:orbitRev 18s linear infinite}
.type-mark::after{content:"✦";position:absolute;inset:-11px;display:flex;justify-content:center;align-items:flex-start;
  font-size:10px;line-height:1;color:var(--gold2);text-shadow:0 0 8px rgba(231,199,120,.9);
  animation:orbit 12s linear infinite;transform-origin:center}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes orbitRev{to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.type-mark::before,.type-mark::after{animation:none}}
/* タイプ紋章カードの中でまたたく星 */
#result .type-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 16% 28%,rgba(246,228,171,.9),transparent),
    radial-gradient(1.2px 1.2px at 84% 22%,rgba(255,255,255,.85),transparent),
    radial-gradient(1.7px 1.7px at 74% 74%,rgba(246,228,171,.8),transparent),
    radial-gradient(1.2px 1.2px at 24% 80%,rgba(255,255,255,.75),transparent),
    radial-gradient(1.4px 1.4px at 90% 52%,rgba(214,205,255,.85),transparent),
    radial-gradient(1.2px 1.2px at 8% 56%,rgba(214,205,255,.8),transparent);
  background-repeat:no-repeat;animation:twinkle 4.5s ease-in-out infinite alternate}

/* --- 星屑バースト（結果画面を開いた時） --- */
#view-result{position:relative}
.stardust{position:absolute;top:0;left:0;right:0;height:340px;pointer-events:none;overflow:hidden;z-index:5}
.stardust span{position:absolute;top:-16px;color:var(--gold2);opacity:0;
  text-shadow:0 0 8px rgba(231,199,120,.85);
  animation-name:dustFall;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes dustFall{0%{transform:translateY(0) rotate(0deg);opacity:0}
  12%{opacity:1}100%{transform:translateY(310px) rotate(160deg);opacity:0}}

/* --- 課金ボタン：金のシーン（光沢）が走る --- */
.unlock-btn{position:relative;overflow:hidden}
.unlock-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,243,208,.35),transparent);
  transform:skewX(-18deg);animation:sheenBtn 3.4s ease-in-out infinite}
@keyframes sheenBtn{0%,55%{left:-60%}85%,100%{left:130%}}
@media(prefers-reduced-motion:reduce){.unlock-btn::after{animation:none}}
.deep.locked{border-color:rgba(231,199,120,.4)}

/* --- プレミアム見放題カード（豪華訴求） --- */
.prem-card{position:relative;overflow:hidden;border:1px solid rgba(231,199,120,.55);
  background:
    radial-gradient(120% 100% at 85% 0%,rgba(231,199,120,.14),transparent 55%),
    linear-gradient(180deg,rgba(32,26,64,.95),rgba(20,17,45,.96))}
.prem-badge{position:absolute;top:13px;right:-36px;transform:rotate(38deg);z-index:1;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2c05;
  font-size:9.5px;font-weight:700;letter-spacing:.16em;padding:3px 42px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.prem-lead{font-size:14.5px}
.prem-lead b{color:var(--gold2)}
.prem-list{list-style:none;margin:8px 0 12px;padding:0}
.prem-list li{padding:7px 0 7px 24px;position:relative;font-size:13.5px;border-bottom:1px dashed var(--line)}
.prem-list li:last-child{border-bottom:none}
.prem-list li::before{content:"✦";position:absolute;left:4px;color:var(--gold);font-size:11px}
.prem-price{text-align:center;font-family:var(--serif);color:var(--gold2);font-size:13px;margin:2px 0 10px;letter-spacing:.08em}
.prem-price b{font-size:22px}