/* ============================================================
   手相Navi — 「月と手のひら」 refined-mystique design system
   Rebuilt 2026-07-09. Midnight-indigo + champagne-gold.
   v2 2026-07-11: 3D celestial layer — WebGL cosmos / armillary
   hero medallion / interactive card tilt / depth reveals.
   All class/ID hooks used by diagnosis.js are preserved.
   ============================================================ */

:root{
  --bg:#0b0a1e;
  --bg-2:#100e26;
  --ink:#f4efe3;
  --text:#e6e0d2;
  --muted:#9c96ab;
  --muted-2:#bcb5c9;

  --gold:#d8b978;
  --gold-bright:#efd9a4;
  --gold-deep:#b08951;
  --gold-line:rgba(216,185,120,.26);
  --gold-line-soft:rgba(216,185,120,.16);

  --amethyst:#9a86c4;
  --amethyst-2:#b3a2d8;
  --amethyst-soft:rgba(154,134,196,.14);

  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.055);
  --hair:rgba(255,255,255,.09);

  /* four palm lines — muted jewel tones (no neon) */
  --line-life:#84b79a;
  --line-heart:#d98aa8;
  --line-head:#8fa9d6;
  --line-fate:#d8b978;

  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","Songti SC",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,system-ui,sans-serif;

  --radius:16px;
  --radius-lg:22px;
  --shadow:0 20px 50px -22px rgba(0,0,0,.75);
  --shadow-sm:0 10px 26px -14px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  min-height:100vh;
  overflow-x:hidden;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* calm layered aura — replaces the old neon blobs */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(216,185,120,.09), transparent 56%),
    radial-gradient(100% 70% at 50% 112%, rgba(154,134,196,.12), transparent 60%),
    radial-gradient(60% 46% at 84% 16%, rgba(154,134,196,.07), transparent 60%),
    linear-gradient(180deg, #0b0a1e 0%, #0d0b22 100%);
}
/* faint starfield */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 28% 62%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.2px 1.2px at 46% 14%, rgba(239,217,164,.6), transparent),
    radial-gradient(1px 1px at 66% 40%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.4px 1.4px at 82% 24%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 90% 66%, rgba(179,162,216,.6), transparent),
    radial-gradient(1px 1px at 20% 86%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.2px 1.2px at 72% 82%, rgba(239,217,164,.45), transparent);
}

/* ---------- inline SVG icon system ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{
  width:1em;height:1em;display:inline-block;vertical-align:-.15em;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none;
}

/* ---------- progress ---------- */
.scroll-progress-bar{background:linear-gradient(90deg,var(--gold),var(--amethyst))!important}
.progress-bar{position:fixed;top:0;left:0;right:0;height:2px;background:rgba(216,185,120,.16);z-index:100}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));transition:width .45s ease;width:0%}

/* ---------- stage ---------- */
#app{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:44px 18px 60px}
.screen{display:none;width:100%;max-width:482px;flex-direction:column;animation:fadeUp .5s cubic-bezier(.22,1,.36,1)}
.screen.active{display:flex}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ============================================================
   SCREEN 0 — WELCOME
   ============================================================ */
.welcome-wrap{display:flex;flex-direction:column;align-items:center;text-align:center}

.brand-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;letter-spacing:.22em;color:var(--gold-bright);
  border:1px solid var(--gold-line);border-radius:999px;
  padding:6px 18px;margin-bottom:26px;background:rgba(216,185,120,.05);
}
.brand-tag .ic{font-size:.82rem;color:var(--gold)}

/* hand emblem — 3D armillary medallion (v2)
   .welcome-hand = perspective stage / .orb-scene = preserve-3d body
   tilts toward the pointer via --hx/--hy (set by moon3d.js) */
