body {
  margin: 0;
  padding: 0;
  font-family: monospace;
  color: #0f0;

  /* 背景画像 */
  background: url("bg.png") no-repeat center center fixed;
  background-size: cover;

  /* 少し暗くする */
  background-color: #000;
}

/* 暗いフィルター */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
/* メイン画面 */
#screen {
  position: relative;
  z-index: 1;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 80px;

}

/* タイトル */
#title {
  font-size: clamp(32px, 8vw, 64px);
  margin-bottom: 40px;
  letter-spacing: 4px;
}

/* 状態表示 */
#status {
  font-size: clamp(18px, 4vw, 36px);
  margin: 20px;
  opacity: 0.8;
}

/* 時計 */
#time {
  font-size: clamp(16px, 3vw, 28px);
  margin: 20px;
  opacity: 0.6;
}

/* ボタン */
button {
  margin-top: 40px;
  font-size: 32px;

  background: none;
  border: 2px solid #0f0;
  color: #0f0;

  padding: 24px 48px;
  cursor: pointer;

  transition: 0.2s;
}

button:hover {
  background: #0f0;
  color: #000;
}

/* ===== signal（メッセージ送信）調整 ===== */

#signalBox {
  margin-top: 60px;
  border: 2px solid #fff;
  padding: 24px 28px;
  width: 80%;
  max-width: 600px;
  align-items: center;
  gap: 10px;

  color: #fff;
  text-align: left;

  opacity: 0.8;
}
#signalLabel {
  font-size: clamp(16px, 3vw, 28px);
}
/* 入力欄 */
#signalInput {
  flex: 1;
  background: transparent;
  border: 1px solid #fff;
  color: #0f0;
  min-width: 0;
  font-family: monospace;
  font-size: clamp(18px, 4vw, 36px);
  padding: 12px;
  height: clamp(40px, 8vh, 60px);
  outline: none;

  caret-color: #0f0;
}

/* sendボタン（白にする） */
#sendBtn {
  font-size: 36px;
  padding: 10px 18px;

  border: 1px solid #fff;
  color: #fff;
  background: transparent;
}

/* ホバー */
#sendBtn:hover {
  background: #fff;
  color: #000;
}

/* ===== 表示（上に浮かぶやつ） ===== */

#signalDisplay {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);

  font-size: clamp(18px, 4vw, 36px);
  color: #fff;

  opacity: 0;
  pointer-events: none;

  transition: opacity 2s ease;
}
/* 漂うリンク */
.drift{
 position:fixed;
 color:#fff;
 font-size: clamp(18px, 4vw, 36px);
 opacity:.5;
 cursor:pointer;

 z-index:30;

 top:15%;
 left:10%;

 animation:wander 90s linear infinite;
}

.a{
 top:12%;
 left:15%;
 animation-duration:80s;
 animation-delay:0s;
}

.b{
 top:55%;
 left:70%;
 animation-duration:100s;
 animation-delay:-30s;
}

.c{
 top:78%;
 left:30%;
 animation-duration: 120s;
 animation-delay:-60s;
}
.drift:hover{
 opacity:1;
}

/* それぞれ速度違い */
.a{ animation-duration:80s; }
.b{ animation-duration:120s; }
.c{ animation-duration:100s; }


@keyframes wander{
 0%{
  top:15%;
  left:10%;
 }

 30%{
  top:35%;
  left:70%;
 }

 65%{
  top:70%;
  left:30%;
 }

 100%{
  top:15%;
  left:10%;
 }
}



/* モーダル */
.modal{
 display:none;

 position:fixed;
 inset:0;

 background:rgba(0,0,0,.75);

 z-index:20;

 justify-content:center;
 align-items:center;
}

.modal.show{
 display:flex;
}

.panel{
 background:#000;
 border:2px solid #fff;

 padding:40px;
 width:80%;
 max-width:600px;

 color:#0f0;
 text-align:left;
}

.panel h2{
 font-size:32px;
 margin-top:0;
}
.panel p{
 font-size:22px;
 line-height:1.8;
}

/* フッター */
#footer {
  position: fixed;
  bottom: 20px;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  z-index: 1;
  pointer-events: none; /* クリック邪魔しない */
}
#footerText {
  font-size: 28px;
  color: #fff;
  opacity: 0.3;
  letter-spacing: 2px;
}
#logoLink {
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 2;

  display: block;
}

/* ロゴ */
#logoLink img {
  width: 160px;
  height: 160px;
  object-fit: cover;

  border-radius: 50%;
  opacity: 0.8;

  transition: 0.2s;
}

/* ホバー（スマホだと軽くタップ時） */
#logoLink img:hover {
  opacity: 1;
  transform: scale(1.1);
}