/* ============ 汽水駅 / style ============ */

:root{
  --bg:#0d1117;
  --bg2:#131a24;
  --ink:#dfe6ee;
  --ink-dim:#8b98a8;
  --line:#243040;
  --accent:#e2564c;      /* 赤い傘 */
  --accent2:#f0c060;     /* ホームの照明 */
  --btn:#18212e;
  --btn-hi:#1f2c3d;
  --pad: clamp(18px, 5vw, 34px);
  --fs: clamp(16px, 4.3vw, 18.5px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* hidden 属性は display 指定より必ず優先させる。
   .logpane{display:flex} のような作者スタイルは UA の [hidden]{display:none}
   を上書きしてしまい、閉じたはずの要素が画面に残る（＝タップを奪う）。 */
[hidden]{ display:none !important; }

html,body{ margin:0; padding:0; height:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  font-size:var(--fs);
  line-height:2.0;
  letter-spacing:.02em;
  overflow:hidden;
  overscroll-behavior:none;
}

/* 背景の霧 */
body::before{
  content:"";
  position:fixed; inset:-20%;
  background:
    radial-gradient(60% 40% at 30% 20%, rgba(120,150,190,.10), transparent 70%),
    radial-gradient(50% 40% at 75% 70%, rgba(90,120,160,.09), transparent 70%);
  filter:blur(8px);
  animation:drift 34s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes drift{
  from{ transform:translate3d(-3%,0,0) scale(1); }
  to  { transform:translate3d(3%,-2%,0) scale(1.1); }
}

/* ムード */
body.mood-warm::before{ background:radial-gradient(55% 40% at 50% 55%, rgba(240,192,96,.13), transparent 72%); }
body.mood-fog::before { background:radial-gradient(70% 55% at 50% 45%, rgba(190,205,220,.14), transparent 75%); }
body.mood-dawn::before{ background:linear-gradient(180deg, rgba(120,170,220,.16), rgba(240,192,96,.10) 70%, transparent); }

/* ---------- 画面 ---------- */
.screen{
  position:fixed; inset:0;
  display:none;
  z-index:1;
  padding: max(env(safe-area-inset-top), 0px) 0 max(env(safe-area-inset-bottom), 0px);
}
.screen.is-active{ display:flex; }

/* ---------- タイトル ---------- */
#title{ align-items:center; justify-content:center; }
.title-inner{
  width:100%; max-width:620px;
  padding:var(--pad);
  text-align:center;
  animation:fadeUp .9s ease both;
}
.title-kicker{
  font-size:.72em; letter-spacing:.32em; color:var(--ink-dim);
  margin:0 0 1.4em; text-indent:.32em;
}
.title-main{
  font-size:clamp(3rem,17vw,5.2rem);
  margin:0; font-weight:400; letter-spacing:.22em; text-indent:.22em;
  text-shadow:0 0 34px rgba(240,192,96,.22);
}
.title-ruby{
  font-size:.66em; letter-spacing:.24em; color:var(--ink-dim);
  margin:.3em 0 2.2em; text-indent:.24em;
}
.title-lead{
  font-size:.9em; line-height:2.1; color:#c3ccd8; margin:0 0 2.4em;
}
.title-note{
  margin:2em 0 0; font-size:.72em; color:var(--ink-dim); letter-spacing:.06em;
}

/* ---------- ボタン ---------- */
.title-btns{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.btn{
  appearance:none;
  font-family:inherit; font-size:.94em; letter-spacing:.14em; text-indent:.14em;
  color:var(--ink);
  background:var(--btn);
  border:1px solid var(--line);
  border-radius:3px;
  padding:16px 18px;
  min-height:54px;
  cursor:pointer;
  transition:background .18s, border-color .18s, transform .12s;
}
.btn:active{ transform:scale(.985); background:var(--btn-hi); }
.btn-primary{ border-color:#3a4c66; background:#1a2534; }
.btn-ghost{ background:transparent; color:var(--ink-dim); }
@media (hover:hover){
  .btn:hover{ background:var(--btn-hi); border-color:#3d506b; }
}

.icon-btn{
  appearance:none; background:none; border:0; color:var(--ink-dim);
  font-size:1.25rem; line-height:1; width:44px; height:44px;
  border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
}
.icon-btn:active{ background:rgba(255,255,255,.06); }
.icon-btn[disabled]{ opacity:.25; pointer-events:none; }

/* ---------- ゲーム ---------- */
#game{ flex-direction:column; }

.bar{
  display:flex; align-items:center; gap:8px;
  padding:6px max(8px, calc(var(--pad) - 14px));
  border-bottom:1px solid rgba(255,255,255,.05);
  flex:0 0 auto;
}
.bar-items{
  flex:1; min-width:0;
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
  font-size:.66em; color:var(--ink-dim); letter-spacing:.08em;
}
.bar-items span{
  border:1px solid var(--line); border-radius:2px;
  padding:2px 8px; white-space:nowrap;
  animation:fadeUp .5s ease both;
}

.scene{
  flex:1; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(20px,6vw,44px) var(--pad) calc(var(--pad) + 20px);
  scroll-behavior:smooth;
}

/* ---------- 立ち絵（インラインSVG） ---------- */
.art{
  display:flex; justify-content:center;
  margin:0 0 clamp(20px,6vw,32px);
  animation:fadeUp .8s ease both;
}
.art svg{
  width:clamp(126px,36vw,180px); height:auto;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));
  animation:bob 3.8s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

.text p{
  margin:0 0 1.5em;
  animation:fadeUp .75s ease both;
  text-wrap:pretty;
}
.text p:last-child{ margin-bottom:0; }

.choices{
  display:flex; flex-direction:column; gap:10px;
  margin-top:clamp(28px,8vw,52px);
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:clamp(20px,5vw,30px);
}
.choice{
  appearance:none; font-family:inherit; font-size:.92em;
  text-align:left; line-height:1.7;
  color:var(--ink);
  background:var(--btn);
  border:1px solid var(--line);
  border-left:2px solid #3a4c66;
  border-radius:3px;
  padding:15px 16px; min-height:54px;
  cursor:pointer;
  animation:fadeUp .5s ease both;
  transition:background .18s, border-color .18s, transform .12s;
}
.choice:active{ transform:scale(.99); background:var(--btn-hi); }
@media (hover:hover){
  .choice:hover{ background:var(--btn-hi); border-left-color:var(--accent2); }
}
.choice .num{ color:var(--ink-dim); font-size:.85em; margin-right:.7em; }

.skip-hint{
  text-align:center; font-size:.7em; color:var(--ink-dim);
  letter-spacing:.2em; margin-top:2.4em;
  animation:blink 2.2s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:.25} 50%{opacity:.75} }

/* ---------- エンディング ---------- */
#ending, #gallery{ align-items:flex-start; justify-content:center; overflow-y:auto; }
.ending-inner{
  width:100%; max-width:640px;
  padding:clamp(40px,12vw,80px) var(--pad) calc(var(--pad) + 40px);
  animation:fadeUp 1s ease both;
}
.ending-label{
  font-size:.66em; letter-spacing:.4em; color:var(--ink-dim); margin:0 0 .8em;
}
.ending-title{
  font-size:clamp(1.9rem,9vw,2.7rem); font-weight:400; margin:0;
  letter-spacing:.12em;
  color:var(--accent2);
}
.ending-sub{
  margin:.5em 0 2.4em; font-size:.8em; color:var(--ink-dim); letter-spacing:.1em;
}
.text-ending p{ animation-duration:1.1s; }
.ending-count{
  margin:2.6em 0 1.6em; font-size:.76em; color:var(--ink-dim);
  border-top:1px solid rgba(255,255,255,.07); padding-top:1.6em; letter-spacing:.1em;
}

/* ---------- ギャラリー ---------- */
.gallery-title{
  font-weight:400; font-size:1.5rem; letter-spacing:.2em; margin:0 0 1.6em;
}
.gallery-list{ list-style:none; margin:0 0 2.4em; padding:0; }
.gallery-list li{
  display:flex; align-items:baseline; gap:.9em;
  padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.92em;
}
.gallery-list .gid{ font-size:.78em; color:var(--ink-dim); letter-spacing:.1em; }
.gallery-list .locked{ color:#4d5a6b; }

/* ---------- ログ ---------- */
.logpane{
  position:fixed; inset:0; z-index:20;
  background:rgba(6,9,13,.86);
  backdrop-filter:blur(3px);
  display:flex; justify-content:center;
  animation:fade .25s ease both;
}
.logpane-inner{
  width:100%; max-width:640px; display:flex; flex-direction:column;
  padding: max(env(safe-area-inset-top),8px) 0 max(env(safe-area-inset-bottom),8px);
}
.logpane-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px var(--pad); font-size:.78em; color:var(--ink-dim);
  letter-spacing:.16em;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.logbody{
  flex:1; overflow-y:auto; padding:20px var(--pad) 40px;
  font-size:.86em; line-height:1.95; color:#b9c3cf;
}
.logbody p{ margin:0 0 1.1em; }
.logbody .lg-choice{
  color:var(--accent2); font-size:.92em; margin:1.6em 0 1.6em;
  padding-left:.8em; border-left:2px solid rgba(240,192,96,.35);
}

/* ---------- アニメーション ---------- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{opacity:0} to{opacity:1} }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* 横向き・大画面で中央寄せ */
@media (min-width:700px){
  .scene{ display:flex; flex-direction:column; align-items:center; }
  .text, .choices{ width:100%; max-width:620px; }
  .skip-hint{ width:100%; }
}