/* 全ページ共通 — 銀河の背景とガラス質感 */

:root {
  --bg: #101733;
  --panel: rgba(17, 24, 54, .84);
  --ink: #f7f4ff;
  --ink-soft: #cbc7dc;
  --ink-faint: #9996ae;
  --line: rgba(198, 201, 255, .19);
  --accent: #b7c4ff;
  --on-accent: #0D1330;
  --accent-soft: rgba(117, 105, 187, .19);
  --warm: #f4ad7a;
  --warm-soft: rgba(187, 99, 76, .18);
  --shadow: 0 18px 55px rgba(0, 0, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .035);
  --galaxy-x: 0px;
  --galaxy-y: 0px;
  color-scheme: dark;
}

html { background: #03050f; }

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 14% 5%, rgba(93, 79, 177, .48) 0, rgba(47, 42, 112, .22) 24%, transparent 51%),
    radial-gradient(ellipse at 88% 22%, rgba(42, 129, 178, .31) 0, rgba(32, 65, 126, .14) 27%, transparent 55%),
    radial-gradient(ellipse at 48% 91%, rgba(141, 61, 145, .27) 0, rgba(58, 33, 93, .11) 33%, transparent 61%),
    linear-gradient(148deg, #03050f 0%, #081027 38%, #10102f 68%, #070817 100%) !important;
  background-attachment: fixed !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
}

body::before {
  opacity: .78;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.86) 0 1px, transparent 1.35px),
    radial-gradient(circle, rgba(185,216,255,.62) 0 1.15px, transparent 1.55px),
    radial-gradient(circle, rgba(255,203,236,.46) 0 .9px, transparent 1.35px),
    radial-gradient(circle, rgba(255,255,255,.2) 0 1px, transparent 1.45px);
  background-size: 47px 47px, 89px 89px, 137px 137px, 23px 23px;
  background-position: 3px 9px, 21px 37px, 73px 11px, 5px 15px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.9) 62%, rgba(0,0,0,.42) 100%);
  animation: galaxy-star-drift 70s linear infinite;
}

body::after {
  inset: -20%;
  opacity: .8;
  background:
    radial-gradient(ellipse at 26% 37%, rgba(110, 82, 205, .2), transparent 30%),
    radial-gradient(ellipse at 70% 31%, rgba(50, 162, 201, .15), transparent 27%),
    radial-gradient(ellipse at 59% 75%, rgba(220, 89, 184, .12), transparent 30%);
  filter: blur(42px) saturate(1.3);
  transform: translate(var(--galaxy-x), var(--galaxy-y));
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
  animation: galaxy-nebula-breathe 12s ease-in-out infinite alternate;
}

body > .wrap,
body > main,
body > header,
body > footer { position: relative; z-index: 2; }
body > .ambient { z-index: 1; opacity: .68; }

.galaxy-fx {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.galaxy-constellation-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .82;
  transform: translate(calc(var(--galaxy-x) * .32), calc(var(--galaxy-y) * .32));
  transition: transform 1.6s cubic-bezier(.2,.8,.2,1), opacity .8s ease;
}
.galaxy-sky-badge {
  position: fixed;
  right: clamp(14px, 2.4vw, 30px);
  bottom: clamp(14px, 2.4vw, 28px);
  display: grid;
  gap: 3px;
  padding: 9px 12px 8px;
  border: 1px solid rgba(190, 209, 255, .16);
  border-radius: 13px;
  color: rgba(232, 238, 255, .72);
  background: rgba(5, 9, 27, .38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 35px rgba(0,0,20,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .14em;
  text-align: right;
  opacity: .74;
}
.galaxy-sky-season { font-weight: 700; }
.galaxy-sky-names {
  color: rgba(201, 211, 242, .58);
  font-size: 8px;
  letter-spacing: .08em;
}
[data-sky-phase="day"] .galaxy-constellation-sky { opacity: .62; }
[data-sky-phase="day"] .galaxy-sky-badge { opacity: .55; }
[data-sky-phase="twilight"] .galaxy-constellation-sky { opacity: .68; }
.galaxy-shooting-star {
  position: absolute;
  top: var(--shoot-top);
  left: var(--shoot-left);
  width: 92px;
  height: 1px;
  opacity: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(220,235,255,.95));
  box-shadow: 26px 0 8px rgba(174,211,255,.45);
  transform: rotate(-28deg);
  animation: galaxy-shoot var(--shoot-speed) ease-in var(--shoot-delay) infinite;
}
.galaxy-shooting-star::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 13px #b9dcff;
}

.panel,
.card,
.lead-box,
.pitch,
.fold,
.read,
.gap,
.half,
.big,
.rel,
.person,
.thbox,
.cmp,
.quick-detail,
.quick-year,
.y-highlight,
.minor a {
  backdrop-filter: blur(16px) saturate(1.13);
  -webkit-backdrop-filter: blur(16px) saturate(1.13);
  box-shadow: var(--shadow);
}

.panel,
.card,
.lead-box,
.fold,
.read,
.gap,
.half,
.big,
.rel,
.person,
.thbox,
.cmp,
.quick-detail,
.minor a {
  border-color: var(--line) !important;
}

input,
select,
textarea,
button {
  accent-color: var(--accent);
}
input[type="date"],
input[type="number"],
input[type="text"],
select,
textarea {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

a { text-underline-offset: .2em; }
::selection { background: rgba(169, 180, 255, .32); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #080c1d; }
::-webkit-scrollbar-thumb {
  border: 2px solid #080c1d;
  border-radius: 999px;
  background: linear-gradient(#586aaa, #7c568e);
}

@keyframes galaxy-star-drift {
  from { background-position: 3px 9px, 21px 37px, 73px 11px, 5px 15px; }
  to { background-position: 244px 132px, -176px 218px, 348px -181px, -92px 206px; }
}
@keyframes galaxy-nebula-breathe {
  from { opacity: .58; scale: .98; }
  to { opacity: .93; scale: 1.04; }
}
@keyframes galaxy-shoot {
  0%, 82% { opacity: 0; translate: -12vw -8vh; }
  84% { opacity: 1; }
  91% { opacity: 0; translate: 58vw 38vh; }
  100% { opacity: 0; translate: 58vw 38vh; }
}

@media (max-width: 620px) {
  body::before { opacity: .65; }
  body::after { filter: blur(28px) saturate(1.2); }
  .galaxy-shooting-star { width: 62px; }
  .galaxy-sky-badge {
    right: 10px;
    bottom: 10px;
    max-width: calc(100vw - 20px);
    padding: 7px 9px;
    opacity: .58;
  }
  .galaxy-sky-names { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .galaxy-shooting-star { animation: none !important; }
  body::after { transform: none !important; }
  .galaxy-shooting-star { display: none; }
  .galaxy-constellation-sky { transform: none !important; }
}

/* ---- 結果を1枚の画像にして持ち出す（診断ページ共通） ---- */

.share { margin: 26px 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.card-btn {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 12px 26px; border-radius: 9px; border: 0;
  color: var(--on-accent, #fff); background: var(--accent);
}
.card-btn:hover { filter: brightness(1.07); }
.share .note { flex-basis: 100%; margin: 0; }
.share .said { font-size: 12.5px; color: var(--ink-soft); }