/* ZORELO v3.4.0 – full gameplay QA pass: desktop/mobile stability, touch comfort, contrast and fairness helpers */

/* Never let a single game widget make the app wider than the viewport. */
.zorelo-game-page,
.zorelo-v14-play-wrap,
.zorelo-game-root,
.zo-game,
.zo-game *{box-sizing:border-box;min-width:0;}
.zorelo-game-page,.zorelo-game-root,.zo-game{max-width:100%;overflow-wrap:anywhere;}
.zorelo-game-root{overflow:hidden;}

/* Consistent app-grade control geometry. */
.zo-game button,
.zo-game input,
.zo-game textarea,
.zo-game .zo-secondary{font-family:inherit!important;font-weight:400!important;}
.zo-game button,
.zo-game .zo-secondary{min-height:54px;}
.zo-game input,
.zo-game textarea{font-size:1.05rem!important;line-height:1.4;}
.zo-game button:disabled{cursor:default;opacity:.62;}
.zo-game button:not(:disabled){cursor:pointer;}

/* Feedback should be readable from arm's length on a phone. */
.zo-feedback,.zo-note,.zo-clue{width:min(980px,100%);margin-left:auto;margin-right:auto;}
.zo-feedback{padding:18px 22px!important;border-radius:18px!important;}
.zo-note{line-height:1.55!important;}

/* Number/search, choice and memory games need stable grids across device sizes. */
.zo-number-grid{width:min(760px,100%)!important;grid-template-columns:repeat(5,minmax(56px,1fr))!important;gap:10px!important;}
.zo-number-grid button{min-height:58px!important;font-size:1.12rem!important;border-radius:15px!important;}
.zo-option-grid,.zo-choice-grid{width:min(900px,100%)!important;}
.zo-choice-row,.zo-poll-options,.zo-duel{width:min(900px,100%)!important;}
.zo-poll-options button,.zo-choice-grid button,.zo-option-grid button,.zo-duel button{min-height:68px!important;}
.zo-card-memory-grid{width:min(860px,100%)!important;}
.zo-card-memory{min-height:72px!important;font-size:1.55rem!important;}
.zo-pattern-grid,.zo-sequence-grid,.zo-color-grid{width:min(720px,100%)!important;}
.zo-pattern-cell,.zo-sequence-cell,.zo-color-grid button{aspect-ratio:1/1;min-height:48px;}

/* Sorting: larger move controls and clearer first/last disabled state. */
.zo-sort-list{width:min(860px,100%)!important;}
.zo-sort-item{display:grid!important;grid-template-columns:minmax(0,1fr) 54px 54px!important;gap:8px!important;align-items:center!important;}
.zo-sort-item button{min-width:54px!important;min-height:50px!important;}

/* Alphabet QA feedback. */
.zo-alpha-input.is-wrong{animation:zoInputWrong .22s ease;box-shadow:0 0 0 3px rgba(238,75,99,.18)!important;border-color:#e95369!important;}
@keyframes zoInputWrong{0%,100%{transform:translateX(0)}35%{transform:translateX(-5px)}70%{transform:translateX(5px)}}

/* Number search wrong cells stay visible but clearly inactive. */
.zo-number-grid button.miss{background:#fff0f2!important;color:#9b2f49!important;border-color:#f2b8c4!important;text-decoration:line-through;}
.zo-search-note{margin-top:12px!important;}

/* Keyboard marker for Liniengefühl. */
.zo-line-track{position:relative;}
.zo-line-key-marker{position:absolute;left:50%;top:50%;width:18px;height:32px;border-radius:10px;background:#315fe8;transform:translate(-50%,-50%);box-shadow:0 7px 18px rgba(49,95,232,.26);pointer-events:none;}
.zo-line-track:focus-visible .zo-line-key-marker{box-shadow:0 0 0 5px rgba(49,95,232,.18),0 7px 18px rgba(49,95,232,.26);}

/* Fast games: keep the actionable area comfortably large on all screens. */
.zo-click-pad,.zo-reaction-pad,.zo-signal-stage{width:min(920px,100%)!important;}
.zo-target-area,.zo-mover-stage,.zo-point-area{width:min(980px,100%)!important;}
.zo-target{min-width:56px!important;min-height:56px!important;}
.zo-stop-circle{touch-action:manipulation;}

/* Typing games: enough room without forcing a horizontal page. */
.zo-typing-text,.zo-typing-input,.zo-alpha-input,.zo-flawless-sentence,.zo-number-race-value{width:min(960px,100%)!important;}
.zo-typing-input{resize:vertical;}

/* Result and publish area: equal controls, truly centered labels. */
.zo-result-screen .zo-actions>*{
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  line-height:1.2!important;
}
.zo-publish{align-items:center!important;}
.zo-publish input{min-height:58px!important;}
.zo-publish button{min-height:58px!important;text-align:center!important;justify-content:center!important;}

/* Mobile QA – everything stays inside the phone and remains tappable. */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden!important;overscroll-behavior-x:none;}
  .zorelo-game-page,.zorelo-v14-play-wrap,.zorelo-game-root,.zo-game{width:100%!important;max-width:100%!important;}
  .zo-game{padding:24px 14px!important;}
  .zo-game h2{font-size:clamp(2rem,9vw,2.7rem)!important;line-height:1.05!important;}
  .zo-game p,.zo-note,.zo-feedback,.zo-clue{font-size:1.04rem!important;}
  .zo-game input,.zo-game textarea{font-size:16px!important;} /* prevents iOS focus zoom */
  .zo-game button,.zo-game .zo-secondary{min-height:56px!important;}
  .zo-choice-row,.zo-duel,.zo-poll-options,.zo-choice-grid,.zo-option-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .zo-duel>span{display:none!important;}
  .zo-number-grid{grid-template-columns:repeat(5,minmax(46px,1fr))!important;gap:7px!important;}
  .zo-number-grid button{min-height:52px!important;font-size:1rem!important;padding:6px!important;}
  .zo-sort-item{grid-template-columns:minmax(0,1fr) 50px 50px!important;}
  .zo-sort-item button{min-width:50px!important;min-height:48px!important;}
  .zo-pattern-grid,.zo-sequence-grid,.zo-color-grid{width:min(94vw,620px)!important;}
  .zo-card-memory-grid{grid-template-columns:repeat(4,minmax(50px,1fr))!important;gap:8px!important;}
  .zo-card-memory{min-height:62px!important;font-size:1.35rem!important;padding:6px!important;}
  .zo-target-area,.zo-mover-stage{height:330px!important;}
  .zo-point-area{height:300px!important;}
  .zo-click-pad,.zo-reaction-pad,.zo-signal-stage{min-height:300px!important;}
  .zo-stop-circle{width:min(270px,78vw)!important;height:min(270px,78vw)!important;}
  .zo-live-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;}
  .zo-live-stats>div{padding:10px 6px!important;}
  .zo-typing-input{min-height:130px!important;}
  .zo-result-screen .zo-actions{width:100%!important;}
  .zo-publish{width:100%!important;}
}

@media(max-width:430px){
  .zo-number-grid{grid-template-columns:repeat(5,minmax(40px,1fr))!important;gap:5px!important;}
  .zo-number-grid button{font-size:.94rem!important;min-height:48px!important;}
  .zo-card-memory-grid{grid-template-columns:repeat(4,minmax(44px,1fr))!important;}
  .zo-sort-item{grid-template-columns:minmax(0,1fr) 46px 46px!important;gap:5px!important;}
}

@media(prefers-reduced-motion:reduce){
  .zo-alpha-input.is-wrong{animation:none!important;}
}