:root{
  --bg: #07080a;
  --bg-panel: #101214;
  --bg-panel-2: #16181b;
  --line: #2a2d31;
  --text: #e8e6e1;
  --text-dim: #918d86;
  --accent: #c0392b;
  --accent-bright: #ff4d3d;
  --accent-soft: #7a2a22;
  --safe: #4d9375;
  --warn: #d4a13d;
  --mono: 'Noto Sans JP', sans-serif;
  --serif: 'Shippori Mincho', serif;
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:var(--bg); color:var(--text);
  font-family:var(--mono);
  overflow:hidden;
}

#noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#app{
  position:relative; width:100%; height:100%;
}

.screen{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  flex-direction:column;
  padding:24px;
  overflow-y:auto;
}
.screen.active{ display:flex; animation:fadeIn .5s ease; }

@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.btn{
  font-family:var(--mono);
  font-size:15px; font-weight:700;
  padding:14px 28px;
  border-radius:4px;
  border:1px solid var(--line);
  background:var(--bg-panel-2);
  color:var(--text);
  cursor:pointer;
  letter-spacing:0.04em;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); border-color:var(--text-dim); }
.btn:active{ transform:translateY(0); }
.btn.hidden{ display:none; }

.btn-primary{ background:var(--accent-soft); border-color:var(--accent); }
.btn-primary:hover{ background:var(--accent); }
.btn-ghost{ background:transparent; }
.btn-open{ background:#1d3a2e; border-color:var(--safe); }
.btn-open:hover{ background:#255139; }
.btn-close{ background:#3a1d1d; border-color:var(--accent); }
.btn-close:hover{ background:#512525; }

/* ===== タイトル ===== */
#screen-title{ text-align:center; }
.title-wrap{ position:relative; max-width:560px; }
.title-static{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:0.5em; color:var(--accent);
  opacity:0.5; animation:flicker 3.2s infinite;
}
@keyframes flicker{
  0%,100%{opacity:0.5;} 42%{opacity:0.5;} 43%{opacity:0.1;} 44%{opacity:0.5;}
  71%{opacity:0.5;} 72%{opacity:0.05;} 73%{opacity:0.5;}
}
.game-title{
  font-family:var(--serif);
  font-size:clamp(28px,6vw,46px);
  margin:0 0 8px;
  letter-spacing:0.03em;
}
.censored-tag{
  color:var(--accent-bright);
  background:#1a0d0c;
  padding:0 6px;
  filter: blur(0.2px);
}
.title-sub{ color:var(--text-dim); margin:0 0 40px; font-size:14px; letter-spacing:0.1em; }
.title-menu{ display:flex; flex-direction:column; gap:14px; align-items:center; }
.title-menu .btn{ width:260px; }
.title-credit{ margin-top:48px; color:#4a4844; font-size:11px; letter-spacing:0.05em; }

/* ===== howto ===== */
.panel{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:6px;
  padding:32px;
  max-width:640px;
  width:100%;
}
.panel.narrow{ max-width:520px; }
.panel h2{ font-family:var(--serif); margin-top:0; }
.howto-list{ padding-left:18px; line-height:1.9; color:#cfcbc4; font-size:14px; }
.howto-list li{ margin-bottom:10px; }
#screen-howto .btn{ margin-top:12px; }

/* ===== テレビ ===== */
.tv-wrap{ display:flex; flex-direction:column; align-items:center; gap:28px; }
.tv-frame{
  width:min(600px,90vw); aspect-ratio:4/3;
  background:#000; border:14px solid #1c1c1c; border-radius:12px;
  box-shadow:0 0 60px rgba(0,0,0,0.8), inset 0 0 30px rgba(0,0,0,0.9);
  position:relative;
}
.tv-screen{
  position:relative; width:100%; height:100%; overflow:hidden;
  background:radial-gradient(ellipse at center, #0d1a12 0%, #030403 80%);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.tv-scanline{
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 2px, transparent 3px);
  animation:scanmove 6s linear infinite;
  pointer-events:none;
}
@keyframes scanmove{ from{background-position-y:0;} to{background-position-y:100px;} }
.tv-text{
  color:#9fdcb0; font-size:15px; line-height:1.9; text-align:center;
  text-shadow:0 0 6px rgba(159,220,176,0.6);
  white-space:pre-wrap;
}

/* ===== Day導入 ===== */
.day-intro-wrap{ text-align:center; }
.day-intro-num{
  font-family:var(--serif); font-size:clamp(36px,8vw,64px);
  color:var(--accent-bright); letter-spacing:0.08em;
  margin-bottom:20px;
}
.day-intro-text{ color:var(--text-dim); font-size:15px; max-width:520px; line-height:1.9; white-space:pre-wrap; }

/* ===== チャイム ===== */
.doorbell-wrap{ text-align:center; }
.doorbell-icon{ font-size:64px; animation:ring 1s infinite; }
@keyframes ring{
  0%,100%{ transform:rotate(0deg); } 20%{ transform:rotate(-14deg); } 40%{ transform:rotate(12deg); } 60%{ transform:rotate(-8deg); } 80%{ transform:rotate(6deg); }
}
.doorbell-text{ color:var(--text-dim); margin:20px 0 32px; letter-spacing:0.1em; }

/* ===== 訪問者判定 ===== */
.visitor-wrap{ width:100%; max-width:560px; display:flex; flex-direction:column; gap:16px; }
.monitor{
  background:#0a0a0a; border:2px solid #2c2c2c; border-radius:6px; overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
}
.monitor-bar{
  display:flex; justify-content:space-between; align-items:center;
  background:#151515; padding:6px 12px; font-size:11px; color:#7a7a7a; letter-spacing:0.05em;
}
.monitor-rec{ color:var(--accent-bright); }
.monitor-rec::before{ content:"●"; margin-right:3px; animation:blink 1.2s infinite; }
@keyframes blink{ 50%{ opacity:0.2; } }
.monitor-screen{
  position:relative; height:180px;
  background:linear-gradient(180deg,#111 0%,#080808 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.monitor-noise{
  position:absolute; inset:0; opacity:0.06; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noiseshift 0.4s steps(2) infinite;
}
@keyframes noiseshift{ 0%{transform:translate(0,0);} 100%{transform:translate(-4px,3px);} }
.visitor-figure{
  font-size:64px; color:#888; text-shadow:0 0 12px rgba(255,255,255,0.15);
  transition:transform .3s ease;
}
.visitor-figure.glitch{ animation:glitchshake 0.25s infinite; color:var(--accent-bright); }
@keyframes glitchshake{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-2px,1px); } 50%{ transform:translate(2px,-1px); } 75%{ transform:translate(-1px,-1px); } 100%{ transform:translate(0,0); }
}

.convo-log{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:6px;
  padding:16px; min-height:120px; max-height:220px; overflow-y:auto;
  font-size:14px; line-height:1.8;
}
.convo-line{ margin-bottom:10px; }
.convo-line .speaker{ color:var(--text-dim); font-size:12px; display:block; margin-bottom:2px; letter-spacing:0.05em; }
.convo-line.narration{ color:var(--text-dim); font-style:italic; }
.convo-line.hint{ color:var(--warn); }

.talk-options{ display:flex; flex-wrap:wrap; gap:8px; }
.talk-options .btn{ flex:1; min-width:140px; font-size:13px; padding:10px 14px; }

.judge-buttons{ display:flex; gap:12px; }
.judge-buttons .btn{ flex:1; font-size:16px; padding:16px; }

/* ===== 判定結果 ===== */
.result-text{ font-size:15px; line-height:2; white-space:pre-wrap; margin-bottom:24px; }
#screen-result .btn, #screen-event .btn{ width:100%; }

/* ===== 夜 ===== */
.night-wrap{ width:100%; max-width:560px; display:flex; flex-direction:column; gap:16px; align-items:stretch; }
.night-title{ font-family:var(--serif); text-align:center; color:var(--text-dim); font-weight:500; margin:0; }
.resident-list{ display:flex; flex-direction:column; gap:10px; }
.resident-card{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:6px;
  padding:14px 16px;
}
.resident-card .r-name{ font-weight:700; }
.resident-card .r-trust{ font-size:12px; color:var(--text-dim); }
.resident-card .btn{ padding:8px 16px; font-size:13px; }
.night-log{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:6px;
  padding:14px 16px; min-height:40px; font-size:14px; line-height:1.8; color:#cfcbc4; white-space:pre-wrap;
}

/* ===== イベント ===== */
.event-panel{ text-align:left; }
.event-text{ font-size:15px; line-height:2; white-space:pre-wrap; margin-bottom:20px; }
.event-choices{ display:flex; flex-direction:column; gap:10px; }

/* ===== エンディング ===== */
.ending-wrap{ text-align:center; max-width:560px; }
.ending-label{
  font-family:var(--serif); font-size:clamp(28px,6vw,42px);
  letter-spacing:0.1em; margin-bottom:28px; color:var(--accent-bright);
}
.ending-label.good{ color:var(--safe); }
.ending-label.true{ color:var(--warn); }
.ending-text{ font-size:15px; line-height:2.1; white-space:pre-wrap; margin-bottom:36px; color:#d8d4cd; }

@media (max-width:480px){
  .screen{ padding:18px; }
  .judge-buttons{ flex-direction:column; }
  .talk-options .btn{ min-width:100%; }
}