/* ZORELO v1.8.0 – stronger game contrast, fuller game stages, complete creative artwork */

/* Game header art: larger and more useful, not a tiny thumbnail. */
.zorelo-v17-game-visual{
  width:260px!important;
  height:145px!important;
  border-radius:26px!important;
  box-shadow:0 16px 34px rgba(15,45,112,.18)!important;
  background:#fff!important;
}
.zorelo-v15-game-subhead{grid-template-columns:260px minmax(0,1fr) auto!important;gap:30px!important}

/* Game stage – use the available room instead of leaving a tiny control island in the middle. */
.zorelo-v14-play-wrap{padding:16px!important}
.zorelo-game-root{
  min-height:500px!important;
  color:#12356f!important;
  background:linear-gradient(145deg,#ffffff 0%,#f5fbff 48%,#eefbf5 100%)!important;
  border:1px solid #dbe5f1!important;
  box-shadow:0 16px 42px rgba(28,57,120,.07)!important;
}
.zo-game{min-height:500px!important;padding:42px 38px!important;color:#12356f!important}
.zo-game .zorelo-kicker{color:#315de8!important;letter-spacing:.13em!important;font-size:.9rem!important}
.zo-game h2{font-size:clamp(2.65rem,4vw,4.2rem)!important;line-height:1.05!important;color:#102f68!important;margin:8px 0 14px!important}
.zo-game p{font-size:1.22rem!important;line-height:1.65!important;color:#425878!important;max-width:900px!important}

/* Intro: real two-column stage with the matching game artwork. */
.zo-game-intro{justify-content:center!important;text-align:left!important}
.zo-intro-layout{width:min(1180px,100%);display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:54px;align-items:center}
.zo-intro-copy{min-width:0}
.zo-intro-copy .zo-start{margin-top:18px!important}
.zo-intro-art{width:100%;height:245px;border-radius:28px;overflow:hidden;box-shadow:0 18px 38px rgba(24,54,120,.15);background:#fff;border:1px solid #dce6f1}
.zo-intro-art img{display:block;width:100%;height:100%;object-fit:cover}

/* Universal primary controls: no light-on-light. */
.zo-start{
  min-height:62px!important;
  padding:0 30px!important;
  border:0!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,#1559d8,#3e66f4)!important;
  color:#fff!important;
  font-size:1.18rem!important;
  box-shadow:0 13px 26px rgba(33,82,190,.24)!important;
}
.zo-start:hover{filter:brightness(1.05);transform:translateY(-2px)}
.zo-secondary{
  min-height:54px!important;
  padding:0 21px!important;
  border:2px solid #3158b8!important;
  border-radius:15px!important;
  background:#fff!important;
  color:#173b7a!important;
  font-size:1.08rem!important;
}
.zo-secondary:hover{background:#eef4ff!important;color:#102f68!important}

/* Questions and content cards need strong readable contrast. */
.zo-question{
  width:min(980px,100%)!important;
  max-width:980px!important;
  padding:25px 28px!important;
  border:1px solid #d8e2ef!important;
  border-radius:24px!important;
  background:#fff!important;
  color:#102f68!important;
  box-shadow:0 12px 28px rgba(27,57,118,.07)!important;
  font-size:clamp(2rem,3vw,3rem)!important;
  line-height:1.18!important;
}
.zo-note,.zo-feedback,.zo-clue{font-size:1.08rem!important;line-height:1.58!important}

/* Sorting: arrows were almost invisible. */
.zo-sort-list{width:min(820px,100%)!important;gap:11px!important}
.zo-sort-item{
  min-height:72px!important;
  padding:12px 14px 12px 20px!important;
  border:1px solid #d7e2ef!important;
  background:#fff!important;
  color:#12356f!important;
  border-radius:18px!important;
  font-size:1.2rem!important;
  box-shadow:0 8px 20px rgba(25,52,108,.05)!important;
}
.zo-sort-item button{
  width:52px!important;
  height:48px!important;
  border:0!important;
  border-radius:13px!important;
  background:#244fc2!important;
  color:#fff!important;
  font-size:1.25rem!important;
  box-shadow:0 6px 13px rgba(26,65,163,.2)!important;
  opacity:1!important;
}
.zo-sort-item button:hover{background:#173d9b!important}
.zo-sort-item button:disabled{background:#9eadd0!important;color:#fff!important;opacity:.72!important}

/* Choices / polls / comparisons – white panel + dark text or clearly coloured active choice. */
.zo-choice,.zo-duel button,.zo-option-grid button,.zo-poll-option,.zo-choice-grid button{
  border:2px solid #cad7e9!important;
  background:#fff!important;
  color:#12356f!important;
  font-size:1.15rem!important;
  box-shadow:0 9px 20px rgba(25,52,108,.055)!important;
}
.zo-choice.primary{background:#2355cf!important;color:#fff!important;border-color:#2355cf!important}
.zo-choice:hover,.zo-duel button:hover,.zo-option-grid button:hover,.zo-poll-option:hover,.zo-choice-grid button:hover{
  border-color:#3c66d6!important;background:#eef4ff!important;color:#102f68!important
}
.zo-poll-option.a,.zo-poll-option.b{background:#fff!important;color:#12356f!important}

/* Inputs: guaranteed dark text on white. */
.zo-typing-input,.zo-alpha-input,.zo-answer-input,.zo-number-input,.zo-publish input{
  background:#fff!important;
  color:#102f68!important;
  border:2px solid #bdcce2!important;
  font-size:1.18rem!important;
}
.zo-typing-input:focus,.zo-alpha-input:focus,.zo-answer-input:focus,.zo-number-input:focus,.zo-publish input:focus{
  outline:3px solid rgba(49,92,225,.18)!important;border-color:#315ce1!important
}

/* Strong contrast for grids and memory widgets. */
.zo-pattern-cell,.zo-sequence-cell,.zo-number-grid button,.zo-card-memory{
  border:2px solid #bdcce2!important;
  background:#e8eef8!important;
  color:#173b7a!important;
}
.zo-pattern-cell.chosen,.zo-pattern-cell.flash,.zo-sequence-cell.active{
  background:#2757d2!important;color:#fff!important;border-color:#2757d2!important
}
.zo-feedback.good{background:#e7f8ef!important;color:#0c6646!important;border:1px solid #b9e9d2!important}
.zo-feedback.bad{background:#fff0f2!important;color:#8f2440!important;border:1px solid #ffcbd5!important}

/* Larger game widgets. */
.zo-reaction-pad,.zo-click-pad{width:min(900px,100%)!important;min-height:360px!important}
.zo-target-area,.zo-mover-stage{width:min(960px,100%)!important;height:410px!important}
.zo-stop-circle{width:300px!important;height:300px!important}
.zo-typing-text{width:min(930px,100%)!important;max-width:930px!important;font-size:1.5rem!important}
.zo-typing-input{width:min(930px,100%)!important;min-height:110px!important}
.zo-memory-number{font-size:clamp(4rem,10vw,8rem)!important;color:#12356f!important}
.zo-alpha{font-size:clamp(1.5rem,3vw,2.2rem)!important;color:#12356f!important}
.zo-score-big{color:#102f68!important}

/* Card artwork: all non-reference SVGs now have a complete scene + white wave. */
.zorelo-v14-featured .zorelo-card-art,
.zorelo-v14-all-grid .zorelo-card-art,
.zorelo-v14-related-grid .zorelo-card-art{height:170px!important;min-height:170px!important;background:#eaf1fb!important}
.zorelo-v14-featured .zorelo-card-art-image,
.zorelo-v14-all-grid .zorelo-card-art-image,
.zorelo-v14-related-grid .zorelo-card-art-image{object-fit:cover!important;object-position:center!important}

@media(max-width:1100px){
  .zorelo-v17-game-visual{width:210px!important;height:122px!important}
  .zorelo-v15-game-subhead{grid-template-columns:210px minmax(0,1fr)!important}
  .zo-intro-layout{grid-template-columns:1fr 340px;gap:30px}
  .zo-intro-art{height:205px}
}
@media(max-width:760px){
  .zorelo-v17-game-visual{width:100%!important;height:170px!important;max-width:420px!important}
  .zorelo-v15-game-subhead{grid-template-columns:1fr!important}
  .zorelo-game-root,.zo-game{min-height:430px!important}
  .zo-game{padding:28px 18px!important}
  .zo-intro-layout{grid-template-columns:1fr!important;gap:24px}
  .zo-intro-art{height:190px;order:-1}
  .zo-game h2{font-size:2.45rem!important}
  .zo-game p{font-size:1.08rem!important}
  .zo-question{font-size:1.8rem!important;padding:20px 18px!important}
  .zo-sort-item{font-size:1.06rem!important}
  .zo-sort-item button{width:46px!important;height:44px!important}
  .zo-reaction-pad,.zo-click-pad{min-height:300px!important}
  .zo-target-area,.zo-mover-stage{height:330px!important}
  .zorelo-v14-featured .zorelo-card-art,.zorelo-v14-all-grid .zorelo-card-art,.zorelo-v14-related-grid .zorelo-card-art{height:155px!important;min-height:155px!important}
}