/* ===== Kansei 共有デザインシステム（全ページ共通の世界観） ===== */
:root{
  --hue:34; --mo:1;
  --ink:#eceadf; --dim:#9a9384; --faint:#6a6459;
  --line:rgba(255,255,255,.08); --panel:rgba(28,26,32,.42);
  --accent:hsl(var(--hue) 46% 62%);
  --bg0:#0a0a0c; --bg1:hsl(var(--hue) 22% 6%);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg0);color:var(--ink);
  font-family:-apple-system,"Hiragino Kaku Gothic ProN",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}

/* ---- 生きた背景（JSが#spaceを注入） ---- */
#space{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%, var(--bg1), var(--bg0) 60%)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.16;mix-blend-mode:screen;
  will-change:transform;animation:k-drift calc(52s/var(--mo)) ease-in-out infinite alternate}
.b1{width:78vmax;height:78vmax;left:-22vmax;top:-24vmax;background:radial-gradient(circle,hsl(var(--hue) 60% 55%),transparent 62%)}
.b2{width:60vmax;height:60vmax;right:-20vmax;top:16vmax;background:radial-gradient(circle,hsl(calc(var(--hue) + 24) 46% 48%),transparent 62%);animation-duration:calc(68s/var(--mo));animation-delay:-8s}
.b3{width:52vmax;height:52vmax;left:8vmax;bottom:-22vmax;background:radial-gradient(circle,hsl(calc(var(--hue) - 18) 40% 46%),transparent 60%);animation-duration:calc(60s/var(--mo));animation-delay:-20s;opacity:.12}
@keyframes k-drift{ to{ transform:translate3d(6vmax,-4vmax,0) scale(1.12) } }
.grain{position:absolute;inset:-50%;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vign{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}
#ptr{position:absolute;inset:0;pointer-events:none;opacity:.5;transition:background .3s;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,30%),hsl(var(--hue) 60% 70% / .07),transparent 70%)}
.space-pulse .blob{animation-duration:calc(2.4s/var(--mo)) !important}

/* ---- レイアウト ---- */
.wrap{position:relative;z-index:1;max-width:560px;margin:0 auto;min-height:100dvh;
  padding:max(18px,env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
  opacity:0;animation:k-fade .8s ease forwards}
@keyframes k-fade{to{opacity:1}}
.top{display:flex;align-items:center;justify-content:space-between;min-height:40px;gap:10px}
a.back{color:var(--dim);text-decoration:none;font-size:20px}
.stage{color:var(--faint);font-size:11px;letter-spacing:.12em}
.stage b{color:var(--dim);font-weight:600}
.lbl{color:var(--faint);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px}
section{margin:26px 0}
.note{color:var(--faint);font-size:11.5px;line-height:1.7}

/* ---- ヒーロー：今日わかったこと / タイトル ---- */
.hero{opacity:0;transform:translateY(8px);transition:opacity 1s ease,transform 1s ease}
.hero.in{opacity:1;transform:none}
.kick{color:var(--accent);font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px}
.today{font-size:22px;line-height:1.6;font-weight:600;letter-spacing:.01em;text-wrap:balance;
  text-shadow:0 1px 30px hsl(var(--hue) 60% 40% / .25)}
.today.small{font-size:16px;color:var(--dim);font-weight:400}
h1{font-size:24px;line-height:1.45;margin:0 0 10px;font-weight:700;letter-spacing:.01em;text-wrap:balance}
.sub{color:var(--dim);font-size:13.5px;line-height:1.8}

/* ---- パネル / チップ / ボタン ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;backdrop-filter:blur(8px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:transparent;border:1px solid var(--line);color:var(--dim);padding:9px 15px;border-radius:999px;font-size:13.5px;cursor:pointer;transition:.3s}
.chip.sel{border-color:hsl(var(--hue) 46% 55%);color:var(--ink);background:hsl(var(--hue) 40% 50% / .14)}
.open{width:100%;border:1px solid hsl(var(--hue) 40% 40% / .5);color:var(--ink);cursor:pointer;font-family:inherit;
  background:linear-gradient(180deg,hsl(var(--hue) 30% 22% / .5),hsl(var(--hue) 30% 12% / .5));
  padding:18px;border-radius:16px;font-size:16px;font-weight:600;letter-spacing:.02em;backdrop-filter:blur(6px);
  transition:transform .2s,box-shadow .4s}
.open:active{transform:scale(.985)} .open:disabled{opacity:.5}
.open:hover{box-shadow:0 0 40px hsl(var(--hue) 60% 45% / .25)}
.ghost{width:100%;background:transparent;color:var(--dim);border:1px solid var(--line);padding:14px;border-radius:14px;font-size:14px;cursor:pointer;font-family:inherit;transition:.3s}
.ghost:hover{color:var(--ink)}
.nextstep{display:block;text-align:center;text-decoration:none;color:var(--ink);border:1px solid var(--line);
  border-radius:14px;padding:14px;margin-top:18px;font-size:14px;background:var(--panel);backdrop-filter:blur(6px)}
.err{color:#e8988a;font-size:13px;margin-top:12px}

/* ---- 入力 ---- */
input[type=text],select{background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--ink);
  padding:13px;border-radius:12px;font-size:16px;font-family:inherit}
input:focus,select:focus{outline:none;border-color:hsl(var(--hue) 46% 55%)}

/* ---- 感性（言葉＋光の強弱・バー/％にしない） ---- */
.axeswrap{display:flex;flex-wrap:wrap;gap:9px}
.axis{position:relative;padding:9px 15px;border-radius:999px;font-size:14px;color:var(--ink);
  border:1px solid var(--line);background:hsl(var(--hue) 30% 50% / calc(var(--w,.3) * .16));
  box-shadow:0 0 calc(var(--w,.3) * 26px) hsl(var(--hue) 60% 55% / calc(var(--w,.3) * .35));transition:all .5s}
.axis small{color:var(--faint);font-size:10px;margin-left:7px}

/* ---- "間"（待ち） ---- */
.waiting{text-align:center;color:var(--dim);font-size:13px;padding:26px 0;display:none;letter-spacing:.05em}
.waiting .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin:0 3px;
  animation:k-breathe 1.4s ease-in-out infinite}
