/* ============================================================
   星約のアレイダ — 画面
   ============================================================ */
:root{
  --bg:#0b0d12; --bg2:#12151d; --bg3:#181c26;
  --line:#2a3040; --line2:#3a4358;
  --fg:#d6dae4; --fg2:#98a0b3; --fg3:#6b7488;
  --accent:#6fc6ee; --accent2:#a9e2fa;
  --white:#dcd8cc; --black:#9a8fa8; --red:#c05a52; --blue:#5b9dd9; --green:#7f8f5c;
  --maxw:1080px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Hiragino Mincho ProN","Yu Mincho",'Noto Serif JP',serif;
  font-size:14.5px; line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--fg); text-decoration:none}
a:hover{color:#fff}
button{font-family:inherit}

/* --- ヘッダ（できるだけ低く。本体を大きく） ---------------- */
header.site{
  border-bottom:1px solid var(--line);
  background:rgba(11,13,18,.94); backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:50;
}
.hwrap{max-width:var(--maxw); margin:0 auto; padding:0 10px}
.brand{display:flex; align-items:center; gap:9px; padding:6px 2px 5px}
.brand .mark{display:block; flex:0 0 auto; line-height:0}
.brand .mark img{height:17px; width:auto; display:block}
.brand .ttl{
  font-size:13px; letter-spacing:.14em; color:#e8ecf4; white-space:nowrap;
  padding-left:9px; border-left:1px solid var(--line2);
}
.brand .sub{font-size:9px; color:var(--fg3); letter-spacing:.14em; white-space:nowrap}

/* アイコンの並び。場所を食わず、見た目で分かる */
nav.main{display:flex; gap:4px; padding-bottom:5px}
nav.main a{
  flex:1 1 auto; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:5px 3px 4px; color:var(--fg3);
  background:var(--bg2); border:1px solid var(--line); border-radius:3px;
}
nav.main a .ic{
  width:18px; height:18px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
nav.main a .lb{font-size:min(9.5px,2.55vw); letter-spacing:0; white-space:nowrap}
nav.main a:hover{color:var(--fg); border-color:var(--line2); background:var(--bg3)}
nav.main a.on{color:var(--accent2); border-color:var(--accent); background:#0f2029}

@media(min-width:720px){
  .hwrap{padding:0 16px}
  .brand{padding:9px 2px 7px; gap:12px}
  .brand .mark img{height:22px}
  .brand .ttl{font-size:16px; padding-left:12px}
  .brand .sub{font-size:10px}
  nav.main{gap:6px; padding-bottom:8px}
  nav.main a{flex:0 0 auto; overflow:visible; flex-direction:row; gap:7px; padding:6px 14px}
  nav.main a .ic{width:16px; height:16px}
  nav.main a .lb{font-size:12px; letter-spacing:.08em}
}
@media(max-width:400px){
  .brand .sub{display:none}
}

/* 読み始めたら、題字の行はたたむ。アイコンの列だけを残す。
   本文を読んでいる間、ヘッダが食う高さは半分になる。 */
.brand{transition:height .16s ease, padding .16s ease, opacity .16s ease}
header.site.shrunk .brand{height:0; padding-top:0; padding-bottom:0; opacity:0; overflow:hidden}

/* --- 協定帯（発動中のみ出す） ------------------------------ */
.gentlemen-bar{
  background:linear-gradient(90deg,#3a1414,#5a1c1c,#3a1414);
  border-bottom:1px solid #7a2a2a; color:#ffd9d9;
  text-align:center; padding:9px; font-size:13px; letter-spacing:.14em;
}

/* --- 本体 ------------------------------------------------- */
main{max-width:var(--maxw); margin:0 auto; padding:16px 12px 70px}
@media(min-width:720px){ main{padding:24px 16px 90px} }
h1.page{font-size:19px; letter-spacing:.12em; margin:0 0 4px; color:#fff; font-weight:normal}
@media(min-width:720px){ h1.page{font-size:22px; letter-spacing:.16em} }
.lede{color:var(--fg3); font-size:12px; letter-spacing:.06em; margin:0 0 18px; line-height:1.75}
h2.sec{
  font-size:13px; letter-spacing:.16em; color:var(--fg2); font-weight:normal;
  margin:26px 0 10px; padding-bottom:5px; border-bottom:1px solid var(--line);
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media(max-width:820px){ .grid2{grid-template-columns:1fr} .grid3{grid-template-columns:1fr 1fr} }
@media(max-width:440px){ .grid3{grid-template-columns:1fr} }

.card{
  background:var(--bg2); border:1px solid var(--line); padding:13px 14px;
}
@media(min-width:720px){ .card{padding:16px 18px} }
.card.hover:hover{border-color:var(--line2); background:var(--bg3)}
.card h3{margin:0 0 6px; font-size:16px; font-weight:normal; color:#fff}
.muted{color:var(--fg3); font-size:12.5px}
.small{font-size:12.5px}
.kv{display:grid; grid-template-columns:8em 1fr; gap:2px 14px; font-size:13.5px}
.kv dt{color:var(--fg3)}
.kv dd{margin:0}

/* --- 組織色 ----------------------------------------------- */
.f-white{color:var(--white)} .f-black{color:var(--black)}
.f-red{color:var(--red)}     .f-blue{color:var(--blue)}
.chip{
  display:inline-block; font-size:11px; letter-spacing:.12em; padding:2px 9px;
  border:1px solid currentColor; border-radius:2px; vertical-align:middle;
}
.bar-white{border-left:3px solid var(--white)}
.bar-black{border-left:3px solid var(--black)}
.bar-red{border-left:3px solid var(--red)}
.bar-blue{border-left:3px solid var(--blue)}

/* --- 選択肢：四つを同じ大きさで並べる（72 6-3） ------------ */
.choices{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:14px 0 6px}
@media(max-width:820px){ .choices{grid-template-columns:1fr} }
.choice{
  background:var(--bg2); border:1px solid var(--line2); padding:15px 17px;
  display:flex; gap:14px; align-items:flex-start; min-height:104px;
}
.choice .key{
  font-size:26px; line-height:1; color:var(--accent); letter-spacing:0;
  font-family:Georgia,serif; min-width:1.2em;
}
.choice .lab{font-size:15px; color:#fff; margin-bottom:5px}
.choice .dsc{font-size:12.5px; color:var(--fg2); line-height:1.7}

/* --- 表 --------------------------------------------------- */
table.t{width:100%; border-collapse:collapse; font-size:13.5px}
table.t th,table.t td{border-bottom:1px solid var(--line); padding:9px 10px; text-align:left; vertical-align:top}
table.t th{color:var(--fg3); font-weight:normal; font-size:12px; letter-spacing:.1em}

/* --- 参加者リスト ----------------------------------------- */
.plist{display:flex; flex-wrap:wrap; gap:8px}
.plist a, .plist span{
  display:inline-block; padding:6px 12px; font-size:13px;
  background:var(--bg3); border:1px solid var(--line);
}
.plist a:hover{border-color:var(--line2); background:#1e2330}

/* --- 本文（リアクション） --------------------------------- */
.reaction{font-size:15px; line-height:2.05; letter-spacing:.02em}
.reaction h3{
  font-size:15px; color:var(--accent); font-weight:normal; letter-spacing:.16em;
  margin:38px 0 14px; padding-bottom:5px; border-bottom:1px solid var(--line);
}
.reaction p{margin:0 0 1.1em}
.reaction .anchor{scroll-margin-top:62px}
mark.me{background:rgba(111,198,238,.20); color:#fff; padding:0 2px}

/* --- タブ ------------------------------------------------- */
.tabs{display:flex; gap:0; border-bottom:1px solid var(--line); margin:0 0 20px}
.tabs button{
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--fg3); padding:9px 16px; font-size:13px; letter-spacing:.1em; cursor:pointer;
}
.tabs button.on{color:#fff; border-bottom-color:var(--accent)}
.tabs button:hover{color:var(--fg)}

/* --- ビジュアルノベル ------------------------------------- */
.vn{
  position:relative; width:100%; aspect-ratio:16/9; min-height:340px;
  border:1px solid var(--line2); overflow:hidden; background:#000; cursor:pointer;
  user-select:none;
}
.vn .bg{position:absolute; inset:0; transition:opacity .35s}
.bg-ship{background:radial-gradient(circle at 60% 35%,#1b2740,#080b12 70%)}
.bg-port{background:linear-gradient(180deg,#101828,#1d2438 55%,#0a0d14)}
.bg-street{background:linear-gradient(180deg,#150f1a,#241a2c 50%,#0d0910)}
.bg-hangar{background:linear-gradient(180deg,#14161a,#26221c 60%,#0c0d10)}
.bg-space{background:radial-gradient(circle at 30% 30%,#141a2e,#04060c 70%)}
.bg-war{background:radial-gradient(circle at 50% 70%,#3a1410,#0a0608 65%)}
.bg-sky{background:linear-gradient(180deg,#2a4a72,#6d9ac4 60%,#c6d8e8)}
.vn .stars{position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),
                   radial-gradient(1px 1px at 70% 20%,#fff,transparent),
                   radial-gradient(1px 1px at 45% 65%,#fff,transparent),
                   radial-gradient(1px 1px at 85% 55%,#fff,transparent),
                   radial-gradient(1px 1px at 12% 80%,#fff,transparent);}
.vn .stage{position:absolute; left:0; right:0; bottom:150px; display:flex; justify-content:center}
.vn .box{
  position:absolute; left:0; right:0; bottom:0; min-height:150px;
  background:linear-gradient(180deg,rgba(6,8,12,.72),rgba(6,8,12,.94));
  border-top:1px solid var(--line2); padding:16px 22px 20px;
}
.vn .who{font-size:13px; color:var(--accent); letter-spacing:.14em; margin-bottom:8px; min-height:1.2em}
.vn .say{font-size:16px; line-height:1.95; color:#eef1f6}
.vn .next{position:absolute; right:18px; bottom:14px; color:var(--fg3); font-size:12px}
.vn .prog{position:absolute; top:0; left:0; height:2px; background:var(--accent); transition:width .2s; z-index:5}

/* 立ち絵。絵がない者も、絵がある者と同じ枠で立つ（72 6-10） */
.portrait{width:150px; height:210px; position:relative}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:top}
.portrait .ph{
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; gap:8px; padding-bottom:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.13));
  border:1px solid rgba(255,255,255,.18);
  clip-path:polygon(50% 0%,72% 9%,80% 26%,94% 42%,90% 100%,10% 100%,6% 42%,20% 26%,28% 9%);
}
.portrait .ph .ini{font-size:34px; color:rgba(255,255,255,.85); letter-spacing:0}
.portrait .ph .av{font-size:10px; color:rgba(255,255,255,.55); letter-spacing:.1em}

/* --- 掲示板 ----------------------------------------------- */
.thread{border:1px solid var(--line); background:var(--bg2); margin-bottom:12px}
.thread .th{padding:11px 15px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:10px}
.thread .post{padding:11px 15px; border-bottom:1px dashed var(--line); font-size:14px}
.thread .post:last-child{border-bottom:none}

/* --- 状態バッジ ------------------------------------------- */
.badge{font-size:11px; letter-spacing:.1em; padding:2px 8px; border:1px solid var(--line2); color:var(--fg3)}
.badge.active{color:#8fc98f; border-color:#3d5b3d}
.badge.retired{color:#c9b98f; border-color:#5b533d}
.badge.deceased{color:#c98f8f; border-color:#5b3d3d}

/* --- フォーム --------------------------------------------- */
.form{display:grid; grid-template-columns:9em 1fr; gap:12px 16px; align-items:start; font-size:14px}
.form label{color:var(--fg2); font-size:13px; padding-top:7px}
.form input,.form select,.form textarea{
  width:100%; background:var(--bg3); color:var(--fg); border:1px solid var(--line2);
  padding:7px 10px; font-family:inherit; font-size:14px;
}
.form textarea{min-height:80px; line-height:1.8}
.req{color:var(--accent); font-size:10px; margin-left:5px; letter-spacing:.1em}
.hint{color:var(--fg3); font-size:12px; margin-top:4px; grid-column:2}
.preview{
  grid-column:1/-1; background:var(--bg3); border:1px dashed var(--line2);
  padding:12px 14px; font-size:17px; letter-spacing:.06em; color:#fff;
}
@media(max-width:820px){ .form{grid-template-columns:1fr} .form label{padding-top:0} .hint{grid-column:1} }

.btn{
  display:inline-block; background:var(--bg3); color:var(--fg); border:1px solid var(--line2);
  padding:9px 20px; font-size:13.5px; letter-spacing:.12em; cursor:pointer;
}
.btn:hover{border-color:var(--accent); color:#fff}
.btn.primary{background:#123040; border-color:var(--accent); color:var(--accent2)}

/* --- フッタ ----------------------------------------------- */
footer.site{
  border-top:1px solid var(--line); background:#080a0f; margin-top:30px;
  padding:16px 12px 30px;
}
footer.site .fwrap{max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:8px 22px}
footer.site a{font-size:12px; color:var(--fg3); letter-spacing:.1em}
footer.site a:hover{color:var(--fg)}
footer.site .report{color:#d9a; border-bottom:1px solid currentColor}

/* --- 注記（第一版の但し書き） ------------------------------ */
.wip{
  border:1px dashed var(--line2); background:rgba(111,198,238,.06);
  padding:10px 14px; font-size:12px; color:var(--fg3); margin:16px 0; letter-spacing:.06em;
}

/* --- トップの見出し部（画面を食わせない） ------------------ */
.hero{text-align:center; padding:14px 0 13px; border-bottom:1px solid var(--line); margin-bottom:4px}
.hero .k{font-size:9.5px; letter-spacing:.3em; color:var(--fg3)}
.hero .t{font-size:clamp(21px,6.2vw,32px); letter-spacing:.22em; color:#fff; margin:6px 0 7px; line-height:1.3}
.hero .c{font-size:11px; color:var(--fg2); line-height:1.8}
.hero .b{margin-top:11px}
@media(min-width:720px){ .hero{padding:26px 0 22px} .hero .c{font-size:12.5px} }

/* --- トップのキービジュアル ------------------------------- */
.hero{
  position:relative; overflow:hidden;
  margin:-16px -12px 8px;
  border-bottom:1px solid var(--line);
  background:#05070c;
}
.hero .kvimg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:64% 16%;
  opacity:.92;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(5,7,12,.45) 0%, rgba(5,7,12,.06) 26%,
                            rgba(5,7,12,.80) 66%, var(--bg) 100%);
}
.hero .hin{
  position:relative; z-index:2; text-align:center;
  padding:168px 14px 16px;
  text-shadow:0 2px 14px rgba(0,0,0,.9), 0 0 30px rgba(0,0,0,.8);
}
.hero .k{font-size:9.5px; letter-spacing:.3em; color:#9fb3c6}
.hero .t{font-size:clamp(22px,6.6vw,34px); letter-spacing:.22em; color:#fff; margin:6px 0 8px; line-height:1.3}
.hero .c{font-size:11px; color:#c6cfdb; line-height:1.85}
.hero .b{margin-top:13px}
@media(min-width:720px) and (max-width:899px){
  .hero{margin:-24px -16px 12px}
  .hero .hin{padding:230px 16px 26px}
  .hero .c{font-size:12.5px}
}
/* 広い画面では、絵を右の欄に置く。引き伸ばさないので、絵が眠くならない。 */
@media(min-width:900px){
  .hero{
    display:flex; align-items:stretch; height:376px;
    margin:-24px -16px 14px; background:transparent; border-bottom:1px solid var(--line);
  }
  .hero .kvimg{
    position:relative; inset:auto; order:2;
    width:44%; max-width:506px; height:100%; object-fit:cover;
    object-position:56% 10%; opacity:1;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);
            mask-image:linear-gradient(90deg,transparent 0,#000 30%);
  }
  .hero::after{
    background:linear-gradient(180deg,transparent 76%,var(--bg) 100%);
  }
  .hero .hin{
    order:1; flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; justify-content:center;
    text-align:left; padding:44px 20px 44px 6px; text-shadow:none;
  }
  .hero .t{font-size:38px; margin:10px 0 14px}
  .hero .c{font-size:13px; line-height:2}
  .hero .b{margin-top:20px}
}

/* --- シナリオ本文 ----------------------------------------- */
.jakku{
  font-size:15px; color:var(--accent2); letter-spacing:.08em; line-height:1.8;
  border-left:2px solid var(--accent); padding:2px 0 2px 12px; margin:0 0 6px;
}
@media(min-width:720px){ .jakku{font-size:17px} }
.intro{line-height:2.05; font-size:14px}
@media(min-width:720px){ .intro{font-size:14.5px} }
.blk{white-space:pre-wrap}
hr.scene{
  border:0; border-top:1px solid var(--line2); margin:26px 0;
}
.choice .dif{font-size:11px; color:var(--accent); letter-spacing:.1em; margin-bottom:6px}
.choice .dsc{white-space:pre-wrap}

/* --- 折りたたみ（シナリオ資料） --------------------------- */
details.fold{
  background:var(--bg2); border:1px solid var(--line); margin-bottom:8px;
}
details.fold > summary{
  cursor:pointer; padding:11px 14px; font-size:13.5px; color:var(--fg2);
  letter-spacing:.08em; list-style:none;
}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::before{content:'＋　'; color:var(--accent)}
details.fold[open] > summary::before{content:'−　'}
details.fold > summary:hover{color:#fff; background:var(--bg3)}
.foldbody{
  padding:2px 14px 16px; font-size:13px; line-height:1.95; color:var(--fg2);
  border-top:1px solid var(--line);
}
.foldbody .blk{padding-top:12px}

/* --- 知らせの帯（保存できた／できなかった） ---------------- */
.notice{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,14px);
  max-width:calc(100% - 28px); padding:11px 20px; font-size:13.5px; letter-spacing:.04em;
  border:1px solid var(--line2); background:#161b25; color:var(--fg);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:200;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}
.notice.show{opacity:1; transform:translate(-50%,0)}
.notice.ok{border-color:var(--accent); color:var(--accent2)}
.notice.ng{border-color:#8c4a44; color:#f0b8b2}

/* --- ヘッダ右肩のアカウント欄 ------------------------------ */
#acct{
  margin-left:auto; flex:0 1 auto; min-width:0;
  display:flex; gap:10px; align-items:baseline; white-space:nowrap; overflow:hidden;
}
#acct a{font-size:10.5px; color:var(--fg3); letter-spacing:.06em; flex:0 0 auto}
#acct a:hover{color:var(--fg)}
/* 名前が長くても、ほかの押し場所を押し出さない */
#acct a.who{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
/* 最後の手段として、作品名のほうを詰める */
.brand .ttl{min-width:0; overflow:hidden; text-overflow:ellipsis}
@media(min-width:720px){ #acct{gap:14px} #acct a{font-size:12px} }

/* --- スレッド一覧 ------------------------------------------ */
.tlist{border-top:1px solid var(--line)}
.trow{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:12px 4px; border-bottom:1px solid var(--line);
}
.trow:hover{background:var(--bg2)}
.trow .ti{font-size:14.5px; color:var(--fg)}
.trow .tm{flex:0 0 auto}
@media(max-width:520px){
  .trow{flex-direction:column; gap:3px}
}
.thread .post .pmeta{margin-bottom:5px}
.thread .post .pbody{white-space:pre-wrap; line-height:1.95}

/* --- 立ち上がりを待つ間 ------------------------------------ */
.booting{
  text-align:center; padding:80px 20px; color:var(--fg2);
  font-size:15px; letter-spacing:.1em; line-height:2.2;
}