:root{
  --bg:#0a0a12;
  --bg2:#11111a;
  --card:#15151f;
  --accent:#b58fde;
  --accent2:#7ac6e6;
  --text:#e8e8ee;
  --muted:#8e8ea0;
  --danger:#e26a6a;
  --happy:#9be7a1;
  --shadow: 0 20px 60px rgba(0,0,0,0.5);
}
*{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);min-height:100vh}
body{
  background:
    radial-gradient(circle at 20% 10%, rgba(122,198,230,0.05), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(181,143,222,0.06), transparent 40%),
    linear-gradient(180deg,#05050a,#0b0b14);
  display:flex;align-items:center;justify-content:center;
  transition:background 2s ease;
}

/* ムード別の背景色変化 */
body.mood-calm   {background:linear-gradient(180deg,#05050a,#0b0b14)}
body.mood-tense  {background:linear-gradient(180deg,#0a0813,#13101c)}
body.mood-horror {background:linear-gradient(180deg,#100404,#1a0a0c)}
body.mood-climax {background:linear-gradient(180deg,#0d0815,#1c0e22)}
body.mood-happy  {background:linear-gradient(180deg,#0a1014,#142028)}
body.mood-bad    {background:linear-gradient(180deg,#0d0203,#1a0508)}

#app{width:min(820px,95vw);padding:24px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:8px}
h1{margin:0;font-size:1.25rem;color:var(--accent);letter-spacing:0.05em}
h1 .sub{display:block;font-size:0.7rem;color:var(--muted);font-weight:normal;margin-top:2px;letter-spacing:0.1em}

#controls button{
  margin-left:6px;padding:6px 12px;background:#1a1a22;
  border:1px solid #2a2a36;color:var(--text);border-radius:6px;
  font-size:0.85rem;cursor:pointer;transition:all .2s;
}
#controls button:hover{background:#252532;border-color:var(--accent)}

.panel{
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.005));
  padding:28px;border-radius:12px;
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:var(--shadow);
  animation:fadeIn 0.5s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.hidden{display:none !important}

/* タイトル */
.title-screen{
  text-align:center;
  padding:0;
  overflow:hidden;
}
.title-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px 12px 0 0;
  /* 雪っぽいゆっくりとしたフェード演出 */
  animation:titleAppear 1.4s ease;
}
@keyframes titleAppear{
  from{opacity:0;transform:scale(1.04)}
  to{opacity:1;transform:scale(1)}
}
.title-body{
  padding:24px 28px 32px;
  background:linear-gradient(180deg,rgba(8,8,18,0.92),rgba(8,8,18,1));
  border-top:1px solid rgba(181,143,222,0.18);
}
.title-screen .lead{font-size:1.02rem;line-height:1.85;margin:0 0 22px;color:#d6d6e0}
.title-screen .hint{font-size:0.82rem;color:var(--muted);margin-top:16px}
.title-buttons{display:flex;flex-direction:column;gap:12px;max-width:280px;margin:0 auto}

/* タイトル画面表示中はヘッダーのタイトル文字を控えめにする（画像にタイトルがあるため） */
body.on-title h1{opacity:0.35;font-size:0.9rem}
body.on-title h1 .sub{display:none}

.big-btn{
  padding:14px 24px;background:linear-gradient(180deg,#2a2138,#1a1626);
  border:1px solid var(--accent);color:var(--text);border-radius:8px;
  font-size:1rem;cursor:pointer;transition:all .25s;letter-spacing:0.05em;
}
.big-btn:hover{background:linear-gradient(180deg,#3a2a4d,#251e34);transform:translateY(-1px);box-shadow:0 6px 20px rgba(181,143,222,0.2)}
.big-btn:disabled{opacity:0.4;cursor:not-allowed}

/* 名前入力 */
#intro{text-align:center}
#intro label{display:block;margin-bottom:14px;color:#c8c8d4}
#playerNameInput{
  padding:12px 16px;border-radius:8px;border:1px solid #2a2a36;
  background:#0e0e16;color:var(--text);font-size:1rem;width:280px;max-width:80%;
  margin-bottom:16px;text-align:center;
}
#playerNameInput:focus{outline:none;border-color:var(--accent)}

/* シーン */
#scene-meta{display:flex;justify-content:space-between;margin-bottom:14px;font-size:0.8rem;color:var(--muted)}
#chapter{letter-spacing:0.15em}

#text{
  white-space:pre-wrap;
  font-size:1.05rem;
  line-height:1.95;
  margin-bottom:20px;
  color:#e6e6ec;
  min-height:200px;
  letter-spacing:0.02em;
  animation:textFade 0.6s ease;
}
@keyframes textFade{from{opacity:0}to{opacity:1}}

.next-btn{
  display:block;margin:8px auto 0;padding:10px 28px;
  background:transparent;border:1px solid var(--accent);
  color:var(--accent);border-radius:20px;cursor:pointer;
  font-size:0.9rem;letter-spacing:0.15em;
  animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:0.6}50%{opacity:1}}
.next-btn:hover{background:rgba(181,143,222,0.1)}

#choices{margin-top:8px;display:flex;flex-direction:column;gap:10px}
#choices button{
  display:block;background:#1a1a24;padding:14px 18px;
  border-radius:8px;border:1px solid #2a2a36;
  color:var(--text);text-align:left;font-size:0.98rem;
  cursor:pointer;transition:all .2s;line-height:1.5;
}
#choices button:hover{background:#252535;border-color:var(--accent);transform:translateX(4px)}

#footer{margin-top:16px;color:var(--muted);font-size:0.85rem;text-align:center;min-height:1.2em}

/* モーダル */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,0.75);
  display:flex;align-items:center;justify-content:center;z-index:100;
  animation:fadeIn 0.2s ease;
}
.modal-inner{
  background:var(--card);padding:24px;border-radius:12px;
  width:min(420px,92vw);border:1px solid rgba(255,255,255,0.1);
  box-shadow:var(--shadow);
}
.modal-inner h2{margin:0 0 16px;color:var(--accent);font-size:1.1rem}

.slot{
  display:flex;justify-content:space-between;align-items:center;
  background:#1a1a24;padding:12px 14px;border-radius:8px;
  margin-bottom:10px;border:1px solid #2a2a36;cursor:pointer;
  transition:all .2s;
}
.slot:hover{background:#252535;border-color:var(--accent)}
.slot-info{flex:1}
.slot-title{font-weight:600;margin-bottom:2px}
.slot-meta{font-size:0.78rem;color:var(--muted)}
.slot-empty{color:var(--muted);font-style:italic}
.slot-actions button{
  margin-left:6px;padding:4px 10px;background:#252535;border:1px solid #3a3a46;
  color:var(--text);border-radius:4px;font-size:0.78rem;cursor:pointer;
}
.slot-actions button.danger{color:var(--danger);border-color:var(--danger)}

#modalCloseBtn{
  margin-top:8px;width:100%;padding:10px;background:#1a1a24;
  border:1px solid #2a2a36;color:var(--text);border-radius:6px;cursor:pointer;
}

/* ショッキング演出 */
.shock-flash{animation:shockFlash 0.5s}
@keyframes shockFlash{
  0%{background:rgba(255,0,0,0.4)}
  20%{background:rgba(255,0,0,0.2)}
  100%{background:transparent}
}
body.shake{animation:shake 0.4s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  10%,30%,50%,70%,90%{transform:translateX(-6px)}
  20%,40%,60%,80%{transform:translateX(6px)}
}

/* エンディング表示 */
.ending-happy #text{color:#c8e7c8}
.ending-bad #text{color:#e9b8b8}

.ending-img{
  display:block;
  width:100%;
  height:auto;
  margin:0 0 20px;
  border-radius:8px;
  box-shadow:0 12px 36px rgba(0,0,0,0.6);
  animation:endingAppear 2.2s ease;
}
@keyframes endingAppear{
  0%{opacity:0;transform:scale(1.03)}
  100%{opacity:1;transform:scale(1)}
}
.ending-happy .ending-img{
  box-shadow:0 12px 36px rgba(255,200,140,0.18), 0 4px 10px rgba(0,0,0,0.5);
}
.ending-bad .ending-img{
  box-shadow:0 12px 36px rgba(180,40,40,0.25), 0 4px 10px rgba(0,0,0,0.6);
}

@media (max-width:480px){
  #app{padding:16px}
  .panel{padding:20px}
  #text{font-size:1rem;line-height:1.85}
  h1{font-size:1.05rem}
  #controls button{padding:5px 8px;font-size:0.78rem}
}