:root{
  --bg1:#0b1030; --bg2:#1d1654; --bg3:#3a1f5c;
  --card:rgba(255,255,255,.07); --line:rgba(255,255,255,.14);
  --text:#f1f2ff; --muted:#b9bde0; --gold:#f4d58d; --gold2:#ffe9b0;
  --pink:#ff9ec4; --blue:#8fd0ff; --green:#9be7b4;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--text);
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:16px; line-height:1.8;
  background:linear-gradient(170deg,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%) fixed;
  min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.9;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 38%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 36% 8%,#ffe9b0 50%,transparent 51%),
    radial-gradient(1px 1px at 48% 27%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 14%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 74% 41%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 88% 9%,#cfe3ff 50%,transparent 51%),
    radial-gradient(1px 1px at 93% 33%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 14% 62%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 31% 78%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 57% 69%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 81% 74%,#ffe9b0 50%,transparent 51%),
    radial-gradient(1px 1px at 68% 91%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 5% 88%,#fff 50%,transparent 51%);
}
.wrap{position:relative; z-index:1; max-width:920px; margin:0 auto; padding:0 16px 56px}
.lang{display:flex; justify-content:flex-end; gap:6px; padding-top:14px}
.lang button{
  font:inherit; font-size:12px; color:var(--muted); cursor:pointer; padding:3px 12px; border-radius:999px;
  background:transparent; border:1px solid var(--line);
}
.lang button[aria-pressed="true"]{color:var(--bg1); background:var(--gold); border-color:var(--gold); font-weight:700}
.lang button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
header{text-align:center; padding:22px 0 20px}
.logo{font-size:14px; letter-spacing:.3em; color:var(--gold); margin:0 0 6px}
h1{font-size:clamp(28px,6vw,42px); line-height:1.3; margin:0; font-weight:700}
h1 span{color:var(--gold)}
.date{
  display:inline-block; margin:18px 0 0; padding:6px 20px; border-radius:999px;
  background:rgba(244,213,141,.14); border:1px solid rgba(244,213,141,.45);
  color:var(--gold2); font-weight:700; font-size:17px;
}
.lead{color:var(--muted); font-size:14px; margin:12px 0 0}
h2{font-size:20px; margin:40px 0 14px; display:flex; align-items:center; gap:10px}
h2::before{content:"✦"; color:var(--gold); font-size:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:22px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

/* 星座を選ぶ */
.signs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media(min-width:560px){.signs{grid-template-columns:repeat(4,1fr)}}
@media(min-width:820px){.signs{grid-template-columns:repeat(6,1fr)}}
.sign{
  font:inherit; color:var(--text); cursor:pointer; text-align:center; display:block; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:12px 4px 10px; transition:transform .15s, border-color .15s, background .15s;
}
.sign:hover{transform:translateY(-2px); border-color:rgba(244,213,141,.6)}
.sign:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.sign[aria-current="true"]{background:rgba(244,213,141,.18); border-color:var(--gold)}
.sign .g{display:block; font-size:30px; line-height:1.2; color:var(--gold)}
.sign .n{display:block; font-weight:700; font-size:14px}
.sign .d{display:block; font-size:11px; color:var(--muted); line-height:1.4}
.birthday{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:14px; font-size:14px; color:var(--muted);
}
.birthday select{
  font:inherit; color:var(--text); background:rgba(255,255,255,.1);
  border:1px solid var(--line); border-radius:10px; padding:6px 8px;
}
.birthday select option{color:#111}

/* きょうの運勢 */
.result{margin-top:22px; scroll-margin-top:12px}
.result-head{display:flex; align-items:center; gap:14px}
.result-head > div:nth-child(2){min-width:0}
.big-g{
  width:76px; height:76px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:42px; color:var(--bg1);
  background:radial-gradient(circle at 30% 30%,#fff3cf,var(--gold));
  box-shadow:0 0 28px rgba(244,213,141,.45);
}
.result-head h3{margin:0; font-size:26px; line-height:1.3}
.result-head .sub{margin:0; color:var(--muted); font-size:13px}
.rank{
  margin-left:auto; text-align:center; padding:6px 16px; border-radius:14px;
  border:1px solid rgba(244,213,141,.5); background:rgba(244,213,141,.1);
}
.rank b{display:block; font-size:28px; line-height:1.1; color:var(--gold2)}
.rank small{font-size:11px; color:var(--muted)}
.total{margin:18px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.total .label{font-weight:700}
.stars{letter-spacing:2px; color:var(--gold); font-size:20px; white-space:nowrap}
.stars i{font-style:normal; color:rgba(255,255,255,.22)}
.msg{margin:10px 0 0; font-size:17px}
.areas{display:grid; gap:12px; margin-top:20px}
@media(min-width:720px){.areas{grid-template-columns:repeat(2,1fr)}}
.area{background:rgba(0,0,0,.18); border:1px solid var(--line); border-radius:16px; padding:14px 16px}
.area h4{margin:0; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:8px}
.area h4 .stars{font-size:15px; letter-spacing:1px}
.area p{margin:6px 0 0; font-size:14px; line-height:1.75; color:#e3e5fb}
.area.love h4 span:first-child{color:var(--pink)}
.area.work h4 span:first-child{color:var(--blue)}
.area.money h4 span:first-child{color:var(--green)}
.area.study h4 span:first-child{color:#c9b0ff}
.lucky{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px}
@media(min-width:720px){.lucky{grid-template-columns:repeat(4,1fr)}}
.lucky div{background:rgba(0,0,0,.18); border:1px solid var(--line); border-radius:16px; padding:12px 8px; text-align:center}
.lucky small{display:block; font-size:11px; color:var(--muted); line-height:1.5; white-space:nowrap}
.lucky b{display:block; font-size:15px; line-height:1.5; margin-top:2px}
.swatch{display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:5px; vertical-align:-1px; border:1px solid rgba(255,255,255,.6)}
.tip{
  margin:16px 0 0; padding:12px 16px; border-radius:14px; font-size:15px;
  background:rgba(244,213,141,.1); border-left:3px solid var(--gold);
}
.tip b{color:var(--gold2)}
.more{margin:14px 0 0; text-align:right; font-size:13px}
.more a{color:var(--gold2); text-decoration:none; border-bottom:1px solid rgba(244,213,141,.5)}
.more a::after{content:" →"}
.back{margin:16px 4px 0; font-size:14px}
.back.bottom{margin-top:32px; text-align:center}
.back a{
  display:inline-block; color:var(--gold2); text-decoration:none; padding:8px 18px; border-radius:999px;
  border:1px solid rgba(244,213,141,.5); background:rgba(244,213,141,.1);
}
.back a::before{content:"← "}
.back a:hover{background:rgba(244,213,141,.2)}
@media(max-width:480px){
  .card{padding:16px}
  .big-g{width:56px; height:56px; font-size:32px}
  .result-head h3{font-size:21px}
  .rank{padding:4px 10px}
  .rank b{font-size:22px}
  .lucky{gap:6px}
  .lucky div{padding:10px 2px}
  .lucky small{font-size:10px}
  .lucky b{font-size:14px}
}

/* ランキング */
.ranking{list-style:none; margin:0; padding:0; display:grid; gap:8px}
@media(min-width:720px){.ranking{grid-template-columns:1fr 1fr; column-gap:14px}}
.ranking a{
  font:inherit; color:var(--text); cursor:pointer; text-align:left; text-decoration:none;
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
}
.ranking a:hover{border-color:rgba(244,213,141,.6)}
.ranking a:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.ranking .no{
  width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-weight:700; font-size:14px; background:rgba(255,255,255,.1);
}
.ranking li:nth-child(1) .no{background:var(--gold); color:var(--bg1)}
.ranking li:nth-child(2) .no{background:#d9dcee; color:var(--bg1)}
.ranking li:nth-child(3) .no{background:#d9a777; color:var(--bg1)}
.ranking .g{color:var(--gold); font-size:20px; width:24px; text-align:center}
.ranking .n{font-weight:700; flex:1}
.ranking .stars{font-size:14px; letter-spacing:1px}

.logo a{color:inherit; text-decoration:none}
.about{margin:18px 4px 0; color:var(--muted); font-size:14px}
noscript p{background:#5a2740; padding:12px 16px; border-radius:12px}