:root{
  --color-background-primary:#ffffff;
  --color-background-translucent:rgba(255,255,255,0.72);
  --color-text-primary:#1f1d1a;
  --color-text-secondary:#6f6a63;
  --color-text-tertiary:#a39d94;
  --color-border-tertiary:rgba(31,29,26,0.12);
  --color-border-secondary:rgba(31,29,26,0.28);
}
@media (prefers-color-scheme: dark){
  :root{
    --color-background-primary:#1c1a17;
    --color-background-translucent:rgba(28,26,23,0.72);
    --color-text-primary:#efe9df;
    --color-text-secondary:#b3aca1;
    --color-text-tertiary:#827b71;
    --color-border-tertiary:rgba(239,233,223,0.14);
    --color-border-secondary:rgba(239,233,223,0.30);
  }
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:'Hiragino Mincho ProN','ヒラギノ明朝 ProN','Hiragino Mincho Pro','Shippori Mincho',serif;
}
.mincho{ font-family:'Hiragino Mincho ProN','ヒラギノ明朝 ProN','Hiragino Mincho Pro','Shippori Mincho',serif; }
#mono{
  position:fixed; inset:0;
  width:100%; height:100vh; height:100dvh;
  background:var(--color-background-primary);
  overflow:hidden;
}
@keyframes drift0 { 0%{transform:translate(0,0)} 50%{transform:translate(8px,-11px)} 100%{transform:translate(0,0)} }
@keyframes drift1 { 0%{transform:translate(0,0)} 50%{transform:translate(-9px,8px)} 100%{transform:translate(0,0)} }
@keyframes drift2 { 0%{transform:translate(0,0)} 50%{transform:translate(6px,9px)} 100%{transform:translate(0,0)} }
.qfloat{
  position:absolute;
  font-family:'Hiragino Mincho ProN','ヒラギノ明朝 ProN','Hiragino Mincho Pro','Shippori Mincho',serif;
  color:var(--color-text-secondary);
  cursor:pointer; line-height:1.7; text-align:center;
  /* 改行なしの問いが横に伸びきらないよう自然折り返しさせる。
     420px は #selected-text と同値。これより狭くすると、広い画面(base 25px × 倍率 1.32 ≒ 33px)で
     10文字前後の行が幅を超え、問いが意図した改行位置どおりに表示されなくなる */
  max-width:min(88vw, 420px);
  transition:opacity .8s ease, color .4s ease; will-change:transform;
}
.qfloat:hover{ color:var(--color-text-primary); }
.btn{
  font-family:inherit; cursor:pointer;
  border-radius:999px; display:inline-flex; align-items:center; gap:7px;
}

/* ここから: 元HTMLの要素ごとのインラインstyleを、登場順に外出ししたもの */

.top-title{
  position:absolute; z-index:2;
  top:max(2rem, env(safe-area-inset-top));
  left:0; right:0;
  text-align:center;
  padding:0 1rem;
}
.title-text{
  font-size:clamp(15px,4.4vw,17px);
  color:var(--color-text-primary);
  border-bottom:0.5px solid var(--color-text-tertiary);
  padding-bottom:7px;
}

#float-layer{
  position:absolute; inset:0; z-index:2;
}

/* 次の問いへ: 左下の小ボタンから中央下の主役ボタンへ改修。線画トーンは維持しつつ
   半透明+ぼかしで、漂う問いの上に重なっても文字が読めるようにする */
#next-batch{
  position:absolute; z-index:3;
  bottom:1.5rem; left:50%;
  transform:translateX(-50%);
  border:1px solid var(--color-border-secondary);
  background:var(--color-background-translucent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:14px 30px;
  font-size:15px;
  color:var(--color-text-secondary);
  transition:border-color .2s ease, color .2s ease, transform .15s ease;
}
#next-batch i{ font-size:17px; }
#next-batch:hover{
  border-color:var(--color-text-primary);
  color:var(--color-text-primary);
}
#next-batch:active{
  /* transformで中央寄せしているため、上書き時もtranslateX(-50%)を必ず含める
     (含め忘れるとボタンが右にずれる) */
  transform:translateX(-50%) scale(0.97);
}

#selected{
  position:absolute; inset:0; z-index:4;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem;
  background:var(--color-background-primary);
}
#selected-text{
  font-size:clamp(20px,6vw,27px);
  line-height:2;
  color:var(--color-text-primary);
  margin:0; max-width:420px;
  opacity:0; transform:translateY(16px);
  transition:opacity 1.4s ease, transform 1.4s ease;
}
#back{
  margin-top:3rem;
  border:0.5px solid var(--color-border-secondary);
  background:transparent;
  padding:9px 20px;
  font-size:13px;
  color:var(--color-text-secondary);
}
#back i{ font-size:15px; }