/* 由奈占い v0.1.10 */
:root {
  --yuna-bg: #fff7fb;
  --yuna-bg-2: #f7f0ff;
  --yuna-card: rgba(255,255,255,0.86);
  --yuna-main: #d86ba8;
  --yuna-sub: #8a6bd8;
  --yuna-text: #3e3242;
  --yuna-muted: #74677a;
  --yuna-line: rgba(216,107,168,0.22);
  --yuna-shadow: 0 18px 48px rgba(130, 84, 150, 0.16);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--yuna-text);
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 205, 230, 0.9), transparent 32%),
    radial-gradient(circle at 90% 12%, rgba(218, 205, 255, 0.95), transparent 34%),
    linear-gradient(135deg, var(--yuna-bg), var(--yuna-bg-2));
}
.yuna-app { width: min(1080px, calc(100% - 24px)); margin: 0 auto; padding: 28px 0 42px; }
.yuna-hero { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 18px; align-items: stretch; }
.yuna-card {
  background: var(--yuna-card);
  border: 1px solid var(--yuna-line);
  box-shadow: var(--yuna-shadow);
  border-radius: 24px;
  padding: 22px;
  backdrop-filter: blur(10px);
}
.yuna-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--yuna-line); background: rgba(255,255,255,0.72); color: var(--yuna-sub); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
h1 { margin: 14px 0 10px; font-size: clamp(30px, 6vw, 56px); letter-spacing: 0.04em; line-height: 1.05; }
.yuna-lead { margin: 0; color: var(--yuna-muted); line-height: 1.9; }
.yuna-orb { min-height: 220px; display: grid; place-items: center; position: relative; overflow: hidden; }
.yuna-orb::before { content: ""; width: 158px; height: 158px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffd8eb 38%, #b99df0 72%, #8a6bd8); box-shadow: 0 0 42px rgba(216,107,168,0.42); animation: pulse 3.2s ease-in-out infinite; }
.yuna-orb span { position: absolute; font-size: 18px; color: #fff; font-weight: 800; text-shadow: 0 2px 12px rgba(76,46,120,0.35); }
@keyframes pulse { 0%,100% { transform: scale(0.98); } 50% { transform: scale(1.04); } }
.yuna-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.yuna-result-title { margin: 8px 0 12px; font-size: 26px; }
.yuna-result-text { white-space: pre-wrap; line-height: 1.95; font-size: 16px; }
.yuna-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
button, .yuna-link-button { border: 0; border-radius: 999px; padding: 11px 16px; font-weight: 800; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.yuna-primary { background: linear-gradient(135deg, var(--yuna-main), var(--yuna-sub)); color: #fff; }
.yuna-secondary { background: rgba(255,255,255,0.84); color: var(--yuna-sub); border: 1px solid var(--yuna-line); }
.yuna-small { font-size: 13px; color: var(--yuna-muted); }
.yuna-list { margin: 0; padding-left: 18px; line-height: 1.9; color: var(--yuna-muted); }
.yuna-form { display: grid; gap: 12px; }
.yuna-field { display: grid; gap: 6px; }
.yuna-field label { font-weight: 800; font-size: 13px; }
.yuna-field input, .yuna-field select, .yuna-field textarea { width: 100%; border: 1px solid var(--yuna-line); border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,0.86); color: var(--yuna-text); }
.yuna-field textarea { min-height: 84px; resize: vertical; }
.yuna-footer { text-align: center; color: var(--yuna-muted); font-size: 12px; margin-top: 22px; }
@media (max-width: 820px) { .yuna-hero, .yuna-grid { grid-template-columns: 1fr; } .yuna-app { padding-top: 16px; } }


.yuna-help { display: block; color: var(--yuna-muted); font-size: 12px; line-height: 1.6; }
.yuna-status { margin: 12px 0 16px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.68); border: 1px solid var(--yuna-line); color: var(--yuna-sub); font-weight: 700; }
.yuna-usage { margin: 14px 0 18px; padding: 14px 16px; border: 1px solid var(--yuna-line); border-radius: 18px; background: rgba(255,255,255,0.56); }
.yuna-usage h3 { margin: 0 0 8px; font-size: 16px; }
.yuna-usage ul { margin: 0; padding-left: 18px; color: var(--yuna-muted); line-height: 1.8; }


.yuna-photo-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.yuna-guide-card { border: 1px solid var(--yuna-line); background: rgba(255,255,255,0.62); border-radius: 18px; padding: 14px; }
.yuna-guide-card img { width: 100%; height: auto; border-radius: 14px; display: block; background: #fff; }
.yuna-guide-card h3 { margin: 12px 0 8px; font-size: 17px; }
.yuna-guide-card ul { margin: 0; padding-left: 18px; color: var(--yuna-muted); line-height: 1.75; }
.yuna-palm-form { border: 1px solid var(--yuna-line); background: rgba(255,255,255,0.58); border-radius: 18px; padding: 16px; }
.yuna-palm-form h3 { margin: 0 0 8px; font-size: 18px; }
@media (max-width: 820px) { .yuna-photo-guide { grid-template-columns: 1fr; } }

.yuna-site-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(127, 93, 211, 0.45);
}
.yuna-site-link:hover {
  border-bottom-color: rgba(127, 93, 211, 0.95);
}
.yuna-share-actions {
  align-items: center;
}
.yuna-share-card {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--yuna-line);
  border-radius: 20px;
  background: rgba(255,255,255,0.62);
}
.yuna-share-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.yuna-share-head h3 {
  margin: 0;
  font-size: 18px;
}
.yuna-share-head span {
  color: var(--yuna-muted);
  font-size: 12px;
}
.yuna-share-card .yuna-actions {
  margin-top: 0;
}
.yuna-share-button {
  min-width: 76px;
}
@media (max-width: 560px) {
  .yuna-share-head { display: block; }
  .yuna-share-head span { display: block; margin-top: 4px; }
  .yuna-share-button { min-width: calc(50% - 5px); }
}

.yuna-palm-locked {
  opacity: 0.72;
}
.yuna-palm-locked input,
.yuna-palm-locked button {
  cursor: not-allowed;
}

/* v0.1.9 水晶ステータス */
.yuna-orb {
  min-height: 260px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.yuna-orb::before { content: none; }
.yuna-orb-ball {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, #ffd8eb 38%, #b99df0 72%, #8a6bd8);
  box-shadow: 0 0 42px rgba(216,107,168,0.42);
  animation: pulse 3.2s ease-in-out infinite;
}
.yuna-orb-ball span {
  position: static;
  font-size: 15px;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(76,46,120,0.35);
  text-align: center;
  padding: 0 12px;
}
.yuna-orb-info { width: 100%; }
.yuna-orb-info h2 { margin: 4px 0 8px; font-size: 22px; }
.yuna-orb-info p { margin: 0 0 10px; line-height: 1.7; color: var(--yuna-muted); }
.yuna-orb.is-active .yuna-orb-ball { box-shadow: 0 0 48px rgba(216,107,168,0.55), 0 0 88px rgba(138,107,216,0.28); }
.yuna-orb.is-needs-status .yuna-orb-ball { filter: grayscale(0.12); opacity: 0.82; }
.yuna-orb.is-sleeping .yuna-orb-ball { background: radial-gradient(circle at 35% 30%, #fff, #e9e2f6 44%, #a99cc6 74%, #6f6690); box-shadow: 0 0 24px rgba(108,94,132,0.22); animation-duration: 5.4s; }
.yuna-orb.is-charged .yuna-orb-ball { background: radial-gradient(circle at 35% 30%, #fff, #ffe1f1 34%, #d49bef 62%, #8a6bd8); box-shadow: 0 0 54px rgba(216,107,168,0.62), 0 0 96px rgba(255,210,235,0.42); }
.yuna-score-meter {
  height: 8px;
  width: 100%;
  border-radius: 999px;
  background: rgba(138,107,216,0.12);
  overflow: hidden;
  margin-top: 8px;
}
.yuna-score-meter > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(135deg, var(--yuna-main), var(--yuna-sub));
  border-radius: inherit;
}
@media (max-width: 820px) {
  .yuna-orb { grid-template-columns: 1fr; text-align: center; }
}