/* ===== メニュー / オーバーレイ UI ===== */
#ui{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  text-align:center;
}

#ui.hidden{display:none;}

.panel{
  width:100%;
  max-width:340px;
  background:rgba(8,10,26,.82);
  border:1px solid rgba(120,220,255,.30);
  border-radius:16px;
  padding:22px 18px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 30px rgba(0,220,255,.18), inset 0 0 30px rgba(255,60,220,.06);
  animation:pop .22s ease-out;
}

@keyframes pop{
  from{opacity:0;transform:scale(.94)}
  to  {opacity:1;transform:scale(1)}
}

/* --- タイトルロゴ --- */
.logo{
  font-size:30px;
  font-weight:800;
  letter-spacing:3px;
  line-height:1.1;
  color:#8ff3ff;
  text-shadow:0 0 8px #23d7ff, 0 0 24px #1a8dff;
}
.logo span{
  color:#ff7ff0;
  text-shadow:0 0 8px #ff3df0, 0 0 26px #c01ea8;
}
.sub{
  font-size:12px;
  letter-spacing:2px;
  color:#7d8bb5;
  margin-top:6px;
}

/* --- 見出し・テキスト --- */
h2{
  font-size:22px;
  letter-spacing:2px;
  color:#8ff3ff;
  text-shadow:0 0 12px #23d7ff;
}
h2.warn{
  color:#ff9ad2;
  text-shadow:0 0 12px #ff3df0;
}
.lead{
  font-size:13px;
  color:#9fb2d8;
  margin:12px 0 6px;
  line-height:1.7;
}
.label{
  font-size:11px;
  letter-spacing:2px;
  color:#6f7ea8;
  margin:18px 0 8px;
}
.stat{
  font-size:13px;
  color:#9fb2d8;
  margin:10px 0 4px;
}
.stat b{
  color:#8ff3ff;
  font-size:20px;
  text-shadow:0 0 10px #23d7ff;
}
.hint{
  font-size:11px;
  color:#5f6d94;
  margin-top:14px;
  line-height:1.7;
}

/* --- ボタン --- */
.btns{
  display:flex;
  flex-direction:column;
  gap:9px;
}

button{
  font:inherit;
  font-size:15px;
  font-weight:700;
  letter-spacing:1px;
  color:#cfe9ff;
  background:rgba(30,50,100,.35);
  border:1px solid rgba(120,220,255,.4);
  border-radius:10px;
  padding:12px 10px;
  cursor:pointer;
  transition:.15s;
}
button small{
  display:block;
  font-size:10px;
  font-weight:400;
  letter-spacing:0;
  color:#8296c2;
  margin-top:3px;
}
button:hover,
button:focus-visible{
  background:rgba(60,140,255,.30);
  border-color:#6fe4ff;
  box-shadow:0 0 18px rgba(60,200,255,.45);
  outline:none;
}
button:active{transform:scale(.97);}

button.primary{
  background:rgba(0,200,255,.22);
  border-color:#6fe4ff;
}
button.hard{
  border-color:rgba(255,90,220,.45);
}
button.hard:hover{
  background:rgba(255,60,220,.22);
  border-color:#ff7ff0;
  box-shadow:0 0 18px rgba(255,60,220,.45);
}