body{

  margin:0;

  padding:20px;

  padding-bottom:180px;

  background:#f3f4f6;

  font-family:sans-serif;

}

.container{

  max-width:1000px;

  margin:auto;

}



/* =========================
   タイトル
========================= */

h1{

  text-align:center;

  margin-bottom:20px;

}



/* =========================
   上部
========================= */

.topbar{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin-bottom:20px;

}



/* 問題選択 */

select{

  flex:1;

  padding:14px;

  border:none;

  border-radius:14px;

  background:#e5e7eb;

  color:#111827;

  font-size:16px;

  font-weight:bold;

}



/* 問題生成 */

.topbar button{

  flex:1;

  padding:14px;

  border:none;

  border-radius:14px;

  background:#2563eb;

  color:white;

  font-size:16px;

  font-weight:bold;

}



/* =========================
   ボタン
========================= */

.buttonRow{

  display:flex;

  gap:10px;

  margin-top:20px;

  margin-bottom:20px;

}

.buttonRow button{

  flex:1;

  padding:18px 0;

  border:none;

  border-radius:16px;

  color:white;

  font-size:18px;

  font-weight:bold;

}



/* 答え合わせ */

#checkButton,
#bottomCheckButton{

  background:#2563eb;

}



/* 答え表示 */

#showAnswerButton,
#bottomShowAnswerButton{

  background:#ef4444;

}



/* =========================
   問題
========================= */

#quizArea{

  display:flex;

  flex-direction:column;

  gap:18px;

}

.question{

  background:white;

  padding:18px;

  border-radius:16px;

  box-shadow:
    0 2px 10px rgba(0,0,0,.08);

}

.questionNumber{

  font-size:14px;

  color:#666;

  margin-bottom:8px;

}

.jp{

  font-size:24px;

  font-weight:bold;

  line-height:1.5;

  margin-bottom:14px;

}



/* =========================
   空欄
========================= */

.blank{

  min-height:52px;

  min-width:180px;

  border:3px dashed #999;

  border-radius:14px;

  background:#fafafa;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:6px;

  box-sizing:border-box;

}

.correct{

  border-color:#22c55e;

  background:#dcfce7;

}

.wrong{

  border-color:#ef4444;

  background:#fee2e2;

}



/* =========================
   単語リスト
========================= */

#wordBank{

  position:fixed;

  left:0;

  bottom:0;

  width:100%;

  box-sizing:border-box;

  background:white;

  padding:12px;

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  max-height:150px;

  overflow-y:auto;

  box-shadow:
    0 -2px 12px rgba(0,0,0,.15);

  z-index:999;

}

.word{

  background:#2563eb;

  color:white;

  padding:12px 16px;

  border-radius:999px;

  font-size:17px;

  font-weight:bold;

  cursor:pointer;

  user-select:none;

  transition:.15s;

}

.word:active{

  transform:scale(.95);

}

.word.selected{

  outline:4px solid #93c5fd;

}



/* =========================
   結果
========================= */

#resultArea{

  margin-top:18px;

  text-align:center;

  font-size:24px;

  font-weight:bold;

}



/* =========================
   スマホ
========================= */

@media(max-width:700px){

  .topbar{

    flex-direction:column;

  }

  .topbar select,
  .topbar button{

    width:100%;

    box-sizing:border-box;

  }

  .jp{

    font-size:20px;

  }

  .word{

    font-size:15px;

    padding:10px 14px;

  }

}