/* シンプルな黒っぽい背景と中央表示のスタイル */
:root{
  /* ダーク背景 + 薄いシアンパステル系カラー */
  --bg: #05060a; /* 黒っぽい背景 */
  --panel: #0b1114; /* パネルのやや明るいダーク */
  --text: #dffcff; /* メインテキスト: 薄いシアン */
  --muted: #9fd6db; /* 補助テキスト（控えめなシアン） */
  --accent: #9befff; /* パステルシアンのアクセント */
  --accent-2: #bff7f2; /* サブアクセント */
  --border: rgba(155,239,255,0.06);
  --shadow-cyan: rgba(11,174,213,0.06);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,0.02), transparent),
              linear-gradient(180deg, #030304 0%, var(--bg) 100%);
  color:var(--text);
  font-family:var(--font-sans);
  /* ページ全体の文字サイズをやや小さめにして、AAを目立たせる */
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.center{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:18px;
}

/* タイトル（可愛い手書き風） */
.title{
  font-family: 'Pacifico', cursive;
  color:var(--accent);
  font-size:34px;
  margin:0 0 6px 0;
  text-shadow: 0 8px 24px rgba(11,174,213,0.06);
}

.panel{
  position:relative;
  padding:18px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(11,174,213,0.02), rgba(11,174,213,0.006));
  box-shadow: 0 10px 30px var(--shadow-cyan), 0 6px 24px rgba(0,0,0,0.6);
  border: 1px solid var(--border);
}

.panel::before,
.panel::after{
  position:absolute;
  font-size:28px;
  opacity:0.9;
  pointer-events:none;
}
.panel::before{
  content: "🐾";
  left:-10px;
  top:-18px;
  transform:rotate(-10deg);
  animation: float 4s ease-in-out infinite;
  color: var(--accent-2);
}


.ascii{
  margin:0;
  padding:22px 30px;
  background: linear-gradient(180deg, rgba(11,174,213,0.00), rgba(11,174,213,0.001));
  color: rgba(255,255,255,0.92); /* AA（アスキー）を明るくしてコントラスト確保 */
  font-family: "Courier New", Courier, monospace;
  font-size:12px;
  line-height:0.95;
  border-radius:12px;
  user-select:text;
  white-space:pre;
  text-align:left;
}

@keyframes float{
  0%{ transform: translateY(0) rotate(-6deg); }
  50%{ transform: translateY(-6px) rotate(-2deg); }
  100%{ transform: translateY(0) rotate(-6deg); }
}

.note{
  margin:0;
  color:var(--muted);
  font-size:13px;
  opacity:0.9;
}

/* レスポンシブ：小さい画面でAAを少し縮小 */
@media (max-width:520px){
  .title{font-size:26px}
  .ascii{font-size:20px}
}