:root{
  --bg:#121213;
  --cell:#1a1a1b;
  --text:#d7dadc;
  --absent:#3a3a3c;
  --present:#b59f3b;
  --correct:#538d4e;
  --modal-bg:rgba(0,0,0,0.7);
  --modal-content:#1a1a1b;
}

*{box-sizing:border-box;font-family:Inter, system-ui, "Helvetica Neue", Arial;margin:0;padding:0;}
html,body{
  min-height:100%;
  margin:0;
  background:#0f1720;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
}


.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* центрируем заголовок */
  position: relative;
  margin-bottom: 10px;
}

/* Заголовок */
.title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 auto;
}

.wrap{
  width:100%;
  height:100%;
  max-width:1000px;
  padding:10px;
  display:flex;
  flex-direction:column;
  align-items:center;

}

/* Логотип */
.logo{
  width:100px;
  height:auto;
  margin-bottom:6px;
  border-radius:8px;
}

/* Заголовок */
h1{
  font-size:24px;
  margin:2px 0;
}
p.desc{
  color:#9aa0a6;
  font-size:13px;
  margin-bottom:8px;
}

/* Статистика */
.stats{
  color:#d7dadc;
  font-size:14px;
  margin-bottom:15px;
}

/* Доска */
.board{
  display:grid;
  grid-template-rows:repeat(6,1fr);
  gap:3px;
  width:100%;
  margin-bottom:15px;
}
.row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:3px;
}
.cell{
  aspect-ratio:1/1;
  border-radius:4px;
  background:var(--cell);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:calc(1.0vw + 8px);
  letter-spacing:1px;
  color:var(--text);
  text-transform:uppercase;
  border:2px solid rgba(255,255,255,0.1);
  transition:background 0.2s ease;
}
.cell.absent{background:var(--absent);color:#fff;border:none;}
.cell.present{background:var(--present);color:#fff;border:none;}
.cell.correct{background:var(--correct);color:#fff;border:none;}
.cell.flip{animation:flip 0.5s ease forwards;transform-origin:top;}

/* Клавиатура */
.keyboard{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:3px;
  width:100%;
  margin-bottom:15px;
}
.krow{
  display:flex;
  gap:3px;
  justify-content:center;
}
.key{
  padding:4px 8px;
  border-radius:3px;
  background:#818384;
  color:#fff;
  min-width:20px;
  text-align:center;
  user-select:none;
  cursor:pointer;
  font-weight:700;
  flex:1;
}
.key.wide{
  flex:1.8;
  min-width:60px;
  padding:2px 8px;

}
.key.absent{background:var(--absent);}
.key.present{background:var(--present);}
.key.correct{background:var(--correct);}

/* Хинт и Toast */
.hint{
  margin-top:6px;
  color:#9aa0a6;
  font-size:11px;
  text-align:center;
}
#toast{
  position:fixed;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.7);
  color:#fff;
  padding:4px 8px;
  border-radius:5px;
  display:none;
}

/* About кнопка */
.aboutBtn{ 

  padding:6px 12px;
  border:none;
  border-radius:5px;
  background: transparent;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  position: absolute;
  right: 0;
  font-size: 1.3em;

}

/* Модальное окно */
.modal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:var(--modal-bg);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
}
.modal.active{display:flex;}
.modal-content{
  background:var(--modal-content);
  padding:16px;
  border-radius:10px;
  max-width:280px;
  width:80%;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
  animation:fadeIn 0.3s ease;
}
.modal-content h2{margin-top:0;margin-bottom:10px;font-size:18px;}
.modal-content p{margin:4px 0;font-size:14px;}
.modal-content button{
  margin-top:10px;
  padding:6px 12px;
  border:none;
  border-radius:5px;
  background:#538d4e;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.reset-btn:hover {
  background: #e74c3c;
}

.submitBtn {
  margin-top: 6px;
  width: 100%;
  padding: 10px 0;
  background: #538d4e;
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s;
}
.submitBtn:hover {
  background: #6aaa64;
}


/* Кнопки клавиатуры на мобильных */
.key {
  user-select: none;
  cursor: pointer;
  touch-action: manipulation;
}

#toast {
  pointer-events: none;
  z-index: 999;
}

#keyboard {
  position: relative;
  z-index: 5;
}

.modal {
  z-index: 10;
}



/* Анимации */
@keyframes fadeIn{0%{opacity:0;transform:scale(0.9);}100%{opacity:1;transform:scale(1);}}
@keyframes flip{0%{transform:rotateX(0deg);}50%{transform:rotateX(90deg);}100%{transform:rotateX(0deg);}}

/* Адаптивность */
@media (max-width: 600px){
  .cell{font-size:calc(2vw + 2px);}
  .key{padding:3px 5px;font-size:11px;min-width:18px;}
  .key.wide{flex:1.5;min-width:48px;padding:5px 6px;font-size:12px;}
  .board{gap:2px;}
  .row{gap:2px;}
  .keyboard{gap:2px;}
}
@media (max-width: 400px){
  .cell{font-size:calc(3vw);}
  .key{padding:2px 4px;font-size:10px;min-width:16px;}
  .key.wide{flex:1.3;min-width:40px;padding:4px 5px;font-size:11px;}
  .board{gap:1px;}
  .row{gap:1px;}
  .keyboard{gap:1px;}
}