/* XYOU Phase1 prototype — 夕焼け→星空パステル配色（試作案3準拠） */

:root {
  --sunset-1: #ffe3b0;
  --sunset-2: #ffc2c9;
  --dusk-1: #e2b3e8;
  --dusk-2: #b3a0e6;
  --night-1: #8188cf;
  --night-2: #4d5292;
  --night-3: #33366b;
  --cream: #fffaf0;
  --ink: #3a2f4d;
  --gold: #ffd76a;
  --pink-accent: #ff8fab;
  --card-bg: #fffaf3;
  --font: "Hiragino Maru Gothic ProN", "Hiragino Sans", "YuGothic", "Yu Gothic",
    system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 1ビュー完結・下スクロールさせない */
  background: var(--night-3);
  font-family: var(--font);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

button, input {
  font-family: inherit;
}

.app {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

/* ---------- 画面切替 ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.screen.active {
  display: flex;
  animation: screen-fade-in 0.5s ease both;
}

@keyframes screen-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- 背景（夕焼け→星空グラデーション） ---------- */
.bg-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    165deg,
    var(--sunset-1) 0%,
    var(--sunset-2) 20%,
    var(--dusk-1) 40%,
    var(--dusk-2) 58%,
    var(--night-1) 76%,
    var(--night-2) 90%,
    var(--night-3) 100%
  );
  overflow: hidden;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fffdf5;
  box-shadow: 0 0 6px 1px rgba(255, 253, 245, 0.9);
  animation: twinkle 2.6s ease-in-out infinite;
}
.st1 { top: 12%; left: 18%; animation-delay: 0s; }
.st2 { top: 22%; left: 76%; animation-delay: 0.4s; width: 2px; height: 2px; }
.st3 { top: 34%; left: 46%; animation-delay: 0.9s; }
.st4 { top: 48%; left: 12%; animation-delay: 1.3s; width: 2px; height: 2px; }
.st5 { top: 58%; left: 84%; animation-delay: 0.6s; }
.st6 { top: 40%; left: 62%; animation-delay: 1.7s; width: 2px; height: 2px; }

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* 月：入力画面からは削除。孵化/結果画面のみ従来どおり表示する */
.moon--hatch,
.moon--result {
  position: absolute;
  top: 9%;
  right: 12%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow:
    -14px 0 0 -2px var(--night-3) inset,
    0 0 24px 6px rgba(255, 215, 106, 0.55);
}

/* ---------- 共通コンテンツラッパ ---------- */
.content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 6vh, 40px) 24px;
  height: 100%;
  overflow: hidden;
}

.content--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ===================== 画面1: 入力 ===================== */
#screen-input .bg-scene {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.55) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 90% 42%, rgba(255,255,255,.42) 0 2px, transparent 3px),
    radial-gradient(circle at 7% 53%, rgba(255,255,255,.45) 0 1.5px, transparent 2.5px),
    linear-gradient(165deg,
      var(--sunset-1) 0%,
      var(--sunset-2) 18%,
      var(--dusk-1) 37%,
      var(--dusk-2) 56%,
      var(--night-1) 75%,
      var(--night-2) 90%,
      var(--night-3) 100%);
}

.top-content {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  padding:
    max(6px, env(safe-area-inset-top))
    14px
    max(7px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  align-content: center;
  gap: clamp(4px, .72vh, 7px);
  overflow: hidden;
}

.top-brand {
  text-align: center;
  color: var(--cream);
}

.top-logo {
  margin: 0;
  font-size: clamp(29px, 8.5vw, 40px);
  line-height: .92;
  font-weight: 900;
  letter-spacing: .07em;
  text-shadow: 0 3px 0 rgba(0,0,0,.11), 0 0 20px rgba(255,215,106,.62);
}

.top-logo-sub {
  display: inline-block;
  margin-left: 7px;
  font-size: 9px;
  letter-spacing: .2em;
  opacity: .82;
  vertical-align: .38em;
}

.top-tagline {
  margin: 4px 0 0;
  font-size: clamp(10px, 2.85vw, 12px);
  line-height: 1.25;
  font-weight: 800;
  text-shadow: 0 2px 5px rgba(0,0,0,.18);
}

.top-showcase {
  position: relative;
  height: clamp(174px, 23.6vh, 204px);
  min-height: 0;
}

.top-showcase-title {
  position: absolute;
  z-index: 5;
  top: 2px;
  left: 50%;
  margin: 0;
  padding: 4px 12px;
  transform: translateX(-50%);
  border-radius: 999px;
  white-space: nowrap;
  color: #6b4268;
  background: rgba(255,250,240,.91);
  box-shadow: 0 5px 13px rgba(65,42,83,.16);
  font-size: 11px;
  font-weight: 900;
}

.top-showcase-title::before,
.top-showcase-title::after {
  content: "✦";
  color: var(--gold);
  margin: 0 5px;
}

.top-sample-card {
  position: absolute;
  top: 30px;
  left: 50%;
  margin: 0;
  width: clamp(92px, 27.5vw, 118px);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 3px solid rgba(255,250,240,.96);
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: 0 11px 22px rgba(45,30,70,.34);
  transform-origin: 50% 90%;
}

.top-sample-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.top-sample-a {
  z-index: 1;
  transform: translateX(-135%) rotate(-11deg);
}
.top-sample-b {
  z-index: 3;
  transform: translateX(-50%) translateY(-5px);
}
.top-sample-c {
  z-index: 2;
  transform: translateX(35%) rotate(11deg);
}

.top-flow {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 15px 1fr 15px 1fr;
  align-items: center;
  height: clamp(70px, 9.6vh, 82px);
  padding: 5px 7px 4px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;
  background: rgba(255,250,243,.88);
  box-shadow: 0 9px 22px rgba(45,30,70,.2);
  backdrop-filter: blur(3px);
}

.top-flow-step {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.top-flow-step svg {
  display: block;
  width: 47px;
  height: 44px;
  overflow: visible;
}

.top-flow-step span {
  font-size: clamp(9px, 2.55vw, 11px);
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.top-flow-arrow {
  position: relative;
  width: 14px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--dusk-2), var(--pink-accent));
}
.top-flow-arrow::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -1px;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-left: 6px solid var(--pink-accent);
}