.welcome-hand{
  position:relative;width:196px;height:196px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;line-height:0;
  perspective:820px;animation:floaty 6.5s ease-in-out infinite;
}
.orb-scene{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;
  transform:rotateX(calc(var(--hy,0)*1deg)) rotateY(calc(var(--hx,0)*1deg));
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.orb-scene.is-live{transition:transform .12s linear}
/* moon disc floating behind the hand */
.orb-moon{
  position:absolute;width:128px;height:128px;border-radius:50%;
  transform:translateZ(-52px);
  background:
    radial-gradient(circle at 34% 30%, rgba(244,239,227,.32), rgba(216,185,120,.14) 44%, rgba(154,134,196,.10) 70%, transparent 76%),
    radial-gradient(circle at 66% 68%, rgba(154,134,196,.16), transparent 58%);
  box-shadow:0 0 46px 6px rgba(216,185,120,.16), inset -14px -10px 34px rgba(11,10,30,.55);
}
/* halo glow on the stage itself */
.welcome-hand::before{
  content:"";position:absolute;inset:8px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(216,185,120,.18), rgba(154,134,196,.08) 55%, transparent 74%);
}
/* armillary rings — each spins in its own tilted plane */
.orb-ring{
  position:absolute;inset:14px;border-radius:50%;
  transform-style:preserve-3d;pointer-events:none;
  border:1px solid rgba(216,185,120,.42);
  box-shadow:0 0 14px -6px rgba(216,185,120,.55), inset 0 0 14px -8px rgba(216,185,120,.5);
}
/* a small gold bead riding each ring */
.orb-ring::before{
  content:"";position:absolute;top:-3px;left:50%;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--gold-bright);
  box-shadow:0 0 8px 2px rgba(239,217,164,.75);
}
.ring-a{animation:ringA 14s linear infinite}
.ring-b{inset:4px;border-color:rgba(154,134,196,.4);animation:ringB 21s linear infinite}
.ring-b::before{background:var(--amethyst-2);box-shadow:0 0 8px 2px rgba(179,162,216,.7)}
.ring-c{inset:26px;border-color:rgba(216,185,120,.28);animation:ringC 9.5s linear infinite}
@keyframes ringA{from{transform:rotateX(74deg) rotateZ(0)}to{transform:rotateX(74deg) rotateZ(360deg)}}
@keyframes ringB{from{transform:rotateX(66deg) rotateY(-24deg) rotateZ(360deg)}to{transform:rotateX(66deg) rotateY(-24deg) rotateZ(0)}}
@keyframes ringC{from{transform:rotateX(80deg) rotateY(18deg) rotateZ(0)}to{transform:rotateX(80deg) rotateY(18deg) rotateZ(360deg)}}
/* free-floating star motes at different depths */
.orb-star{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--gold-bright);box-shadow:0 0 9px 2px rgba(239,217,164,.6);
  pointer-events:none;
}
.os-1{top:16%;left:12%;transform:translateZ(44px);animation:mote 5s ease-in-out infinite}
.os-2{top:24%;right:8%;width:3px;height:3px;background:var(--amethyst-2);box-shadow:0 0 8px 2px rgba(179,162,216,.55);transform:translateZ(64px);animation:mote 6.4s ease-in-out .8s infinite}
.os-3{bottom:18%;left:18%;width:3px;height:3px;transform:translateZ(30px);animation:mote 7.2s ease-in-out 1.6s infinite}
.os-4{bottom:26%;right:14%;transform:translateZ(-30px);opacity:.7;animation:mote 5.8s ease-in-out 2.4s infinite}
@keyframes mote{0%,100%{opacity:.4;margin-top:0}50%{opacity:1;margin-top:-7px}}
/* the hand itself pops out of the scene */
.hand-emblem{
  position:relative;width:74px;height:74px;color:var(--gold-bright);
  transform:translateZ(40px);
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(216,185,120,.28));
}
.hand-emblem .ic{width:100%;height:100%;stroke-width:1.4}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.welcome-title{
  font-family:var(--serif);font-weight:600;
  font-size:2.15rem;line-height:1.4;letter-spacing:.03em;
  color:var(--ink);margin-bottom:14px;
}
.welcome-title .accent{color:var(--gold-bright)}
.welcome-sub{font-size:.92rem;color:var(--muted-2);line-height:1.85;margin-bottom:26px}

