body {
  background:#111;
  color:#eee;
  margin:0;
  font-family:sans-serif;
  font-size:22px;
}

.hidden{display:none!important;}

.center{
  position:fixed;
  inset:0;
  background:#111;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:16px;
  z-index:9999;
}

.name-input{
  width:260px;
  font-size:22px;
  padding:10px;
}

.chat{
  max-width:820px;
  margin:0 auto;
  padding-bottom:120px;
  display:none;
}

.messages{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.card{
  position:relative;
  background:#1c1c1c;
  border-radius:12px;
  text-align:center;
  margin:0 auto;
  width:100%;
  box-sizing:border-box;
  padding:0px; /* 指定通り0px */
  border:4px solid transparent;
}

/* ===== お題 ===== */
.card.theme{
  background:yellow;
  color:black;
  padding:12px;
}

.card.theme .name{
  margin-bottom:2px;
}

.card.theme .text{
  font-size:36px;
  line-height:1.15;
}

/* ===== 回答(isAnswer)の共通スタイル ===== */
.card.answer {
  width: 80%;
}

/* 自分の回答：共通（背景デフォ、縁取り黄色・太目4px） */
.card.answer.me {
  background: #1c1c1c;
  border-color: #ffd700;
  border-width: 4px;
  border-style: solid;
}

/* 自分の回答：結果表示前（文字白黄色） */
.card.answer.me:not(.reveal) {
  color: #fff7c0;
}

/* 自分の回答：結果表示後（文字白色） */
.card.answer.me.reveal {
  color: #ffffff;
}

/* 他人の回答：共通（背景デフォ、縁なし） */
.card.answer.other {
  background: #1c1c1c;
  border-color: transparent;
  color: #ffffff;
}

/* 他人の回答：結果表示後（背景青） */
.card.answer.other.reveal {
  background: #1e4fff;
}

/* 他人の回答：結果表示後かついいね状態（背景赤） */
.card.answer.other.reveal.liked {
  background: #e60000 !important;
}

/* ===== 共通テキスト・名前 ===== */
.name{
  font-size:15px;
  margin-bottom:4px;
}

.text{
  font-size:26px;
  font-weight:bold;
  white-space:pre-wrap;
  line-height:1.25;
}

/* ===== いいねエリア ===== */
.like-area{
  position:absolute;
  right:-60px;
  top:50%;
  transform:translateY(-50%);
}

.like-area button{
  font-size:22px;
  padding:6px 12px;
  background:#333;
  color:white;
  cursor:pointer;
}

.like-area button.liked{
  background:yellow;
  color:black;
}

/* ===== 入力エリア ===== */
.input-area{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#000;
  padding:16px;
  display:flex;
  gap:12px;
}

.input-area input{
  flex:1;
  font-size:22px;
  padding:12px;
}

.input-area button{
  font-size:24px;
  padding:12px 28px;
  font-weight:bold;
}

input,button{
  border-radius:10px;
  border:none;
}

.alert{
  position:fixed;
  top:12px;
  right:12px;
  background:#ff4444;
  color:white;
  padding:10px 18px;
  border-radius:8px;
  font-weight:bold;
}