.top-modes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-height: 0;
}

.top-mode {
  min-width: 0;
  height: clamp(43px, 5.7vh, 50px);
  display: grid;
  grid-template-columns: auto 11px auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 14px;
  background: rgba(255,250,243,.82);
  box-shadow: 0 6px 14px rgba(45,30,70,.16);
}

.top-mode.top-child-mode {
  border-color: rgba(255,143,171,.72);
  background: rgba(255,239,244,.91);
}

.top-account-symbols {
  display: flex;
  align-items: center;
  color: var(--dusk-2);
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -3px;
}
.top-account-symbols b {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  letter-spacing: 0;
}
.top-account-symbols b + b {
  margin-left: -6px;
  color: var(--pink-accent);
}

.top-mode-chevron {
  color: var(--pink-accent);
  font-size: 15px;
  font-weight: 900;
}

.top-mini-result {
  display: flex;
  align-items: center;
  gap: 3px;
}
.top-mini-card {
  width: 18px;
  height: 27px;
  border: 2px solid var(--gold);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 38%, var(--pink-accent) 0 4px, transparent 4.5px),
    linear-gradient(#fff, #f1e7ff);
  box-shadow: 0 2px 5px rgba(58,47,77,.18);
}
.top-child-face {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid var(--pink-accent);
  border-radius: 45% 45% 50% 50%;
  background: #fff3d1;
}
.top-child-face::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 6px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--pink-accent);
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px 0 0;
  transform: rotate(38deg);
}

.top-mode-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}
.top-mode-copy small {
  color: #887997;
  font-size: 8px;
  font-weight: 800;
}
.top-mode-copy strong {
  color: var(--ink);
  font-size: 9px;
  line-height: 1;
}
.top-child-mode .top-mode-copy strong {
  color: #9a3e60;
}

.top-input-form {
  display: grid;
  gap: clamp(5px, .65vh, 7px);
  min-height: 0;
  padding: clamp(9px, 1.2vh, 12px);
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 20px;
  background: rgba(255,250,243,.94);
  box-shadow: 0 12px 28px rgba(45,30,70,.27);
  backdrop-filter: blur(3px);
}

.top-field {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.top-field-label {
  font-size: clamp(10px, 2.8vw, 12px);
  line-height: 1.1;
  font-weight: 800;
}
.top-field-label b {
  color: var(--pink-accent);
}
.top-field-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--dusk-2);
  font-size: 8px;
  vertical-align: 1px;
}

.top-field-optional {
  position: relative;
  padding-top: 5px;
  border-top: 1px dashed rgba(255,143,171,.55);
}
.top-field-optional::after {
  content: "2人モード";
  position: absolute;
  top: 4px;
  right: 0;
  padding: 1px 6px;
  border-radius: 999px;
  color: #9a3e60;
  background: #ffe7ee;
  font-size: 8px;
  font-weight: 900;
}