.welcome-features{list-style:none;width:100%;max-width:320px;margin-bottom:26px;display:flex;flex-direction:column;gap:2px}
.welcome-features li{
  display:flex;align-items:center;gap:13px;padding:12px 6px;
  font-size:.92rem;color:var(--text);border-bottom:1px solid var(--hair);
}
.welcome-features li:last-child{border-bottom:none}
.feat-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:none;border-radius:50%;
  background:var(--amethyst-soft);border:1px solid var(--gold-line-soft);
  color:var(--gold-bright);font-size:1rem;
}
.welcome-disclaimer{font-size:.72rem;color:var(--muted);margin-top:12px;letter-spacing:.04em}

/* optional photo card */
.photo-optional{
  width:100%;background:linear-gradient(180deg,rgba(216,185,120,.07),rgba(216,185,120,.03));
  border:1px solid var(--gold-line);border-radius:var(--radius);
  padding:18px 16px 15px;margin-bottom:18px;text-align:center;
}
.photo-optional-title{display:flex;align-items:center;justify-content:center;gap:7px;font-size:.85rem;color:var(--gold-bright);margin-bottom:13px;font-weight:600}
.photo-optional-title .ic{color:var(--gold)}
.opt-tag{display:inline-block;background:rgba(216,185,120,.18);color:var(--gold-bright);font-size:.64rem;padding:2px 9px;border-radius:999px;margin-left:4px;font-weight:500;letter-spacing:.08em}
.photo-upload-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--panel-2);border:1px dashed var(--gold-line);border-radius:11px;
  padding:12px 22px;color:var(--gold-bright);font-size:.9rem;cursor:pointer;transition:all .2s;
}
.photo-upload-btn:hover{background:rgba(216,185,120,.1);border-color:var(--gold)}
.photo-icon{display:inline-flex;color:var(--gold);font-size:1.1rem}
#photoInput{display:none}
#photoPreview img{width:140px;height:140px;object-fit:cover;border-radius:12px;border:1px solid var(--gold-line);box-shadow:var(--shadow-sm);margin-bottom:9px}
.photo-clear{display:block;margin:0 auto;background:none;border:none;color:var(--muted);font-size:.78rem;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:3px}
.photo-clear:hover{color:var(--gold-bright)}
.photo-status{font-size:.74rem;color:var(--gold-bright);margin:0 0 8px;line-height:1.4;min-height:1.2em}
.photo-privacy{display:flex;align-items:flex-start;gap:7px;justify-content:center;text-align:left;font-size:.7rem;color:var(--muted);margin-top:11px;line-height:1.65}
.photo-privacy .ic{color:var(--gold);margin-top:2px;font-size:.85rem}

/* primary CTA — champagne gold */
.btn-primary{
  width:100%;padding:17px;margin-top:20px;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  border:none;border-radius:13px;color:#241c0b;
  font-size:1.05rem;font-weight:700;cursor:pointer;font-family:var(--sans);
  letter-spacing:.04em;transition:transform .2s,box-shadow .2s;
  box-shadow:0 12px 30px -12px rgba(216,185,120,.6);
}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(216,185,120,.7)}
.btn-primary:active:not(:disabled){transform:translateY(0)}
.btn-primary:disabled{opacity:.32;cursor:not-allowed;box-shadow:none}

.welcome-foot-nav{display:flex;gap:11px;margin-top:20px;font-size:.76rem;color:var(--muted);flex-wrap:wrap;justify-content:center}
.welcome-foot-nav a{color:var(--muted-2);text-decoration:none;transition:color .2s}
.welcome-foot-nav a:hover{color:var(--gold-bright)}

