/* WP Mini Crossword Mobile Fixed */
.wpmc-app,.wpmc-app *{box-sizing:border-box}
.wpmc-app{
  --blue:#a9ccf7;
  --blue2:#d9ebff;
  --black:#333;
  --line:#777;
  width:100%;
  max-width:960px;
  margin:0 auto 26px!important;
  padding:10px!important;
  background:#fff!important;
  color:#111!important;
  font-family:"Work Sans",Arial,sans-serif!important;
  overflow-x:hidden!important;
}
.wpmc-app button,.wpmc-app input{font-family:"Work Sans",Arial,sans-serif!important}

.wpmc-bar{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:6px 8px;
  border:1px solid #d9d9d9;
  background:#fff;
}
.wpmc-bar button{
  border:0!important;
  background:transparent!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  padding:7px 8px!important;
  font-size:16px!important;
  font-weight:600!important;
  cursor:pointer!important;
}
.wpmc-timer{font-size:17px;font-weight:700;margin-right:auto}

.wpmc-active-clue{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  padding:9px 12px;
  background:var(--blue);
  font-size:18px;
  font-weight:600;
  margin:0 0 10px!important;
}

.wpmc-layout{
  display:grid;
  grid-template-columns:minmax(300px,430px) 1fr;
  gap:26px;
  align-items:start;
  justify-content:center;
}
.wpmc-board-area{width:100%}

.wpmc-grid{
  width:min(100%,430px);
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(5,1fr);
  border:1px solid var(--line);
  margin:0 auto!important;
}
.wpmc-cell{
  position:relative;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.wpmc-cell:nth-child(5n){border-right:0}
.wpmc-cell:nth-child(n+21){border-bottom:0}
.wpmc-cell.black{background:#333!important}
.wpmc-num{
  position:absolute;
  top:3px;
  left:5px;
  z-index:2;
  font-size:15px;
  font-weight:800;
  color:#111;
}
.wpmc-input{
  width:100%!important;
  height:100%!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:center!important;
  text-transform:uppercase!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  font-size:clamp(28px,8vw,44px)!important;
  font-weight:800!important;
  line-height:1!important;
  padding:12px 0 0!important;
  border-radius:0!important;
}
.wpmc-cell.word{background:var(--blue2)!important}
.wpmc-cell.active{background:#1257bd!important}
.wpmc-cell.active .wpmc-input,.wpmc-cell.active .wpmc-num{color:#fff!important;-webkit-text-fill-color:#fff!important}
.wpmc-cell.bad .wpmc-input{color:#b91c1c!important;-webkit-text-fill-color:#b91c1c!important}
.wpmc-credit{text-align:center;margin:7px 0 0!important;font-size:12px;color:#555}

.wpmc-clues{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.wpmc-clues h3{
  margin:0 0 6px!important;
  font-size:18px!important;
  font-weight:900!important;
  color:#111!important;
}
.wpmc-clue{
  display:block;
  padding:5px 7px;
  margin:0 0 2px;
  border-radius:3px;
  font-size:15px;
  line-height:1.32;
  cursor:pointer;
  color:#111;
}
.wpmc-clue.active{background:var(--blue);font-weight:700}
.wpmc-clue b{display:inline-block;width:20px}

.wpmc-keyboard{display:none}

.wpmc-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:99999;padding:18px}
.wpmc-modal[hidden]{display:none}
.wpmc-card{position:relative;width:min(520px,100%);background:#fff;border-radius:18px;padding:25px;box-shadow:0 24px 80px rgba(0,0,0,.35);color:#111}
.wpmc-close{position:absolute;right:12px;top:8px;border:0!important;background:transparent!important;font-size:32px!important;cursor:pointer!important}

@media(max-width:780px){
  .wpmc-app{
    max-width:400px;
    padding:6px!important;
  }
  .wpmc-bar{
    gap:4px;
    min-height:42px;
    padding:4px;
  }
  .wpmc-bar button{
    font-size:13px!important;
    padding:6px 5px!important;
  }
  .wpmc-timer{font-size:14px;margin-right:2px}
  .wpmc-active-clue{
    min-height:40px;
    font-size:14px;
    line-height:1.25;
    padding:7px 8px;
    margin-bottom:8px!important;
  }
  .wpmc-layout{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .wpmc-grid{
    width:100%;
    max-width:360px;
  }
  .wpmc-input{
    font-size:34px!important;
    padding-top:10px!important;
  }
  .wpmc-num{font-size:11px;left:3px;top:2px}
  .wpmc-credit{font-size:11px;margin-top:5px!important}
  .wpmc-clues{
    width:100%;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .wpmc-clues h3{font-size:13px!important;margin-bottom:4px!important}
  .wpmc-clue{
    font-size:10px;
    padding:3px 4px;
    line-height:1.25;
  }
  .wpmc-clue b{width:14px}
  .wpmc-keyboard{
    display:grid;
    grid-template-columns:repeat(10,1fr);
    gap:3px;
    margin:8px auto 0!important;
    width:100%;
  }
  .wpmc-key{
    height:28px;
    border:1px solid #cbd5e1!important;
    background:#f8fafc!important;
    border-radius:5px!important;
    font-size:11px!important;
    font-weight:800!important;
    color:#111!important;
    -webkit-text-fill-color:#111!important;
    padding:0!important;
    cursor:pointer!important;
  }
}
@media(max-width:360px){
  .wpmc-grid{max-width:330px}
  .wpmc-input{font-size:30px!important}
}
