:root{
  --blue:#1e88e5;
  --bg:#121212;
  --glass:rgba(255,255,255,.08);
}
*{box-sizing:border-box;font-family:Roboto,"Noto Sans KR",sans-serif}
html,body{height:100%;margin:0;background:var(--bg);color:#fff;display:flex;align-items:center;justify-content:center}
.hidden{display:none}
.card{
  width:320px;padding:40px 30px;border-radius:20px;
  background:var(--glass);backdrop-filter:blur(10px);
  text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4);
}
input,button{
  width:100%;padding:12px 18px;margin-top:15px;border:0;border-radius:10px;
  font-size:1rem;outline:none
}
button{background:var(--blue);color:#fff;cursor:pointer;transition:transform .1s}
button:hover{transform:translateY(-2px)}
button:disabled{background:#555;cursor:not-allowed}
button.ghost{background:transparent;border:1px solid var(--blue)}
#open-btn{font-size:1.2rem}
#point-display{margin:25px 0;font-size:1.3rem}
#confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}


/* === 전체 레이아웃은 기존 스타일 유지 === */

/* 채팅 래퍼 */
#chat-wrapper{
  width:100%;
  max-width:420px;
  height:300px;
  margin:30px auto 10px;
  display:flex;
  flex-direction:column;
  border:1px solid #555;
  border-radius:8px;
  overflow:hidden;
  background:#1d1d1d;
}

/* 메시지 리스트 */
#chat-list{
  flex:1 1 auto;
  list-style:none;
  margin:0;padding:10px 12px;
  overflow-y:auto;
  font-size:.95rem;
}
#chat-list li{margin-bottom:8px;word-wrap:break-word;}
#chat-list li span.user{font-weight:600;margin-right:6px;color:#64b5f6}
#chat-list li.self span.user{color:#f06292}


/* ───────── 채팅 입력 영역 개선 ───────── */
#chat-input-area{
  display:flex;
  align-items:center;
  gap:8px;                     /* 입력창-버튼 간격 확대 */
  padding:10px;
  border-top:1px solid #444;
  background:#181818;          /* 살짝 대비 주기 */
}

/* 입력창: 영역 대부분 차지 */
#chat-input{
  flex:1 1 auto;               /* 남은 공간 100% 사용 */
  min-width:0;                 /* flex 축소 허용 */
  padding:12px 14px;
  font-size:1rem;
  border:none;
  border-radius:8px;
  background:#262626;
  color:#fff;
}

/* 전송 버튼: 고정 폭 + 아이콘/텍스트 중앙 */
#chat-send{
  flex:0 0 96px;               /* ‘입력창 : 버튼’ ≈ 5 : 1 비율 */
  height:42px;                 /* 입력창 높이와 통일감 */
  border:none;
  border-radius:8px;
  background:#1e88e5;
  color:#fff;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .1s;
}
#chat-send:hover:not(:disabled){transform:scale(1.05);}
#chat-send:disabled{
  background:#555;
  cursor:not-allowed;
  opacity:.6;
}

/* ───────── 스마트폰 전용 보정 ───────── */
@media (max-width: 480px){

  /* 카드 폭 줄이기 & 여백 확보 */
  .card{
    width: 92vw;        /* 화면의 92 % */
    max-width: 340px;   /* 너무 길어지지 않게 */
    padding: 24px 20px;
  }

  /* 제목·버튼 폰트 조금 축소 */
  h1, h2{ font-size: 1.4rem; }
  #open-btn{ font-size: 1.1rem; }

  /* 채팅창 높이 ↓, 버튼 폭 ↓ */
  #chat-wrapper{ height: 240px; }
  #chat-send{ flex-basis: 72px; height: 38px; font-size: 0.9rem; }

  /* 입력창 내부 패딩·글꼴 줄이기 */
  #chat-input{ padding: 10px; font-size: 0.95rem; }
}