* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #000;
  color: #7de3ff;
  font-family: 'Courier New', monospace;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  user-select: none;
}

#app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 380px;
  height: 100vh;
  padding: 10px;
  box-sizing: border-box;
  justify-content: center;
}

#message-panel {
  width: 100%;
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-shrink: 0;
  z-index: 200;
}

#msgInput {
  flex: 1;
  background: rgba(14, 26, 36, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 20px;
  padding: 8px 14px;
  color: #66e5cf;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  outline: none;
  backdrop-filter: blur(4px);
  transition: border-color 0.2s, box-shadow 0.2s;
}

#msgInput:focus {
  border-color: #61c8b5;
  box-shadow: 0 0 8px rgba(97, 200, 181, 0.4);
}

#msgInput::placeholder {
  color: #475569;
}

button {
  background: linear-gradient(135deg, #1a3a5c, #0f2b48);
  color: #61c8b5;
  border: 1.5px solid #61c8b5;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(97, 200, 181, 0.2);
  white-space: nowrap;
  transition: all 0.2s ease;
}

button:hover:not(:disabled) {
  background: linear-gradient(135deg, #255485, #163d66);
  box-shadow: 0 0 15px rgba(97, 200, 181, 0.5);
}

button:disabled {
  background: #1e293b;
  color: #475569;
  border-color: #334155;
  box-shadow: none;
  cursor: not-allowed;
}
/* =========================================
   1. ピクセル（ドット絵）化 & CRT表示エリア
========================================= */
#canvas-wrapper {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 360 / 600;
  max-height: calc(100vh - 70px);
  border-radius: 24px;
  overflow: hidden;
  touch-action: none;

  /* モニターの外枠フレーム */
  border: 10px solid #0d1217;
  box-shadow:
    inset 0 0 0 2px #222,
    inset 0 0 50px rgba(0, 0, 0, 0.9),
    0 0 0 4px #1a232e,
    0 0 25px rgba(97, 200, 181, 0.2);

  /* VHS画面揺れ */
  animation: vhsGlitch 6s infinite;
}

/* キャンバス本体へのレトロフィルター適用 */
#canvas-container canvas {
  width: 100% !important;
  height: 100% !important;
  
  image-rendering: pixelated;
  image-rendering: crisp-edges;

  /* 
    【ブラウン管の発色 & 輝度調整】
    コントラストを高め、レトロPCモニター特有のビビットな発色にする
  */
  filter: contrast(125%) brightness(105%) saturate(130%);
}

/* =========================================
   2. RGB色ズレ & ブラウン管の曲面（ガラスの反射）
========================================= */
/* CRTガラスの湾曲感・光の反射レイヤー */
#canvas-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 102;
  /* 画面中央が明るく、端が暗くなるブラウン管独特の影（周辺減光） */
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
  border-radius: 16px;
}

/* 擬似的なRGB色ズレ（クロマティック・アベレーション） */
#canvas-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 103;
  /* 赤と青の極細のずれ線をうっすら重ねる */
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.03),
    rgba(0, 255, 0, 0.01),
    rgba(0, 0, 255, 0.03)
  );
  background-size: 3px 100%;
  mix-blend-mode: screen;
}

/* =========================================
   3. ドットマトリクス（画面の格子状シャドウ）
===================================*/
.crt-scanline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  background: 
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.4) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 4px, 6px 100%;
  animation: scanline 8s linear infinite;
}


/* =========================================
   VHS TRACKING NOISE (ノイズ帯)
========================================= */
.crt-tracking {
  position: absolute;
  top: -10vh;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  z-index: 101;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 20%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent 100%
  );
  backdrop-filter: blur(1px) grayscale(100%) contrast(150%) brightness(90%);
  animation: vhsTracking 0.4s linear infinite;
}

/* =========================================
   ANIMATIONS
========================================= */
@keyframes scanline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

@keyframes vhsGlitch {
  0%, 85%, 100% {
    transform: translate(0, 0) skew(0deg);
    filter: none;
  }
  86% {
    transform: translate(-3px, 1px) skew(-0.5deg);
    filter: hue-rotate(-10deg);
  }
  87% {
    transform: translate(4px, -1px) skew(1deg);
  }
  88% {
    transform: translate(-1px, 2px) skew(-0.2deg);
    filter: brightness(1.1);
  }
  89% {
    transform: translate(0, 0) skew(0deg);
    filter: none;
  }
}

@keyframes vhsTracking {
  0% {
    top: -20vh;
    transform: scaleY(1) skewX(0deg);
  }
  30% {
    transform: scaleY(1.3) skewX(2deg);
  }
  32% {
    transform: scaleY(0.8) skewX(-3deg);
  }
  35% {
    transform: scaleY(1.1) skewX(1deg);
  }
  100% {
    top: 120vh;
    transform: scaleY(1) skewX(0deg);
  }
}