/* N-back visual preflight only: never changes the timed game surface. */
.sy-start-play .nback-help { container:nback-help / inline-size; max-width:1040px; margin-inline:auto; }
.sy-start-play .nback-help-heading { max-width:64ch; margin-bottom:1.25rem; }
.sy-start-play .nback-help-heading h3 { margin:.4rem 0 .6rem; }
.sy-start-play .nback-help-heading p { line-height:1.6; }
.sy-start-play .nback-help-cue-picker { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:1rem; }
.sy-start-play .nback-help-cue-picker > span { font-size:.95rem; font-weight:700; margin-right:.25rem; }
.sy-start-play .nback-help-cue-picker button { min-height:44px; border:1px solid #bacbe1; background:#f2f6fd; color:#243c60; border-radius:10px; padding:.6rem 1rem; font:700 .95rem/1.4 var(--sy-body); }
.sy-start-play .nback-help-cue-picker [aria-pressed="true"] { background:#263d6b; color:#fff; border-color:#263d6b; box-shadow:0 3px 0 #7b61ff; }
.sy-start-play .nback-help :is(button,a):focus-visible { outline:3px solid #3260aa; outline-offset:4px; }
.sy-start-play .nback-help-cue-rule { padding:.9rem 1.1rem; border-left:4px solid #7b61ff; border-radius:0 10px 10px 0; background:#f2efff; margin:1rem 0 1.7rem; font-size:1rem; color:#344367; }
.sy-start-play .nback-help-example + .nback-help-example { margin-top:2rem; padding-top:1.75rem; border-top:1px solid #ced9e9; }
.sy-start-play .nback-help-row-heading { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:.65rem 1rem; margin-bottom:.9rem; }
.sy-start-play .nback-help-row-heading h4 { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; margin:0; font-size:1.15rem; }
.sy-start-play .nback-help-row-heading h4 span { padding:.35rem .65rem; border-radius:8px; background:#e8e3ff; color:#493077; font-size:.95rem; }
.sy-start-play .nback-help-row-heading p { font-size:.95rem; margin:0; }
.sy-start-play .nback-help-sequence { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:0; padding:0; }
.sy-start-play .nback-help-frame { min-width:0; margin:0; overflow:hidden; border:2px solid #c4d2e5; border-radius:16px; background:#f7faff; }
.sy-start-play .nback-help-frame.is-compared { border-color:#538c49; }
.sy-start-play .nback-help-frame.is-match { border-color:#467d3d; box-shadow:0 4px 0 #ccff66; }
.sy-start-play .nback-help-frame figure { margin:0; }
.sy-start-play .nback-help-frame-top { padding:.55rem .8rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem; align-items:center; color:#30445f; }
.sy-start-play .nback-help-frame-top strong { font-size:.95rem; }
.sy-start-play .nback-help-frame-top span { font-size:.8rem; font-weight:800; letter-spacing:.08em; }
.sy-start-play .is-compared .nback-help-frame-top { background:#eaffc6; color:#24562d; }
.sy-start-play .nback-help-snapshot { position:relative; overflow:hidden; aspect-ratio:360/379; background:radial-gradient(circle at 50% 46%,#ffffff 0,#edf3fb 66%,#e4ecf7 100%); }
.sy-start-play .nback-help-position-dot { position:absolute; width:10px; height:10px; border:1px solid #8298bd; border-radius:50%; opacity:.75; transform:translate(-50%,-50%); }
.sy-start-play .nback-help-position-dot--top { left:50%; top:22%; }
.sy-start-play .nback-help-position-dot--right { left:78%; top:50%; }
.sy-start-play .nback-help-position-dot--bottom { left:50%; top:78%; }
.sy-start-play .nback-help-position-dot--left { left:22%; top:50%; }
.sy-start-play .nback-help-face { position:absolute; display:block; width:34%; height:34%; object-fit:contain; transform:translate(-50%,-50%); }
.sy-start-play .nback-help-face--top { left:50%; top:22%; }
.sy-start-play .nback-help-face--right { left:78%; top:50%; }
.sy-start-play .nback-help-face--bottom { left:50%; top:78%; }
.sy-start-play .nback-help-face--left { left:22%; top:50%; }
.sy-start-play .nback-help-response-row { display:flex; justify-content:center; align-items:center; min-height:60px; padding:.55rem .75rem .7rem; background:#eef4fb; border-top:1px solid #c6d5e5; }
.sy-start-play .nback-help-cue-tag { display:inline-flex; align-items:center; justify-content:center; min-width:148px; min-height:38px; padding:.48rem .9rem; border:1px solid #d59ab3; border-radius:8px; background:#ffe8f0; color:#7a294d; box-shadow:0 2px 0 #e0b4c6; font:800 .82rem/1.2 var(--sy-body); letter-spacing:.035em; white-space:nowrap; }
.sy-start-play .nback-help-cue-tag.is-active { background:#ccff66; color:#10283f; border-color:#e8ffb6; box-shadow:0 0 0 2px #ccff6655,0 0 22px #ccff66cc,0 3px 0 #7fbc36; text-shadow:none; }
.sy-start-play .nback-help-frame figcaption { padding:.8rem; }
.sy-start-play .nback-help-action { font:800 1rem/1.4 var(--sy-display); color:#243d60; }
.sy-start-play .is-match .nback-help-action { color:#245c31; }
.sy-start-play .nback-help-frame figcaption p { font-size:.95rem; line-height:1.55; margin:.3rem 0 0; color:#465e79; }
.sy-start-play p.nback-help-explanation { font-size:.95rem; margin-top:.9rem; color:#4c627c; }
.sy-start-play .nback-help-takeaway { padding:1.1rem 1.2rem; margin-top:1.8rem; background:#eff7ff; border:1px solid #bdd2ec; border-radius:14px; }
.sy-start-play .nback-help-takeaway > strong { color:#193753; line-height:1.5; }
.sy-start-play .nback-help-takeaway p { font-size:1rem; line-height:1.6; margin:.45rem 0 0; }
.sy-start-play p.nback-help-note { font-size:.95rem; margin-top:1rem; color:#50637b; }
@container nback-help (max-width:34rem) {
 .sy-start-play .nback-help-sequence { grid-template-columns:minmax(0,1fr); gap:.85rem; }
 .sy-start-play .nback-help-frame figure { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .sy-start-play .nback-help-frame-top { grid-column:1 / -1; }
 .sy-start-play .nback-help-snapshot { grid-column:1; grid-row:2; }
 .sy-start-play .nback-help-response-row { grid-column:1; grid-row:3; }
 .sy-start-play .nback-help-frame figcaption { grid-column:2; grid-row:2 / span 2; align-self:center; }
}
@container nback-help (max-width:19rem) {
 .sy-start-play .nback-help-frame figure { display:block; }
 .sy-start-play .nback-help-snapshot { max-width:320px; margin:auto; }
}
@media (forced-colors:active) {
 .sy-start-play .nback-help :is(.nback-help-frame,.nback-help-frame-top,.nback-help-cue-rule,.nback-help-takeaway,.nback-help-response-row) { color:CanvasText; background:Canvas; border-color:CanvasText; box-shadow:none; }
 .sy-start-play .nback-help-cue-picker button { color:ButtonText; background:ButtonFace; border-color:ButtonText; }
 .sy-start-play .nback-help-cue-picker [aria-pressed="true"] { outline:2px solid Highlight; }
 .sy-start-play .nback-help-cue-tag.is-active { color:HighlightText; background:Highlight; border-color:Highlight; box-shadow:none; }
}