:root{
  /* マスターロゴ由来の黒×バイオレット×ネオングリーン */
  --bg:#06040D;
  --surface:#130B24;
  --violet:#9A2CFF;
  --green:#5CFF5C;
  --text:#F0ECF7;
  --muted:#B3A8CC;
  --line:rgba(240,236,247,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text)}
body{
  font-family:"Noto Sans JP",sans-serif;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:28px 18px 72px;position:relative;overflow-x:hidden;
}
/* 設問ごとに差し替わる背景。画像が無いときは何も出ない */
#qbg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.1s ease;
}
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  transition:opacity .8s ease;
}
body.unsettle::before{opacity:.36}
body::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 30%,rgba(6,4,13,.30) 70%,rgba(6,4,13,.80) 100%);
}
.stage{width:100%;max-width:540px;position:relative;z-index:3}

/* 帳 */
.veil{position:fixed;inset:0;z-index:60;pointer-events:none;transform:translateY(-101%)}
.veil i{position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,#06040D 55%,#2A0A5E 100%)}
.veil b{position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--green) 40%,var(--violet) 60%,transparent)}
.veil.drop{animation:vd var(--dropDur,.92s) cubic-bezier(.72,0,.24,1) forwards}
.veil.lift{animation:vl .78s cubic-bezier(.66,0,.3,1) forwards}
@keyframes vd{0%{transform:translateY(-101%)}70%{transform:translateY(-2%)}84%{transform:translateY(-2%)}100%{transform:translateY(0)}}
@keyframes vl{to{transform:translateY(101%)}}

.logo{display:block;width:min(250px,62%);margin-bottom:30px}

.eyebrow{font-family:"Noto Sans JP",sans-serif;font-size:11.5px;letter-spacing:.3em;color:var(--muted);margin-bottom:22px}
h1{font-family:"Shippori Mincho",serif;font-weight:800;font-size:clamp(29px,8.4vw,42px);line-height:1.55;letter-spacing:.16em;
  margin-bottom:22px;text-shadow:0 0 28px rgba(154,44,255,.3);animation:breathe 6.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}47%{opacity:.74}}
.lead{font-size:15px;line-height:2.2;color:var(--muted);letter-spacing:.03em;margin-bottom:34px}
.rule{height:1px;background:var(--line);margin:26px 0}

button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.btn{display:block;width:100%;padding:18px;font-family:"Noto Sans JP",sans-serif;
  font-size:14.5px;font-weight:700;letter-spacing:.2em;background:var(--green);color:#06040D;
  text-align:center;text-decoration:none;transition:box-shadow .3s,opacity .2s}
