body{
  font-family: system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  padding: 1rem;
  background: #bd3131;
  color: #111;
}
main{
  max-width: 920px;
  margin: 0 auto;
  background: transparent;
  padding: 1rem 1rem;
}
input{
  width: 100%;
  padding: .6rem;
  margin-bottom: .5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button{
  padding: .6rem 1rem;
  background: linear-gradient(180deg,#d93636,#b91c1c);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(185,28,28,0.18);
}
button:hover{filter:brightness(.98);transform:translateY(-1px)}
.hidden{display:none}
#msg{color:#c00;margin-top:.5rem}

.site-header{
  padding: 1rem 1rem;
  background: linear-gradient(90deg,#fff2f2 0%, #ffecec 50%, #fff 100%);
  border-radius: 10px;
  margin-bottom: 1rem;
  align-items: center;
  gap: 1rem;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 160px;
}
.site-header h1{
  margin: 0 0.2rem 0;
  font-size: 1.8rem;
  color: #7f0f0f;
  letter-spacing: .02em;
}
.site-desc{
  margin: 0;
  color: #5a1212;
  font-size: .30rem;
  line-height: 1.45;
  max-width: 58ch;
}
.kw-section h2{
  font-size: 1.1rem;
  margin-top: 0;
  color: #7f0f0f;
}
.site-header{
  text-align: center;
  padding: 0.5rem 1rem;
  background: #8b1616;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}
.site-header h1{
  margin: 0;
  font-size: 3rem;
  color: #fff;
  letter-spacing: .06em;
  line-height: 1;
}
.site-desc{
  margin: 0 auto;
  color: #ffffff;
  font-size: 0.90rem;
  line-height: 1.5;
  max-width: 68ch;
}
.kw-section{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.card{
  width:100%;
  background:#e6e6e6;
  padding:2.2rem 1.5rem;
  margin: 0 0 1.25rem 0;
  border-radius:16px;
  text-align:center;
}
.desc-card{font-size:1.2rem;color:#333}
.form-card{border:6px solid rgba(0,0,0,0.06);border-radius:16px}
.form-card input{
  background:transparent;
  border:none;
  font-size:1.2rem;
  text-align:center;
  outline: 2px solid #8b1616;
  width:60%;
  padding:6px 8px;
  border-radius:12px;
  box-sizing:border-box;
}
.form-card input:focus{box-shadow:0 0 0 6px rgba(185,28,28,0.6)}
.form-card button{margin-top:0.8rem;padding:.8rem 1.2rem;font-size:1rem;border-radius:16px}
.kw-section h2{
  font-size: 1.2rem;
  margin-top: 0;
  color: #7f0f0f;
}

@media (max-width: 720px){
  .site-header{background-position: center 8px;background-size: 220px;padding-top:2.4rem}
  .site-header h1{font-size:2rem}
  .site-desc{font-size:1rem;padding:0 8px}
}

/* Word list panel shown on every page */
.word-list{
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: 280px;
  background: rgba(20,20,20,0.9);
  color: #fff;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  z-index: 9999;
}
.word-list.collapsed{width:120px}
.word-list-toggle{
  display:block;
  width:100%;
  background:transparent;
  color:#fff;
  border:none;
  text-align:left;
  font-weight:700;
  padding:6px 8px;
  cursor:pointer;
}
.word-list-items{margin:8px 0 0 18px;padding:0;font-size:13px;line-height:1.45}
.word-list-items li{margin:6px 0}
.word-list.collapsed .word-list-items{display:none}

/* Inline page word list */
.page-word-list{background:transparent;padding:0;margin-top:8px}
.page-word-list ol{list-style:decimal;margin:0;padding-left:1.2rem}
.page-word-list li{padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.06);font-size:1rem;color:#111}

/* Incorrect modal styles */
.incorrect-modal{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:12000}
.incorrect-overlay{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.5)}
.incorrect-box{position:relative;background:#fff;padding:20px 22px;border-radius:12px;max-width:420px;width:90%;box-shadow:0 12px 40px rgba(0,0,0,0.35);text-align:center}
.incorrect-box h3{margin:0 0 8px;color:#b91c1c}
.incorrect-box p{margin:0 0 12px;color:#111}
.incorrect-close{background:#b91c1c;color:#fff;padding:8px 12px;border:none;border-radius:8px;cursor:pointer}

/* Page word display */
.page-word{font-size:2.6rem;font-weight:700;color:#111;padding:12px 6px}
.page-word-visible{background:transparent}