.welcome-sister-label{font-size:.72rem;color:var(--muted);margin:22px 0 10px;letter-spacing:.16em}
.welcome-sister-links{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}
.welcome-sister{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;font-size:.8rem;
  color:var(--muted-2);text-decoration:none;background:var(--panel);
  border:1px solid var(--hair);border-radius:999px;transition:all .2s;
}
.welcome-sister .ic{color:var(--gold);font-size:.92rem}
.welcome-sister:hover{background:rgba(216,185,120,.08);border-color:var(--gold-line);color:var(--ink);transform:translateY(-2px)}

/* ============================================================
   QUESTION SCREENS
   ============================================================ */
.back-btn{background:none;border:none;color:var(--muted);font-size:.85rem;cursor:pointer;padding:0 0 14px;font-family:inherit;text-align:left;transition:color .2s;align-self:flex-start}
.back-btn:hover{color:var(--gold-bright)}

.q-card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--hair);border-radius:var(--radius-lg);
  padding:30px 24px 26px;width:100%;box-shadow:var(--shadow);
  position:relative;
}
.q-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
}
.q-step{font-size:.7rem;letter-spacing:.24em;color:var(--gold);text-transform:uppercase;margin-bottom:12px;font-weight:600}
.q-text{font-family:var(--serif);font-size:1.5rem;font-weight:600;line-height:1.45;letter-spacing:.02em;color:var(--ink);margin-bottom:8px}
.q-sub{font-size:.83rem;color:var(--muted-2);margin-bottom:22px;line-height:1.6}

.options{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.options.col-2{display:grid;grid-template-columns:1fr 1fr}
.options.col-3{display:grid;grid-template-columns:1fr 1fr 1fr}

.opt-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:16px 10px;background:var(--panel);border:1px solid var(--hair);border-radius:13px;
  color:var(--text);cursor:pointer;font-family:inherit;text-align:center;
  transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;
  min-height:82px;appearance:none;-webkit-appearance:none;
}
.opt-btn:hover{background:var(--panel-2);border-color:var(--gold-line);transform:translateY(-2px)}
.opt-btn.selected{
  background:rgba(216,185,120,.1);border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold), 0 10px 26px -14px rgba(216,185,120,.5);
}
.opt-icon{font-size:1.7rem;line-height:1;color:var(--gold-bright);display:inline-flex}
.opt-icon .ic{width:1.55rem;height:1.55rem}
.opt-label{font-size:.93rem;font-weight:700;color:var(--ink)}
.opt-desc{font-size:.72rem;color:var(--muted);line-height:1.3}
#screen-4 .opt-btn,#screen-8 .opt-btn{min-height:92px;padding:18px 14px}

.text-input{
  width:100%;padding:16px 18px;background:var(--panel);border:1px solid var(--hair);
  border-radius:13px;color:var(--ink);font-size:1.05rem;font-family:inherit;outline:none;
  transition:border-color .2s,box-shadow .2s;margin-bottom:4px;
}
.text-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(216,185,120,.15)}
.text-input::placeholder{color:var(--muted)}

.date-row{display:flex;gap:10px;margin-bottom:4px}
.date-sel{
  flex:1;padding:14px 8px;background:var(--panel);border:1px solid var(--hair);
  border-radius:13px;color:var(--ink);font-size:.9rem;font-family:inherit;outline:none;
  cursor:pointer;appearance:none;-webkit-appearance:none;text-align:center;transition:border-color .2s;
}
.date-sel:focus{border-color:var(--gold)}
.date-sel option{background:#171432;color:var(--ink)}

/* palm hint + diagram */
.line-hint{display:flex;align-items:center;gap:11px;margin-bottom:16px;font-size:.8rem;color:var(--muted-2);line-height:1.45}
.line-dot{width:10px;height:10px;border-radius:50%;flex:none}
.palm-diagram{display:flex;justify-content:center;margin-bottom:20px;perspective:640px}
.palm-svg{
  width:116px;height:auto;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));
  animation:palmSway 8s ease-in-out infinite;
}
@keyframes palmSway{
  0%,100%{transform:rotateY(-11deg) rotateX(4deg)}
  50%{transform:rotateY(11deg) rotateX(-3deg)}
}
.finger,.thumb-path{fill:rgba(216,185,120,.05);stroke:rgba(216,185,120,.4);stroke-width:1.4}
.palm-body{fill:rgba(216,185,120,.045);stroke:rgba(216,185,120,.38);stroke-width:1.4}
.line-active{filter:drop-shadow(0 0 4px currentColor) drop-shadow(0 0 12px currentColor)}
/* the active line draws itself each time its screen appears
   (display:none -> flex restarts the animation) */
