:root{--ok:#0a7a36;--bad:#b00020}

.status{font-weight:bold;margin:14px 0}
.ok{color:var(--ok)}
.bad{color:var(--bad)}

.zc-help{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
  margin:0 0 16px;
}
.zc-help div{
  background:#fff8df;
  border:2px solid #111;
  border-radius:12px;
  padding:10px;
}

.zc-board{
  max-width:650px;
  margin:auto;
}

.zc-head,
.code-row{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:12px;
  align-items:center;
}

.zc-head{font-weight:bold;margin-bottom:6px}

.code-row{
  border-bottom:1px solid #ddd;
  padding:10px 0;
}

.marks{
  font-size:24px;
  letter-spacing:8px;
  white-space:nowrap;
}

.guess,
.zc-code-values{
  display:flex;
  align-items:center;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
  min-width:0;
}

.guess span,
.zc-answer span,
.zc-input{
  flex:0 0 auto!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:42px;
  line-height:42px;
  border:2px solid #111;
  margin-right:8px;
  text-align:center;
  font-size:22px;
  background:#fff;
  box-sizing:border-box;
  color:#000;
  -webkit-text-fill-color:#000;
}

.zc-input{
  padding:0;
  font-weight:500;
  appearance:none;
  -webkit-appearance:none;
  border-radius:0;
}

.zc-input:focus{
  outline:3px solid #f2c94c;
  outline-offset:-3px;
}

.eq{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:12px;
  align-items:center;
  margin:12px 0;
  font-size:23px;
}

.number-1{background:#e0e0e0!important}
.number-2{background:#c9a3e6!important}
.number-3{background:#a9df78!important}
.number-4{background:#bde7fb!important}
.number-5{background:#e8a3d2!important}
.number-6{background:#ffe44f!important}
.number-7{background:#b6e97d!important}
.number-8{background:#76d7d9!important}
.number-9{background:#ffc84d!important}

@media(max-width:650px){
  .zc-board{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .zc-head,
  .code-row,
  .eq{
    grid-template-columns:105px max-content;
    gap:6px;
  }

  .marks{
    font-size:17px;
    letter-spacing:2px;
  }

  .guess span,
  .zc-answer span,
  .zc-input{
    width:32px!important;
    height:32px!important;
    line-height:32px!important;
    font-size:17px!important;
    margin-right:3px!important;
  }

  .eq{
    font-size:17px;
  }

  .zc-code-values{
    width:max-content!important;
    flex-wrap:nowrap!important;
  }

  .toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .toolbar button{
    min-height:44px;
    font-size:16px;
  }
}

@media(max-width:390px){
  .zc-head,
  .code-row,
  .eq{
    grid-template-columns:92px max-content;
    gap:4px;
  }

  .marks{
    font-size:16px;
    letter-spacing:1px;
  }

  .guess span,
  .zc-answer span,
  .zc-input{
    width:30px!important;
    height:30px!important;
    line-height:30px!important;
    font-size:16px!important;
    margin-right:2px!important;
  }

  .eq{font-size:16px}
}

@media print{
  .toolbar,.btn{display:none!important}
  .zc-help{display:none}
  .panel{box-shadow:none!important;border:1px solid #000!important}
}