.zp-main{max-width:1060px;margin:auto;padding:var(--zb-gap-top,32px) 24px 60px}.zp-main .zb-section-heading{margin:0 auto 32px;text-align:center}.zp-main h1{font-size:clamp(26px,4vw,40px);line-height:1.2;margin:12px 0}.zp-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:24px;align-items:start}.zp-page .zp-card{width:100%;max-width:none;padding:24px;margin:0}.zp-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:20px 0;font-size:14px}.zp-toolbar label{display:flex;gap:8px;align-items:center}.zp-toolbar select{padding:7px;border:1px solid #cbd2dd;border-radius:6px;background:white;font:inherit}.zp-toolbar output{font-variant-numeric:tabular-nums;font-weight:800}.zp-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:410px;margin:20px auto;touch-action:none;user-select:none}.zp-page .zp-cell{position:relative;aspect-ratio:1;border:1px solid #cbd4e1;border-bottom:4px solid #cbd4e1;border-radius:10px;background:#f5f7fa;color:#0f1429;font-weight:900;font-size:clamp(22px,4vw,32px);padding:0;transition:background .12s,transform .12s}.zp-cell:disabled{opacity:1;cursor:default}.zp-page .zp-cell.zp-selected{background:#fcd000;border-color:#b79a0d;transform:translateY(-2px)}.zp-page .zp-cell.zp-found{background:#d8efdf;border-color:#98c7a8;color:#16492a}.zp-page .zp-cell.zp-color-1{background:#dce9fa;border-color:#acc0de;color:#203e66}.zp-page .zp-cell.zp-color-2{background:#efe0f9;border-color:#ccb4df;color:#56376e}.zp-page .zp-cell.zp-color-3{background:#ffead1;border-color:#dfc099;color:#654721}.zp-page .zp-cell.zp-color-4{background:#ddf3f0;border-color:#9acbc4;color:#20534b}.zp-page .zp-cell.zp-blocked{background:#263449;border-color:#263449}.zp-current{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:16px 0}.zp-current output{font-weight:800;letter-spacing:.08em}.zp-current span{font-size:13px;color:#536477}.zp-actions{display:flex;gap:8px;flex-wrap:wrap}.zp-page .zp-actions button,.zp-result button{padding:9px 12px;border:1px solid #ccd5e2;border-radius:6px;background:white;color:#102e5c;font-weight:800;font-size:13px}.zp-page .zp-actions .zp-primary{background:#fcd000;border-color:#fcd000;color:#0f1429}.zp-actions button:disabled{opacity:.45;cursor:not-allowed}.zp-page button:not(:disabled):hover{filter:brightness(.96)}.zp-message{margin:18px 0 10px!important;min-height:3em;font-size:14px;font-weight:700}.zp-muted{font-size:13px;color:#536477;line-height:1.7}.zp-side{display:grid;gap:20px}.zp-panel{padding:24px;border:1px solid #dce3ef;background:white;border-radius:8px}.zp-panel h2{font-size:20px;margin:8px 0 20px}.zp-panel ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px}.zp-panel li{padding:11px 14px;background:#f2f5fa;border-radius:6px;font-weight:800;font-size:15px;letter-spacing:.06em}.zp-panel li.zp-word-done{background:#d8efdf;color:#16492a}.zp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 20px}.zp-stats div{display:flex;flex-direction:column-reverse;gap:5px}.zp-stats dt{font-size:11px;color:#536477}.zp-stats dd{margin:0;font-size:24px;font-weight:900}.zp-panel a{text-decoration:underline}.zp-other{font-size:14px;padding:0 12px}.zp-result{padding:20px;background:#f1f8f3;border:1px solid #b9d8c3;border-radius:8px;margin-top:20px}.zp-result h2{font-size:21px}.zp-result p{margin:12px 0;font-size:14px}.zp-rules{padding-left:24px;line-height:1.8}.zp-rules li{margin:12px 0}.zp-page #zp-help-close{position:absolute;right:14px;top:12px}
@media(max-width:760px){.zp-layout{grid-template-columns:1fr}.zp-side{grid-template-columns:1fr 1fr}.zp-main{padding:var(--zb-gap-top,20px) 16px 40px}.zp-page .zp-card{padding:18px}.zp-main .zb-section-heading p{font-size:15px}}
@media(max-width:480px){.zp-side{grid-template-columns:1fr}.zp-board{gap:6px}.zp-toolbar label{gap:4px}.zp-panel{padding:20px}}
@media(prefers-reduced-motion:reduce){.zp-page .zp-cell{transition:none}}

/* Match the white header while retaining readable footer text and links. */
.zp-page .zb-footer { background: #fff; color: #0f1429; border-top: 1px solid #dce3ef; }
.zp-page .zb-footer p { color: #536477; }
.zp-page .zb-footer > a, .zp-page .zb-footer-links a { color: #102e5c; }
.zp-page .zb-footer a:hover { color: #3f6297; text-decoration: underline; text-underline-offset: 3px; }
.zp-page .zb-footer a:focus-visible { outline: 2px solid #102e5c; outline-offset: 4px; }

/* Instruction cards share Zborko's dialog layout and numbered steps. */
.zp-instructions article { padding: 24px 20px; }
.zp-instructions p { min-height: 0; }
.zp-instructions .zb-example { gap: 5px; }
.zp-instructions .zb-example b { width: 34px; height: 38px; font-size: 23px; }
.zp-help-path { display: grid; grid-template-columns: repeat(3,34px); justify-content: start; }
.zp-help-path b:nth-child(4) { grid-column: 3; grid-row: 2; }
.zp-help-path b:nth-child(5) { grid-column: 2; grid-row: 2; }
.zp-instructions .zp-help-path b { background: #fff0b3; border-color: #d6b946; color: #634c0d; }
.zp-instructions .zp-help-found b { background: #d8efdf; border-color: #98c7a8; color: #16492a; }
.zp-help-caption { display: block; margin-top: 12px; color: #536477; font-size: 12px; line-height: 1.6; }
.zp-help-finish { display: flex; align-items: center; gap: 10px; padding: 14px; margin-top: 24px; background: #d8efdf; color: #16492a; border-radius: 6px; }
.zp-help-finish span { font-size: 24px; }
.zp-help-finish strong { font-size: 15px; }
.zp-help-levels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; text-align: left; }
.zp-help-levels > div { display: grid; gap: 6px; padding: 16px; border: 1px solid #dce3ef; border-radius: 6px; }
.zp-help-levels strong { font-size: 14px; }
.zp-help-levels span,.zp-help-note { font-size: 13px; line-height: 1.7; color: #536477; }
.zp-page .zp-help-note { margin: 18px auto; max-width: 660px; }
.zp-page #zp-help > form { margin-top: 24px; }
.zp-page #zp-help .zb-bottom-play { padding: 10px 18px; min-height: 44px; border: 1px solid #fcd000; border-radius: 6px; background: #fcd000; color: #0f1429!important; box-shadow: none; text-shadow: none; font-size: 14px; font-weight: 800; line-height: 1.4; transform: none; transition: background-color .15s; }
.zp-page #zp-help .zb-bottom-play:hover { background: #e6be00; border-color: #e6be00; box-shadow: none; transform: none; filter: none; }
.zp-page #zp-help .zb-bottom-play:active { background: #d9b300; box-shadow: none; transform: none; }
@media(max-width:680px) { .zp-help-levels { grid-template-columns: 1fr; } }
.zp-session-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.zp-session-actions button{padding:9px 14px;border:1px solid #ccd5e2;border-radius:6px;background:#fff;color:#102e5c;font:inherit;font-size:13px;font-weight:800}
.zp-session-actions button:disabled{opacity:.55;cursor:wait}
.zp-result .zb-start{display:inline-block;padding:10px 20px;background:#fcd000!important;border:1px solid #fcd000!important;border-radius:6px;color:#0f1429!important;font-weight:900;font-size:14px;cursor:pointer;transition:background-color .15s}
.zp-result .zb-start:hover{background:#e6be00!important;border-color:#e6be00!important}


.zp-other .fa-arrow-right{margin-inline-start:.4em;font-size:.9em}