.top-field-input-wrap {
  height: clamp(34px, 4.5vh, 39px);
  display: flex;
  align-items: center;
  padding: 0 11px;
  border: 2px solid rgba(179,160,230,.35);
  border-radius: 12px;
  background: #fff;
}
.top-field-input-wrap:focus-within {
  border-color: var(--pink-accent);
  box-shadow: 0 0 0 3px rgba(255,143,171,.13);
}
.top-at-mark {
  margin-right: 3px;
  color: var(--dusk-2);
  font-size: 14px;
  font-weight: 900;
}
.top-field-input-wrap input {
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
}
.top-field-input-wrap input::placeholder {
  color: #b9b0c8;
}
.top-field-hint {
  color: #91859f;
  font-size: 8.5px;
  line-height: 1;
}

.top-input-error {
  margin: 0;
  padding: 4px 8px;
  border: 1px solid rgba(255, 143, 171, 0.65);
  border-radius: 8px;
  background: rgba(255, 226, 232, 0.75);
  color: #7a3548;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.top-input-error[hidden] {
  display: none;
}

.btn {
  border: none;
  cursor: pointer;
  border-radius: 999px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.top-btn-start {
  position: relative;
  height: clamp(40px, 5.3vh, 46px);
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: #4a2a10;
  background: linear-gradient(135deg, var(--gold), #ffb463);
  box-shadow:
    0 8px 18px rgba(255,180,99,.48),
    0 0 0 0 rgba(255,215,106,.52);
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  animation: top-button-pulse 2.2s ease-in-out infinite;
}
.top-btn-start::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -35%;
  width: 25%;
  height: 180%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.84), transparent);
  animation: top-button-shine 2.7s ease-in-out infinite;
}
.top-btn-start::after {
  content: "✦";
  margin-left: 7px;
  color: #fff7cf;
  text-shadow: 0 0 7px #fff;
}
.top-btn-start:active {
  transform: translateY(1px) scale(.99);
}
.top-btn-start:disabled {
  cursor: wait;
  filter: grayscale(.2);
  opacity: .72;
}

.top-oauth-note {
  margin: 1px 4px 0;
  color: #756b80;
  font-size: 9px;
  line-height: 1.4;
  text-align: center;
}
.top-oauth-note strong {
  color: #6b3d56;
  font-weight: 900;
}

@keyframes top-button-pulse {
  0%, 100% { box-shadow: 0 8px 18px rgba(255,180,99,.48), 0 0 0 0 rgba(255,215,106,.42); }
  50% { box-shadow: 0 10px 23px rgba(255,180,99,.62), 0 0 0 6px rgba(255,215,106,0); }
}
@keyframes top-button-shine {
  0%, 60% { left: -35%; }
  85%, 100% { left: 115%; }
}

@media (max-height: 760px) {
  .top-showcase { height: 166px; }
  .top-sample-card { width: 91px; }
  .top-flow { height: 67px; }
  .top-flow-step svg { width: 42px; height: 39px; }
  .top-mode { height: 41px; }
  .top-content { gap: 3px; }
  .top-input-form { gap: 4px; padding: 8px 10px; }
  .top-field-input-wrap { height: 32px; }
  .top-btn-start { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-input,
  #screen-input *,
  #screen-input *::before,
  #screen-input *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===================== 画面2: 孵化待ち ===================== */
.egg-scene {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.egg-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 179, 0.55), rgba(255, 236, 179, 0) 70%);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.egg {
  position: relative;
  width: 128px;
  height: 156px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 40%),
    linear-gradient(160deg, #fffaf0, #ffe6c2 60%, #ffd39a 100%);
  box-shadow:
    inset 0 -10px 18px rgba(255, 170, 90, 0.35),
    0 12px 22px rgba(60, 30, 20, 0.28);
  transform: rotate(0deg);
  transform-origin: 50% 85%;
  transition: filter 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
  z-index: 1;
}

.egg-face {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 70%, rgba(255, 210, 150, 0.5), transparent 35%),
    radial-gradient(circle at 68% 40%, rgba(255, 255, 255, 0.4), transparent 30%);
  border-radius: inherit;
}

.egg-crack {
  position: absolute;
  opacity: 0;
  background: #a8703f;
  transition: opacity 0.3s ease;
}

.crack-1 {
  top: 38%;
  left: 30%;
  width: 40px;
  height: 3px;
  clip-path: polygon(0% 50%, 20% 0%, 40% 60%, 60% 10%, 80% 55%, 100% 15%, 100% 45%, 80% 85%, 60% 40%, 40% 90%, 20% 30%, 0% 80%);
  transform: rotate(12deg);
}
.crack-2 {
  top: 55%;
  left: 55%;
  width: 30px;
  height: 3px;
  clip-path: polygon(0% 50%, 25% 0%, 50% 60%, 75% 10%, 100% 55%, 100% 90%, 70% 40%, 45% 90%, 20% 30%, 0% 80%);
  transform: rotate(-20deg);
}
.crack-3 {
  top: 25%;
  left: 48%;
  width: 24px;
  height: 3px;
  clip-path: polygon(0% 50%, 30% 0%, 60% 60%, 100% 10%, 100% 60%, 60% 100%, 30% 40%, 0% 90%);
  transform: rotate(30deg);
}

.burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px 2px rgba(255, 215, 106, 0.9);
  opacity: 0;
}

.sp1 { --tx: -70px; --ty: -60px; }
.sp2 { --tx: 70px; --ty: -60px; }
.sp3 { --tx: -90px; --ty: 10px; }
.sp4 { --tx: 90px; --ty: 10px; }
.sp5 { --tx: -50px; --ty: 70px; }
.sp6 { --tx: 50px; --ty: 70px; }

/* ---- 段階演出: ゆらゆら → ヒビ → 光る → 孵化 ---- */

/* stage-crack: より激しく揺れる + ヒビが見える */
.egg.stage-crack {
  animation: egg-shake 0.45s ease-in-out infinite;
}
.egg.stage-crack .egg-crack {
  opacity: 1;
}

@keyframes egg-shake {
  0%, 100% { transform: rotate(-1.5deg); }
  25% { transform: rotate(1.5deg); }
  50% { transform: rotate(-1.25deg); }
  75% { transform: rotate(1.25deg); }
}

/* stage-glow: 光る */
.egg.stage-glow {
  filter: brightness(1.12) saturate(1.1);
}
.stage-glow + .burst,
.egg-scene .egg-glow {
  /* handled via JS class on egg-glow element directly */
}
#egg-glow.is-glowing {
  opacity: 1;
  transform: scale(1.15);
  animation: glow-pulse 1s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1.05); }
  50% { opacity: 0.95; transform: scale(1.25); }
}

/* stage-hatch: 孵化の瞬間 */
.egg.stage-hatch {
  animation: egg-hatch-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes egg-hatch-pop {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.18) rotate(-3deg); }
  60% { transform: scale(0.9) rotate(2deg); opacity: 1; }
  100% { transform: scale(0.2) rotate(0); opacity: 0; }
}

.stage-hatch ~ .burst .spark,
.egg-scene.is-bursting .spark {
  animation: spark-fly 0.9s ease-out forwards;
}

@keyframes spark-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(0.4); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.1); }
}

.hatch-caption {
  margin: 0;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 800;
  color: var(--cream);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  min-height: 1.6em;
}

.hatch-dots {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.hatch-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cream);
  opacity: 0.8;
  animation: dot-bounce 1.2s ease-in-out infinite;
}
.hatch-dots span:nth-child(2) { animation-delay: 0.15s; }
.hatch-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* ===================== 画面3: リザルト ===================== */
.content--result {
  justify-content: center;
  padding: 10px 12px;
}

.result-card {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 350px;
  background: var(--card-bg);
  border-radius: 22px;
  padding: 10px 12px;
  box-shadow: 0 18px 40px rgba(30, 20, 55, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-height: 100%;
  overflow: hidden;
}

.result-card-frame {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 2 / 3;
  flex: 0 1 auto;
  border-radius: 14px;
  overflow: hidden;
  background: var(--night-1);
  box-shadow: 0 5px 14px rgba(30, 20, 55, 0.24);
}

.result-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.result-warning {
  width: 100%;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.4;
  font-weight: 700;
  color: #7a3b1d;
  background: rgba(255, 199, 130, 0.35);
  border: 1px solid rgba(255, 180, 99, 0.6);
  border-radius: 10px;
  padding: 6px 10px;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.result-warning.is-saved {
  color: #1e5c3a;
  background: rgba(150, 220, 170, 0.35);
  border-color: rgba(110, 200, 140, 0.6);
}

.result-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.btn-save {
  padding: 10px 18px;
  font-size: 14px;
  color: #4a2a10;
  background: linear-gradient(135deg, var(--gold), #ffb463);
  box-shadow: 0 8px 16px rgba(255, 180, 99, 0.4);
}

.btn-save-icon {
  font-weight: 900;
}

.btn-share {
  padding: 10px 18px;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, #2b2b38, #000);
}

.btn-share-icon {
  font-weight: 900;
}

.btn-ghost {
  padding: 8px 18px;
  font-size: 12.5px;
  color: var(--ink);
  background: transparent;
  border: 2px solid rgba(179, 160, 230, 0.5);
}

.save-hint {
  margin: 2px 0 0;
  text-align: center;
  font-size: 10px;
  color: #9a8fae;
}

/* ---------- 小さい画面での余白調整 ---------- */
@media (max-height: 700px) {
  .content { padding-top: 16px; padding-bottom: 16px; }
  .content--result { padding-top: 6px; padding-bottom: 6px; }
  .egg-scene { width: 180px; height: 180px; margin-bottom: 14px; }
  .egg { width: 104px; height: 128px; }
  .result-card-frame { width: min(100%, 248px); }
}