:root{
  --bg:#0f1720; --card:#0b1220; --accent:#ffd166; --muted:#9aa7b2;
}

.app{
  width:100%;
}

#grid table {
  margin: 0 auto;
}

.panel{
  height: 550px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);
  padding:18px;
  border-radius:12px;
  box-shadow: 0 6px 20px rgba(2,6,23,0.6);
}

/* GRID */

.grid{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  padding:12px;
  border-radius:10px;
  width: max-content;
}
.cell{
  padding-top: 10px;
  width:64px;
  height:64px;
  font-size:28px;
  font-weight:700;
  letter-spacing:1px;
  border-radius:8px;
  background:rgba(230,230,230);
  color:transparent;
  transition:background .18s, color .18s, transform .08s;
  user-select:none;
  border:1px solid rgba(100,100,100);
}
.cell.revealed{ color: #000000; background: rgba(240,240,240); }
.cell.block{ background:transparent; border: none; }

.app .btn {
  border: 1px solid #000000;
}

.controls {
  margin: 15px 0;
}

.info{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:220px;
}
h1{
  margin:0;font-size:20px;
}
p.muted{ margin:0; color:var(--muted); font-size:13px; }

.panel-word {
  align-items:center;
  justify-content:center;
   background-image: url("/word-puzzle/images/right_kiev.png"); 
  /*background-image: url("/images/charkov_right.png");*/
}

.panel-grid {
   background-image: url("/word-puzzle/images/kiev_left.png"); 
  /*background-image: url("/images/charkov_left.png");*/
}

/* Circle letters */
.circle-wrap{
  position: relative;
  width: 260px;
  height: 300px;
  margin: 0 auto;
}
.circle{
  position:relative;
  width:260px;height:260px;border-radius:50%;
  background: rgba(100,100,100,0.05);
  display:block;
  transform:translateZ(0);
}
.letter-btn{
  --size:68px;
  position:absolute;
  width:var(--size); height:var(--size);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:24px;
  cursor:pointer;
  border:none;
  outline:none;

  transition:transform .12s, box-shadow .12s, opacity .12s;
  box-shadow: 0 6px 18px rgba(2,8,20,0.6);
  user-select:none;
}
.letter-btn:active{ transform:scale(.94); }
.letter-btn.disabled{ opacity:.35; pointer-events:none; }

.current{
  font-size:31px;
  height: 50px;
}

@media (max-width: 768px) {

    .footer-menu ul {
        text-align: center;
    }

    .footer-menu ul li {
        display: inline-block;
        padding: 5px;
    }
}

.social-media a {
    display: inline-block;
    width: 65px;
}

.btn_clear, .btn_check {
  width: 140px;
}

.btn_mix {
  width: 270px;
}

@media (min-width: 993px) and (max-width: 1199px) {
  .cell {
    width: 50px;
    height: 50px;
    padding-top: 0px;
  }

  .btn_clear, .btn_check {
    width: 110px;
    font-size: 15px;
  }

  .btn_mix {
    width: 210px;
  }

  .circle {
    width: 240px;
    height: 240px;
  }

  
}

@media (min-width: 768px) and (max-width: 992px) {
  .cell {
    width: 40px;
    height: 40px;
  }

  .info {
    min-width: 160px;
    font-size: 20px;
  }

  .btn_clear, .btn_check {
    width: 160px;
    font-size: 15px;
    margin-bottom: 8px;
  }

  .circle {
    width: 160px;
    height: 160px;
  }

  .letter-btn {
    --size: 55px;
  }

  .btn_mix {
    width: 157px;
  }

  .cell {
    padding-top: 0px;
    font-size: 24px;
  }

  .circle-wrap {
    width: 148px;
    height: 195px;
    margin-top: 20px;
  }
}

@media (min-width: 100px) and (max-width: 768px) {
  .cell {
    width: 35px;
    height: 35px;
  }
  .panel {
    height: auto;
  }

  .cell {
    padding-top: 0px;
    font-size: 22px;
  }
}

.block-white-wp-panel {
  background-color: #ffffff;
  color: #000000;
}

.modal-dialog {
  color: #000000;
}