.screen.active .line-active{
  stroke-dasharray:320;stroke-dashoffset:320;
  animation:lineDraw 1.3s cubic-bezier(.4,0,.2,1) .25s forwards, lineGlow 3s ease-in-out 1.7s infinite;
}
@keyframes lineDraw{to{stroke-dashoffset:0}}
@keyframes lineGlow{0%,100%{opacity:1}50%{opacity:.62}}

/* ============================================================
   SCREEN 10 — LOADING
   ============================================================ */
.loading-wrap{display:flex;flex-direction:column;align-items:center;width:100%;max-width:420px;text-align:center}
.loading-hand{
  position:relative;width:120px;height:120px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;line-height:0;color:var(--gold-bright);
  animation:pulse 2s ease-in-out infinite;
}
.loading-hand::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(216,185,120,.18),transparent 68%)}
/* v2: 3D orbit ring sweeping around the analysing hand */
.loading-wrap{perspective:700px}
.loading-hand::after{
  content:"";position:absolute;inset:8px;border-radius:50%;
  border:1px solid rgba(216,185,120,.45);border-top-color:var(--gold-bright);
  box-shadow:0 0 16px -6px rgba(216,185,120,.6);
  animation:loadRing 2.2s linear infinite;
}
@keyframes loadRing{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
.loading-hand .hand-emblem{width:58px;height:58px}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}}
.loading-title{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-bottom:24px;color:var(--gold-bright);letter-spacing:.03em}
.loading-bar-wrap{width:100%;height:5px;background:rgba(216,185,120,.14);border-radius:999px;overflow:hidden;margin-bottom:26px}
.loading-bar{height:100%;background:linear-gradient(90deg,var(--gold),var(--amethyst));border-radius:999px;width:0%;transition:width .6s ease}
.loading-steps{list-style:none;width:100%}
.loading-step{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:.88rem;color:var(--muted);transition:color .35s;text-align:left}
.loading-step:last-child{border-bottom:none}
.loading-step.done{color:var(--ink)}
.ls-circle{display:inline-flex;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--muted);align-items:center;justify-content:center;font-size:.72rem;flex:none;transition:all .3s}
.loading-step.done .ls-circle{background:var(--gold);border-color:var(--gold);color:#241c0b}
.loading-step.done .ls-circle::after{content:"✓"}
.loading-photo{width:120px;height:120px;object-fit:cover;border-radius:50%;border:1px solid var(--gold-line);box-shadow:var(--shadow-sm)}

/* ============================================================
   SCREEN 11 — RESULT
   ============================================================ */
.result-wrap{width:100%;max-width:482px;display:flex;flex-direction:column;gap:14px}
.result-header{text-align:center;padding:8px 0 4px}
.result-photo{width:100px;height:100px;object-fit:cover;border-radius:50%;border:1px solid var(--gold-line);box-shadow:var(--shadow-sm);margin:0 auto 14px;display:block}
.result-stars{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold);margin-bottom:12px}
.result-stars .ic{font-size:.8rem}
.result-name{font-family:var(--serif);font-size:1.75rem;font-weight:600;color:var(--ink);line-height:1.35;letter-spacing:.02em;margin-bottom:12px}
.personality-badge{
  display:inline-block;background:rgba(216,185,120,.1);
  border:1px solid var(--gold-line);border-radius:999px;
  padding:8px 26px;font-size:.95rem;font-weight:700;color:var(--gold-bright);letter-spacing:.03em;
}