.waiting .dot:nth-child(2){animation-delay:.2s} .waiting .dot:nth-child(3){animation-delay:.4s}
@keyframes k-breathe{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* ---- 発見カード ---- */
.pick{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;backdrop-filter:blur(8px);
  opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s ease}
.pick.in{opacity:1;transform:none}
.pick .d{color:var(--accent);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.pick .t{font-size:19px;font-weight:700;margin:6px 0 2px;line-height:1.35}
.pick .c{color:var(--dim);font-size:12.5px}
.pick .w{font-size:13.5px;line-height:1.75;margin-top:11px;color:#d6d2c6}
.plays{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.plays a{text-decoration:none;font-size:12px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);color:var(--ink);background:rgba(0,0,0,.25)}

/* ---- 反応 ---- */
.react{margin-top:14px;border-top:1px solid var(--line);padding-top:13px}
.react .rl{color:var(--dim);font-size:12px;margin-bottom:8px}
.rbtns{display:flex;flex-wrap:wrap;gap:7px}
.rbtns button{background:transparent;border:1px solid var(--line);color:var(--dim);padding:8px 13px;border-radius:999px;font-size:12.5px;cursor:pointer;transition:.25s;font-family:inherit}
.rbtns button:active{transform:scale(.94)}
.rbtns button.on{border-color:hsl(var(--hue) 46% 55%);background:hsl(var(--hue) 40% 50% / .16);color:var(--ink)}
.rthanks{color:var(--faint);font-size:11.5px;margin-top:8px;min-height:14px}

/* ---- Revelation Moment（JSが#bloom/#toastを注入） ---- */
#bloom{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(60% 50% at 50% 45%,hsl(var(--hue) 70% 65% / .5),transparent 70%)}
#bloom.on{animation:k-bloom 1.1s ease-out}
@keyframes k-bloom{0%{opacity:0}18%{opacity:.9}100%{opacity:0}}
#toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(14px);
  z-index:6;background:rgba(20,18,24,.9);border:1px solid hsl(var(--hue) 40% 45% / .5);color:var(--ink);
  padding:12px 18px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:.4s;backdrop-filter:blur(8px);max-width:86vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion: reduce){
  .blob,.waiting .dot{animation:none !important}
  .wrap,.hero,.pick{animation:none;transition:none;opacity:1;transform:none}
  #bloom.on{animation:none}
}