.btn:hover{box-shadow:0 0 32px rgba(154,44,255,.5)}
.btn:disabled{background:var(--surface);color:#6E6288;cursor:not-allowed;box-shadow:none}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--muted);font-weight:500}
.btn.ghost:hover{border-color:var(--green);color:var(--green);box-shadow:0 0 26px rgba(92,255,92,.15)}

input[type=text]{width:100%;padding:16px 0;background:none;border:none;border-bottom:1px solid var(--line);
  color:var(--text);font-family:"Shippori Mincho",serif;font-size:20px;letter-spacing:.2em;margin-bottom:10px}
input[type=text]:focus{outline:none;border-bottom-color:var(--green)}
input[type=text]::placeholder{color:#6E6288;letter-spacing:.1em}
.note{font-family:"Noto Sans JP",sans-serif;font-size:11.5px;color:var(--muted);line-height:2}

.progress{display:flex;gap:4px;margin-bottom:38px}
.progress span{flex:1;height:1px;background:var(--line);transition:background .5s}
.progress span.on{background:var(--green)}
.qnum{font-family:"Noto Sans JP",sans-serif;font-size:11.5px;letter-spacing:.3em;color:var(--violet);margin-bottom:18px}
.qtext{position:relative;font-family:"Shippori Mincho",serif;font-weight:700;font-size:clamp(19px,5.2vw,24px);line-height:2.05;letter-spacing:.08em;margin-bottom:34px}
.qtextAccent{color:var(--green)}
body.unsettle .qnum{color:var(--green)}
.qtext.glitch{text-shadow:2px 0 0 rgba(154,44,255,.62),-2px 0 0 rgba(92,255,92,.52)}
.qtext.glitch.shake-burst{animation:smear var(--shake-burst-duration,.24s) steps(1,end)}
@keyframes smear{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(var(--shake-1,-2px))}
  40%{transform:translateX(var(--shake-2,2px))}
  60%{transform:translateX(var(--shake-3,-1px))}
  80%{transform:translateX(var(--shake-4,1px))}
}
.qtext.glitch::before,.qtext.glitch::after{
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0
}
.qtext.glitch.glitch-burst::before{color:var(--violet);animation:glitchMagenta var(--glitch-burst-duration,.32s) steps(1,end)}
.qtext.glitch.glitch-burst::after{color:var(--green);animation:glitchCyan var(--glitch-burst-duration,.32s) steps(1,end)}
@keyframes glitchMagenta{
  0%,100%{opacity:0;clip-path:inset(0)}
  20%{opacity:.9;clip-path:inset(8% 0 58% 0);transform:translateX(6px)}
  40%{opacity:.72;clip-path:inset(52% 0 12% 0);transform:translateX(-5px)}
  60%{opacity:.85;clip-path:inset(28% 0 38% 0);transform:translateX(5px)}
  80%{opacity:.68;clip-path:inset(70% 0 4% 0);transform:translateX(-4px)}
}
@keyframes glitchCyan{
  0%,100%{opacity:0;clip-path:inset(0)}
  20%{opacity:.82;clip-path:inset(64% 0 6% 0);transform:translateX(-6px)}
  40%{opacity:.65;clip-path:inset(18% 0 50% 0);transform:translateX(5px)}
  60%{opacity:.78;clip-path:inset(42% 0 24% 0);transform:translateX(-5px)}
  80%{opacity:.62;clip-path:inset(4% 0 72% 0);transform:translateX(4px)}
}

.choices{display:flex;flex-direction:column;gap:9px}
.choice{font-family:"Noto Sans JP",sans-serif;text-align:left;padding:19px 22px;background:var(--surface);border:1px solid transparent;
  font-size:15.5px;line-height:1.85;letter-spacing:.02em;
  transition:border-color .25s,color .25s,text-shadow .25s}
@media(hover:hover){
  .choice:hover{border-color:rgba(154,44,255,.42);color:#fff;text-shadow:0 0 14px rgba(240,236,247,.55)}
}
.choice.selected{border-color:rgba(154,44,255,.42);color:#fff;text-shadow:0 0 14px rgba(240,236,247,.55)}
body.unsettle .choice{background:rgba(19,11,36,.62)}
.qAfter{margin-top:28px;color:var(--green);font-family:"Shippori Mincho",serif;font-size:15px;line-height:2;letter-spacing:.08em;text-align:center}

.resultHeading{font-family:"Shippori Mincho",serif;font-size:clamp(22px,6vw,30px);line-height:1.6;letter-spacing:.08em;text-align:center;margin-bottom:12px}
.resultIntro{font-size:13px;line-height:2;color:var(--muted);text-align:center;overflow-wrap:anywhere;margin-bottom:26px}
.resultMojibakeGlyph{display:inline-block;position:relative;color:transparent}
.resultMojibakeGlyph::before,.resultMojibakeGlyph::after{content:attr(data-character);position:absolute;left:0;color:var(--text);opacity:1}
.resultMojibakeGlyph::before{clip-path:inset(0 0 50% 0);transform:translateX(var(--slice-top))}
.resultMojibakeGlyph::after{clip-path:inset(50% 0 0 0);transform:translateX(var(--slice-bottom))}
.resultDecodedGlyph::before{animation:decodeTop .16s steps(2,end) both}
.resultDecodedGlyph::after{animation:decodeBottom .16s steps(2,end) both}
.result-color-bleed{position:relative;text-shadow:2px 0 0 rgba(154,44,255,.62),-2px 0 0 rgba(92,255,92,.52)}
.result-color-bleed::before,.result-color-bleed::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.result-color-bleed::before{color:var(--violet);animation:glitchMagenta .32s steps(1,end)}
.result-color-bleed::after{color:var(--green);animation:glitchCyan .32s steps(1,end)}
@keyframes decodeTop{0%{transform:translateX(var(--slice-top))}100%{transform:translateX(0)}}
@keyframes decodeBottom{0%{transform:translateX(var(--slice-bottom))}100%{transform:translateX(0)}}
#result .typeName,.resultPage .typeName{margin-bottom:24px}
#result .desc,.resultPage .desc{margin-bottom:0}
.teaserBtn{text-align:center;text-decoration:none}
.teaserBtn img{display:block;width:120px;max-width:100%;height:60px;object-fit:contain;margin:0 auto 12px}
.card{border:1px solid var(--line);padding:34px 26px;margin-bottom:22px;background:rgba(19,11,36,.55)}
.sigil{width:min(280px,100%);height:auto;margin:0 auto 26px;display:block;animation:pulse 4.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.95}50%{opacity:.42}}
.charBox{width:100%;max-width:280px;margin:0 auto 24px;display:none}
.charBox img{width:100%;display:block}
.yokai{font-family:"Noto Sans JP",sans-serif;font-size:11.5px;letter-spacing:.3em;color:var(--green);margin-bottom:18px;text-align:center}
.typeName{font-family:"Shippori Mincho",serif;font-weight:800;font-size:clamp(30px,8.2vw,42px);line-height:1.4;letter-spacing:.2em;
  text-align:center;margin-bottom:10px;text-shadow:0 0 32px rgba(154,44,255,.36)}
.typeRead{font-family:"Noto Sans JP",sans-serif;font-size:11.5px;letter-spacing:.24em;color:var(--muted);text-align:center;margin-bottom:30px}
.desc{font-size:15.5px;line-height:2.1;letter-spacing:.02em;margin-bottom:24px;white-space:pre-line}
.who{font-size:13.5px;line-height:2.0;color:var(--muted);border-left:2px solid var(--green);padding-left:16px;letter-spacing:.05em}
.stack{display:flex;flex-direction:column;gap:9px}
.foot{font-family:"Noto Sans JP",sans-serif;margin-top:44px;font-size:11px;line-height:2.2;color:#6E6288;text-align:center}

@media(prefers-reduced-motion:reduce){
  .veil.drop,.veil.lift{animation-duration:.01ms}
  h1,.sigil,.qtext.glitch.shake-burst,.qtext.glitch.glitch-burst::before,.qtext.glitch.glitch-burst::after,.resultDecodedGlyph::before,.resultDecodedGlyph::after,.result-color-bleed::before,.result-color-bleed::after{animation:none}
}