/* Rain, warm windows, and the quiet space between two people. */
:root { --accent:#b8d9ce; --accent-warm:#e8d5ac; --tb-bg:rgba(8,24,29,.9); --tb-border:rgba(184,217,206,.25); }
html,body { background:#081216; }
body { color:#f5f0e4; }
button { -webkit-appearance:none; }
button:focus-visible, .slot:focus-visible { outline:2px solid #e8d5ac; outline-offset:5px; }
#game { max-width:1600px; max-height:900px; }
#title-screen { align-items:flex-start; justify-content:center; }
#title-screen::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,16,22,.88) 0%,rgba(6,19,25,.64) 32%,rgba(5,16,22,.12) 65%,rgba(5,16,22,.08)),linear-gradient(0deg,rgba(3,14,21,.65),transparent 24%); pointer-events:none; }
.title-topline { position:absolute; z-index:1; top:5%; left:6.7%; right:6.7%; display:flex; align-items:center; gap:14px; font:10px/1.6 "Yu Gothic",sans-serif; letter-spacing:.23em; color:#d2ddd6; }
.title-topline>span:last-child { font-size:10px; letter-spacing:.17em; }
.brand-mark { color:#e0cba3; font-size:19px; }
.brand-rule { width:34px; height:1px; background:#cbd5cf66; }
.title-content { position:relative; margin-left:9%; width:405px; z-index:1; padding-top:15px; }
.title-kicker { font-size:12px; letter-spacing:.3em; color:#c0d2ce; margin-bottom:23px; }
#title-logo { font-size:clamp(38px,4.7vw,64px); font-weight:400; white-space:pre-line; line-height:1.5; letter-spacing:.13em; margin:0 0 18px -5px; text-shadow:0 2px 24px #05161d99; }
#title-sub { max-width:330px; font-size:12px; line-height:2; letter-spacing:.13em; color:#c2cfcc; margin-bottom:31px; text-align:left; }
.title-menu { width:270px; align-items:stretch; gap:8px; }
.title-menu .tbtn { width:100%; border-radius:2px; font-size:14px; letter-spacing:.2em; padding:13px 20px; text-align:left; background:#0d242d77; }
.title-menu .tbtn.primary { display:flex; justify-content:space-between; background:#d3e3d9; color:#19353b; border-color:#d3e3d9; }
.title-menu .tbtn.continue { display:flex; justify-content:space-between; }
.title-menu .tbtn.primary:hover { background:#e5eee6; border-color:#fff; }
.title-menu .tbtn.continue:disabled { opacity:.45; }
.title-secondary { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; margin-top:7px; }
.title-secondary .tbtn { border:0; border-bottom:1px solid #c4dad12c; padding:10px 0; font-size:11px; background:transparent; color:#cfdbd5; }
.title-menu .tbtn:hover:not(:disabled) { letter-spacing:.2em; transform:translateX(3px); }
.title-secondary .tbtn:hover:not(:disabled) { background:transparent; color:#fff; }
.title-whisper { position:absolute; right:10%; top:23%; writing-mode:vertical-rl; font-size:15px; line-height:2.3; letter-spacing:.3em; text-shadow:0 2px 10px #06151f; color:#fff4de; }
.title-bottom { position:absolute; z-index:1; bottom:5%; left:6.7%; right:6.7%; display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:.2em; color:#bbcbc6; }
#title-version { right:6.7%; bottom:2%; color:#a0b5b0; font:9px "Yu Gothic",sans-serif; letter-spacing:.1em; z-index:1; }
#vignette { background:linear-gradient(0deg,#07181b70,transparent 65%),radial-gradient(ellipse at center,transparent 45%,#04121b44); }
#chapter-label { position:absolute; left:5%; top:5%; z-index:4; padding:9px 15px; border-left:2px solid #d8cfaa; font-size:11px; letter-spacing:.18em; background:#0b202566; text-shadow:0 1px 5px #000; pointer-events:none; }
#textbox { width:90%; bottom:5%; min-height:25%; border-radius:2px; border:1px solid #c8d9ce4d; border-top:2px solid #9eafa18a; padding:33px 42px 30px; box-shadow:0 12px 40px #0310164d; backdrop-filter:blur(10px); background:linear-gradient(120deg,#0b2026f2,#10292cde); }
#textbox::after { content:"クリック / Enter"; position:absolute; bottom:12px; right:51px; font:8px "Yu Gothic",sans-serif; letter-spacing:.15em; color:#9bafaa; }
#namebox { top:-16px; left:29px; border-radius:1px; background:#cdded3; color:#19353b; font-size:15px; padding:5px 24px; border:0; letter-spacing:.16em; }
#text { font-size:20px; line-height:1.95; letter-spacing:.055em; text-shadow:none; }
#advance-indicator { right:26px; font-size:9px; bottom:13px; }
#menubar { right:5%; bottom:calc(5% + 25% + 13px); z-index:30; opacity:1; gap:2px; background:#0b2026c9; border-radius:2px; padding:3px 5px; }
.mbtn { background:transparent; border:0; border-radius:0; padding:6px 12px; font:10px "Yu Gothic",sans-serif; letter-spacing:.1em; color:#d3ded7; }
.mbtn:hover { background:#c4ded31a; }
.mbtn.active { color:#15383b; }
#choices { background:rgba(3,14,19,.45); backdrop-filter:blur(4px); gap:14px; padding-bottom:9%; }
.choice-btn { max-width:580px; width:60%; text-align:left; border-radius:2px; background:#10292fe8; padding:18px 28px; font-size:17px; border-color:#bed6cb66; box-shadow:0 8px 20px #0002; }
.choice-btn::before { content:"◇"; color:#dbcaa3; font-size:11px; margin-right:21px; }
.choice-btn:hover { background:#214149f2; border-color:#e3ddbf; transform:translateX(4px); }
.overlay { background:#0b1e23f7; padding:48px 64px; backdrop-filter:blur(14px); }
.overlay h2 { font-size:24px; color:#ddcda9; font-weight:400; }
.overlay .close-btn,.cfg-toggle,.tbtn { border-radius:2px; }
.slot-list { min-height:0; overflow-y:auto; padding:2px 6px 6px 2px; }
.slot { border-radius:2px; flex-shrink:0; }
.slot .slot-no { color:#c0d7cd; }
.slot.empty { opacity:.5; }
.cfg-row input { accent-color:#b7d7c9; }
.end-item { border-radius:2px; }
.end-item .e-type { color:#b6cbc3; font-family:"Yu Gothic",sans-serif; }
.end-item .e-desc { color:#b1c1bc; max-width:50%; line-height:1.8; }
.help-body { overflow:auto; padding-right:10px; }
.help-intro { font-size:22px; line-height:1.8; margin-bottom:25px; color:#e3d6b8; }
.help-body dl { display:grid; grid-template-columns:170px 1fr; gap:14px 22px; font-size:14px; line-height:1.8; }
.help-body dt { color:#c6d9cf; }
.help-body dd,.help-note { color:#afc1ba; }
.help-note { font-size:12px; line-height:2; margin-top:26px; }
#ending-screen { background:radial-gradient(ellipse at 50% 30%,#294b4b,#081b22 70%); }
#ending-name { color:#e1d9bf; font-size:38px; text-shadow:none; }
#ending-type { color:#a8c7be; }
.ebtn-row .tbtn { background:#b3cdc411; font-size:14px; }
#notice-overlay,#confirm-overlay { background:#091b21f5; }
.n-text { white-space:pre-line; }
@media (min-width:1450px) { .title-content { width:480px; } .title-menu { width:300px; } .title-kicker { font-size:14px; } #title-sub { font-size:14px; } }
@media (max-width:900px) and (orientation:portrait) {
  #game { width:100%; height:100%; max-width:none; max-height:none; }
  #title-screen { background-position:62% center!important; justify-content:center; }
  #title-screen::before { background:linear-gradient(90deg,#061820e0,#071c239c 55%,#081c2344),linear-gradient(0deg,#061820a8,transparent 50%); }
  .title-topline { top:4%; left:8%; right:8%; font-size:8px; gap:9px; }
  .title-topline>span:last-child { font-size:8px; }
  .brand-rule { width:15px; }
  .title-content { margin-left:10%; width:80%; padding-top:0; }
  .title-kicker { font-size:11px; letter-spacing:.15em; margin-bottom:25px; }
  #title-logo { text-align:left; font-size:clamp(36px,10vw,64px); letter-spacing:.12em; line-height:1.65; padding:0; margin:0 0 17px -3px; }
  #title-sub { font-size:11px; margin-bottom:28px; max-width:270px; }
  .title-menu { width:min(270px,100%); }
  .title-menu .tbtn { min-height:44px; }
  .title-whisper { display:none; }
  .title-bottom { left:8%; right:8%; bottom:4%; font-size:8px; letter-spacing:.08em; }
  #title-version { right:8%; bottom:1.5%; font-size:8px; }
  #chapter-label { top:80px; left:5%; font-size:10px; }
  #menubar { top:calc(10px + env(safe-area-inset-top,0px)); bottom:auto; left:3%; right:3%; flex-wrap:nowrap; justify-content:space-around; padding:3px 0; }
  .mbtn { padding:12px 6px; font-size:10px; }
  #textbox { width:94%; min-height:28%; bottom:calc(12px + env(safe-area-inset-bottom,0px)); padding:29px 23px 32px; }
  #text { font-size:17px; line-height:1.95; }
  #namebox { left:15px; font-size:14px; }
  #choices { padding-bottom:20%; gap:13px; }
  .choice-btn { width:88%; font-size:15px; padding:18px 15px; }
  .choice-btn::before { margin-right:12px; }
  .overlay { padding:24px 20px; }
  .overlay h2 { font-size:20px; margin-bottom:25px; padding-right:85px; }
  .overlay .close-btn { top:20px; right:20px; }
  .help-intro { font-size:20px; }
  .help-body dl { display:block; font-size:14px; }
  .help-body dt { margin:18px 0 4px; }
  .help-note { font-size:11px; }
  .end-item .e-desc { max-width:100%; }
  #ending-name { font-size:28px; }
}
@media (max-height:520px) and (orientation:landscape) {
  .title-topline { top:4%; font-size:8px; }
  .title-content { margin-left:8%; padding-top:12px; width:78%; display:grid; grid-template-columns:1fr 1fr; column-gap:35px; }
  .title-kicker { grid-column:1; font-size:10px; margin:0 0 8px; }
  #title-logo { grid-column:1; font-size:34px; margin:0; line-height:1.6; }
  #title-sub { grid-column:1; margin:8px 0 0; font-size:10px; }
  .title-menu { grid-column:2; grid-row:1 / 4; width:230px; flex-direction:column; gap:5px; align-self:center; }
  .title-menu .tbtn { font-size:12px; padding:9px 15px; }
  .title-secondary { margin-top:0; }
  .title-secondary .tbtn { font-size:10px; padding:8px 0; }
  .title-whisper { display:none; }
  .title-bottom { bottom:4%; font-size:8px; }
  #chapter-label { top:13%; font-size:9px; padding:6px 10px; }
  #textbox { bottom:4%; min-height:32%; padding:23px 25px 23px; }
  #text { font-size:15px; line-height:1.75; min-height:3.5em; }
  #namebox { font-size:12px; top:-12px; padding:3px 16px; }
  #menubar { top:4%; bottom:auto; left:auto; right:5%; }
  .mbtn { padding:7px 10px; font-size:9px; }
  #choices { padding-bottom:0; gap:9px; }
  .choice-btn { font-size:13px; padding:10px 18px; min-height:40px; }
  .overlay { padding:18px 28px; }
  .overlay h2 { font-size:18px; margin-bottom:16px; }
  .help-intro { font-size:17px; }
  .help-body dl { font-size:12px; gap:10px; }
  .ebtn-row .tbtn { width:220px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }