/* 今日のラッキーソング: 夜空の配色(ヒーロー画像に合わせる) */
:root {
  --night:#0e1330;      /* 夜空の紺 */
  --night-2:#171b45;    /* カードの地 */
  --dusk:#2a1f45;       /* 夕焼けに近い紫 */
  --ink:#f3efff;        /* 本文(明るい) */
  --muted:#b9b3d8;      /* 補足 */
  --line:rgba(233,224,255,.14);
  --gold:#e6c887;       /* ロゴの金 */
  --rose:#f07aa0;       /* 髪の色を明るくしたもの */
  --mincho:"Shippori Mincho","Noto Serif JP","Noto Serif CJK JP",serif;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--night); }
body { min-height:100vh; margin:0; color:var(--ink); background:linear-gradient(180deg,var(--night) 0,var(--night) 40%,var(--dusk) 100%); font-family:"Noto Sans JP",sans-serif; }
a { color:var(--gold); }
a:focus-visible,button:focus-visible,select:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ヒーロー: 画像の文字を切らないよう、どの画面幅でも全体を表示する */
.hero { position:relative; max-width:1536px; margin:0 auto; }
.hero picture { display:block; position:relative; }
.hero-image { display:block; width:100%; height:auto; }
.hero picture::after { content:""; position:absolute; left:0; right:0; bottom:0; height:18%; background:linear-gradient(180deg,transparent,var(--night)); pointer-events:none; }
.hero-sub { display:none; }

main { max-width:1120px; margin:auto; padding:8px 24px 48px; }
.date { text-align:center; font-family:var(--mincho); font-weight:600; color:var(--gold); font-size:1.15rem; letter-spacing:.06em; margin:8px 0 22px; }

.toolbar { display:flex; justify-content:center; align-items:center; gap:9px; flex-wrap:wrap; padding:14px; border:1px solid var(--line); border-radius:14px; background:rgba(23,27,69,.6); }
.toolbar label { color:var(--muted); }
select,button { font:inherit; border-radius:8px; padding:9px 12px; }
select { background:var(--night); color:var(--ink); border:1px solid var(--line); }
button { cursor:pointer; background:var(--gold); border:1px solid var(--gold); color:var(--night); font-weight:700; }
button.quiet { background:transparent; color:var(--gold); }

.status { text-align:center; color:var(--muted); min-height:1.5em; margin:26px 0 18px; font-size:.9rem; }
.status.preparing { font-family:var(--mincho); font-size:1.2rem; color:var(--ink); margin:56px 0; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:22px; }
.card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; padding:22px; background:rgba(23,27,69,.72); }
.sign { display:flex; align-items:center; gap:10px; }
.symbol { font-size:1.9rem; }
.sign h2 { margin:0; font-family:var(--mincho); font-weight:700; font-size:1.25rem; letter-spacing:.04em; }
.rank { margin:3px 0 0; color:var(--gold); font-size:.86rem; letter-spacing:.08em; }
.rank-name { color:var(--muted); letter-spacing:0; margin-left:4px; font-size:.8rem; }
.fortune { color:var(--ink); line-height:1.85; font-size:.93rem; margin:14px 0; }

.song { border-top:1px solid var(--line); padding-top:14px; margin-top:auto; }
.song p { margin:0; }
.song .song-label { margin-bottom:6px; font-size:.74rem; font-weight:700; color:var(--rose); }
.song-name { font-weight:700; font-size:1.08rem; line-height:1.45; overflow-wrap:anywhere; }
.song-title { color:var(--ink); text-decoration:none; }
a.song-title:hover { text-decoration:underline; }
.title-ja { display:block; font-weight:400; font-size:.78rem; color:var(--muted); margin-top:2px; }
.song .artist { color:var(--muted); font-size:.85rem; margin-top:4px; overflow-wrap:anywhere; }
.song .reason { color:#dcd6f2; font-size:.86rem; line-height:1.8; margin-top:10px; }
.listen { display:inline-block; margin-top:12px; font-size:.86rem; font-weight:700; }

.aira { margin:44px auto 0; max-width:560px; text-align:center; padding:26px 24px; border:1px solid rgba(240,122,160,.45); border-radius:16px; background:rgba(42,31,69,.7); }
.aira h2 { font-family:var(--mincho); font-weight:700; font-size:1.7rem; letter-spacing:.12em; color:var(--rose); margin:0 0 10px; }
.aira p { margin:6px 0; }
.aira-song a { color:var(--ink); font-weight:700; font-size:1.05rem; }
.aira-lang { display:block; color:var(--muted); font-size:.8rem; margin-top:2px; }
.aira-lp a { font-weight:700; font-size:.9rem; }

footer { padding:28px 20px 42px; text-align:center; color:var(--muted); font-size:.78rem; }
footer p { margin:4px 0; }

/* スマホ: 画像内の小さい説明文が読めないため、同じ文を画像の下に出す */
@media (max-width:640px) {
  .hero-sub { display:block; margin:0; padding:4px 18px 0; text-align:center; font-size:.86rem; line-height:1.8; color:var(--muted); background:var(--night); }
  main { padding:4px 16px 28px; }
  .date { margin-top:14px; }
  .toolbar { justify-content:flex-start; }
  .toolbar label { width:100%; }
}