.result-section,.scores-card,.lucky-card,.readmore-card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--hair);border-radius:var(--radius);
}
.result-section{padding:20px}
.result-overall{font-size:.91rem;color:var(--text);line-height:1.95}

.scores-card{padding:20px 20px 16px}
.scores-label,.lucky-label{font-size:.7rem;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:16px;font-weight:600}
.score-row{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.score-name{display:inline-flex;align-items:center;gap:6px;width:92px;font-size:.82rem;color:var(--muted-2);flex:none}
.score-name .ic{font-size:.95rem}
.score-bar-wrap{flex:1;height:7px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden}
.score-bar{height:100%;border-radius:999px;width:0%;transition:width 1.1s cubic-bezier(.22,1,.36,1) .25s}
.score-bar.love{background:linear-gradient(90deg,#c06e8e,var(--line-heart))}
.score-bar.work{background:linear-gradient(90deg,#6e8ec0,var(--line-head))}
.score-bar.money{background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright))}
.score-bar.health{background:linear-gradient(90deg,#6aa287,var(--line-life))}
.score-num{width:28px;font-size:.82rem;font-weight:700;text-align:right;color:var(--gold-bright);flex:none}

.lucky-card{padding:20px}
.lucky-label{text-align:center}
.lucky-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lucky-item{display:flex;flex-direction:column;gap:5px;background:var(--panel);border:1px solid var(--hair);border-radius:11px;padding:12px 13px}
.lucky-key{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--muted)}
.lucky-key .ic{color:var(--gold);font-size:.85rem}
.lucky-val{font-size:.95rem;font-weight:700;color:var(--gold-bright)}
.lucky-advice{margin-top:14px;font-size:.84rem;line-height:1.75;color:var(--muted-2);text-align:center}

.detail-cards{display:flex;flex-direction:column;gap:10px}
.detail-card{background:var(--panel);border:1px solid var(--hair);border-radius:14px;padding:16px 17px}
.detail-card-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.detail-card-icon{display:inline-flex;color:var(--gold-bright);font-size:1.05rem}
.detail-card-icon .ic{width:1.15rem;height:1.15rem}
.detail-card-title{font-size:.9rem;font-weight:700;color:var(--ink)}
.detail-card-text{font-size:.83rem;color:var(--muted-2);line-height:1.85}

.readmore-card{padding:17px 17px 15px}
.readmore-label{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.86rem;font-weight:700;color:var(--gold-bright);margin-bottom:13px}
.readmore-links{display:flex;flex-direction:column;gap:8px}
.readmore-link{display:flex;align-items:center;gap:11px;padding:12px 14px;background:var(--panel);border:1px solid var(--hair);border-radius:11px;color:var(--text);text-decoration:none;font-size:.86rem;transition:all .18s}
.readmore-link:hover{background:rgba(216,185,120,.08);border-color:var(--gold-line);transform:translateX(3px)}
.readmore-link .ic{color:var(--gold);flex:none}
.readmore-link .rm-arrow{margin-left:auto;color:var(--gold)}

.share-section{display:flex;flex-direction:column;gap:10px}
.share-label{font-size:.78rem;color:var(--muted);text-align:center;letter-spacing:.12em}
.share-row{display:flex;gap:10px}
.share-btn{flex:1;padding:14px;border:none;border-radius:12px;font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .18s;letter-spacing:.03em}
.share-btn:hover{transform:translateY(-2px);opacity:.9}
.share-btn.twitter{background:#0f0f14;color:#fff;border:1px solid rgba(255,255,255,.12)}
.share-btn.line{background:#06c755;color:#fff}
.btn-restart{width:100%;padding:14px;background:transparent;border:1px solid var(--hair);border-radius:12px;color:var(--muted);font-size:.9rem;cursor:pointer;font-family:inherit;transition:all .18s}
.btn-restart:hover{border-color:var(--gold-line);color:var(--ink)}
.result-disclaimer{font-size:.7rem;color:var(--muted);text-align:center;line-height:1.65;padding:0 4px 16px}

@media (max-width:380px){
  .welcome-title{font-size:1.8rem}
  .q-text{font-size:1.3rem}
  .opt-btn{min-height:74px;padding:12px 8px}
  .opt-icon{font-size:1.5rem}
  .opt-label{font-size:.83rem}
  .lucky-grid{gap:8px}
}

/* ============================================================
   SEO CONTENT
   ============================================================ */
.seo-content{position:relative;z-index:1;border-top:1px solid var(--hair);padding:52px 18px 68px;content-visibility:auto;contain-intrinsic-size:0 1400px}
.seo-inner{max-width:720px;margin:0 auto}
.seo-content h2{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);border-left:2px solid var(--gold);padding-left:14px;margin:40px 0 14px;letter-spacing:.02em}
.seo-content h2:first-child{margin-top:0}
.seo-content p{color:var(--muted-2);line-height:1.95;font-size:.92rem;margin:0 0 14px}
.seo-content strong{color:var(--gold-bright);font-weight:700}
.seo-list{list-style:none;padding:0;margin:0 0 14px}
.seo-list li{display:flex;gap:9px;color:var(--muted-2);line-height:1.8;font-size:.9rem;padding:10px 0;border-bottom:1px solid var(--hair)}
.seo-list li .ic{color:var(--gold);margin-top:4px;flex:none}
.seo-list li strong{color:var(--gold-bright)}
.seo-links{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.seo-links a{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:var(--muted-2);text-decoration:none;background:var(--panel);border:1px solid var(--hair);border-radius:999px;padding:8px 16px;transition:all .2s}
.seo-links a .ic{color:var(--gold);font-size:.9rem}
.seo-links a:hover{background:rgba(216,185,120,.08);color:var(--gold-bright);border-color:var(--gold-line)}
.seo-faq details{background:var(--panel);border:1px solid var(--hair);border-radius:11px;padding:13px 17px;margin-bottom:8px}
.seo-faq summary{cursor:pointer;font-size:.92rem;font-weight:700;color:var(--ink);list-style:none}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq details[open] summary{margin-bottom:9px}
.seo-faq p{margin:0;font-size:.88rem}
.seo-faq a{color:var(--gold)}
.seo-disclaimer{font-size:.72rem!important;color:var(--muted)!important;margin-top:30px!important;line-height:1.75}
.feature-promo{margin:22px 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.feature-promo a{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(216,185,120,.14),rgba(154,134,196,.12));border:1px solid var(--gold-line);border-radius:12px;padding:13px 20px;color:var(--gold-bright);text-decoration:none;font-weight:700;font-size:.9rem;transition:transform .2s,box-shadow .2s}
.feature-promo a .ic{color:var(--gold)}
.feature-promo a:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}

/* ============================================================
   3D DESIGN LAYER (v2, 2026-07-11)
   - #cosmos      : WebGL nebula/starfield canvas (moon3d.js)
   - [data-tilt]  : pointer-tracking 3D card tilt + gold glare
   - .reveal      : depth entrance override (base in 2026-fortune css)
   ============================================================ */

/* ---------- WebGL cosmos canvas ---------- */
#cosmos{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:0;transition:opacity 1.8s ease;
}
html.cosmos-on #cosmos{opacity:1}
/* dim the CSS starfield fallback once WebGL stars are live */
html.cosmos-on body::after{opacity:.16}

/* ---------- interactive 3D tilt cards ----------
   moon3d.js sets --rx/--ry (deg) and --gx/--gy (%) on pointermove.
   Without JS / on touch the vars stay 0 and cards lie flat. */
[data-tilt]{
  position:relative;
  transform:perspective(950px) rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg));
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease;
  will-change:transform;
}
[data-tilt].is-tilting{transition:transform .1s linear, box-shadow .3s ease}
[data-tilt].is-tilting{box-shadow:0 30px 60px -28px rgba(0,0,0,.8)}
/* moving champagne glare that follows the pointer */
[data-tilt]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:var(--go,0);transition:opacity .45s ease;
  background:radial-gradient(340px circle at calc(var(--gx,50)*1%) calc(var(--gy,50)*1%),
    rgba(239,217,164,.11), rgba(239,217,164,.045) 38%, transparent 62%);
}
/* children float at their own depths inside a tilted card */
[data-tilt] .opt-btn{transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .18s,background .18s,box-shadow .18s}
[data-tilt] .opt-btn:hover{transform:translateZ(18px);background:var(--panel-2);border-color:var(--gold-line)}
[data-tilt] .opt-btn.selected{transform:translateZ(10px)}
[data-tilt] .q-text{transform:translateZ(12px)}
[data-tilt] .q-step{transform:translateZ(8px)}
[data-tilt] .palm-diagram{transform:translateZ(6px)}

/* question cards surface from depth when their screen appears */
.screen.active .q-card{animation:cardIn .55s cubic-bezier(.22,1,.36,1)}
@keyframes cardIn{
  from{opacity:0;transform:perspective(950px) rotateX(7deg) translateY(26px)}
  to{opacity:1;transform:perspective(950px) rotateX(0) translateY(0)}
}

/* ---------- welcome screen: staged 3D rise ---------- */
.screen.active .welcome-wrap>*{animation:riseIn .7s cubic-bezier(.22,1,.36,1) both}
.screen.active .welcome-wrap>*:nth-child(2){animation-delay:.06s}
.screen.active .welcome-wrap>*:nth-child(3){animation-delay:.12s}
.screen.active .welcome-wrap>*:nth-child(4){animation-delay:.18s}
.screen.active .welcome-wrap>*:nth-child(5){animation-delay:.24s}
.screen.active .welcome-wrap>*:nth-child(6){animation-delay:.30s}
.screen.active .welcome-wrap>*:nth-child(7){animation-delay:.36s}
@keyframes riseIn{
  from{opacity:0;transform:perspective(900px) translateY(22px) rotateX(6deg)}
  to{opacity:1;transform:none}
}

/* ---------- CTA: layered depth + travelling sheen ---------- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{
  content:"";position:absolute;top:-4px;bottom:-4px;left:-70%;width:42%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55) 50%,transparent);
  transform:skewX(-22deg);pointer-events:none;
  animation:sheen 4.6s cubic-bezier(.4,0,.2,1) 1.2s infinite;
}
@keyframes sheen{0%{left:-70%}46%{left:130%}100%{left:130%}}
.btn-primary:disabled::after{animation:none;content:none}

/* ---------- result screen: metallic depth polish ---------- */
.score-bar{position:relative}
.score-bar::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 46%,rgba(0,0,0,.18));
}
.personality-badge{
  position:relative;
  box-shadow:0 10px 26px -14px rgba(216,185,120,.55), inset 0 1px 0 rgba(244,239,227,.14);
}
.result-stars .ic{filter:drop-shadow(0 0 7px rgba(216,185,120,.55))}

/* ---------- SEO section: depth reveal override ---------- */
html.js .seo-content .reveal{
  opacity:0;
  transform:perspective(900px) rotateX(9deg) translateY(34px);
  transform-origin:50% 100%;
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
html.js .seo-content .reveal.is-in{opacity:1;transform:none}
.feature-promo a:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 36px -18px rgba(216,185,120,.5)}

/* ---------- accessibility: kill all motion on request ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .screen.active .line-active{stroke-dasharray:none;stroke-dashoffset:0}
  [data-tilt]{transform:none}
  .orb-scene{transform:none}
  html.js .seo-content .reveal{opacity:1;transform:none}
}

/* 日本語の折り返し（2026-07-31）: 文節境界で折る（Chrome/Edge。非対応ブラウザは無視）。
   割りたくない語は .nb を個別に付ける。 */
h1,h2,h3,.lead,.hero-sub{word-break:auto-phrase}
.nb{white-space:nowrap}