.page-walkthrough .rk-main {
    background: #e8f1df;
}

.walk-page-head {
    min-height: 198px;
    padding: 32px 28px;
    color: #fffbe4;
    background-color: var(--rk-water);
    background-image: url("../images/water-tile.webp");
    background-repeat: repeat;
    background-size: 96px 96px;
    border-bottom: 8px solid var(--rk-sand);
}

.walk-page-head-inner {
    display: flex;
    width: min(100%, 1280px);
    min-height: 126px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin: 0 auto;
}

.walk-page-title-block {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 18px;
    text-shadow: 2px 2px 0 var(--rk-deep-dark);
}

.walk-page-sprite {
    display: block;
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    background: url("../images/fish-icon.webp") center / contain no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(3px 3px 0 rgba(4, 48, 47, 0.72));
}

.walk-page-title-block p,
.walk-section-head p,
.walk-goal-panel header p,
.walk-flags-panel header p,
.walk-next-panel header p {
    margin: 0 0 2px;
    color: #fff1a2;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.walk-page-title-block h1 {
    margin: 0;
    font-size: 40px;
    line-height: 1.08;
}

.walk-page-title-block > div > span {
    display: block;
    max-width: 650px;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.walk-scope-badge {
    display: grid;
    min-width: 236px;
    padding: 15px 17px;
    color: var(--rk-ink);
    background: var(--rk-paper);
    border: var(--rk-line);
    border-radius: 6px;
    box-shadow: 5px 5px 0 rgba(4, 48, 47, 0.45);
    text-align: center;
}

.walk-scope-badge strong {
    color: var(--rk-deep);
    font-size: 17px;
    text-transform: uppercase;
}

.walk-scope-badge span {
    margin-top: 5px;
    color: #8b5a17;
    font-size: 13px;
    font-weight: 900;
}

.walk-scope-badge small {
    margin-top: 9px;
    color: #60766a;
    font-size: 10px;
    font-weight: 800;
}

.walk-workspace {
    width: min(calc(100% - 40px), 1280px);
    margin: 0 auto;
    padding: 28px 0 72px;
}

.walk-route-tabs {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(240px, 0.7fr);
    overflow: hidden;
    background: #dce9d2;
    border: var(--rk-line);
    border-radius: 6px;
    box-shadow: 4px 4px 0 #7b9b72;
}

.walk-route-tabs > button {
    display: flex;
    min-width: 0;
    min-height: 65px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--rk-ink);
    background: #f7f1d6;
    border: 0;
    border-right: 2px solid rgba(24, 58, 54, 0.42);
    cursor: pointer;
    text-align: left;
}

.walk-route-tabs > button:hover { background: #f3dda0; }

.walk-route-tabs > button.is-active {
    color: #fff;
    background: var(--rk-deep);
}

.walk-route-tabs > button > span:last-child {
    display: grid;
    gap: 3px;
}

.walk-route-tabs strong {
    font-size: 13px;
    text-transform: uppercase;
}

.walk-route-tabs small {
    color: #638073;
    font-size: 10px;
    font-weight: 800;
}

.walk-route-tabs .is-active small { color: #d7ecd4; }

.walk-route-icon {
    display: block;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    /* The source sheet is 1024 x 896 (8 x 7 tiles), not square. */
    background-image: url("../images/environment-sprites.webp");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 304px 266px;
    image-rendering: pixelated;
}

.walk-route-icon.is-teen { background-position: -152px 0; }

.walk-route-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    color: var(--rk-deep);
    background: #fffdf0;
}

.walk-route-actions > span {
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.walk-reset-button {
    min-height: 30px;
    padding: 4px 8px;
    color: var(--rk-ink);
    background: #f7e3a5;
    border: 1px solid var(--rk-ink);
    border-radius: 3px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.walk-reset-button:hover,
.walk-reset-button:focus-visible { background: #f0c96d; }

.walk-intro-card {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    gap: 24px;
    margin-top: 16px;
    padding: 18px 20px;
    background: var(--rk-paper-strong);
    border: var(--rk-line);
    border-radius: 6px;
    box-shadow: 4px 4px 0 #91a976;
}

.walk-intro-copy h2 {
    margin: 0;
    color: var(--rk-deep);
    font-size: 24px;
    line-height: 1.15;
}

.walk-intro-copy p:last-child {
    max-width: 650px;
    margin: 8px 0 0;
    color: #587067;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.walk-kicker {
    margin: 0 0 5px;
    color: #a16a19;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.walk-fishing-rules {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0 0 0 20px;
    color: var(--rk-ink);
    font-size: 10px;
    line-height: 1.4;
    font-weight: 800;
}

.walk-fishing-rules li::marker { color: var(--rk-blue); }

.walk-results-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 3px 11px;
}

.walk-results-status p {
    margin: 0;
    color: #596e64;
    font-size: 12px;
    font-weight: 800;
}

.walk-results-status strong {
    color: var(--rk-deep);
    font-size: 17px;
}

.walk-layout {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1.48fr) minmax(320px, 0.82fr);
    gap: 20px;
}

.walk-timeline-panel,
.walk-goal-panel,
.walk-flags-panel,
.walk-next-panel {
    overflow: hidden;
    background: #fff9dc;
    border: var(--rk-line);
    border-radius: 6px;
    box-shadow: 5px 5px 0 #77966f;
}

.walk-section-head,
.walk-goal-panel > header,
.walk-flags-panel > header,
.walk-next-panel > header {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 11px;
    padding: 11px 15px;
    color: #fff;
    background: var(--rk-deep);
    border-bottom: 3px solid var(--rk-ink);
}

.walk-section-head { justify-content: space-between; }

.walk-section-head h2,
.walk-goal-panel h2,
.walk-flags-panel h2,
.walk-next-panel h2 {
    margin: 2px 0 0;
    font-size: 21px;
    line-height: 1.1;
}

.walk-open-badge {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    color: var(--rk-ink);
    background: #fff0a8;
    border: 1px solid var(--rk-ink);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.walk-step-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.walk-step-card {
    position: relative;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    min-width: 0;
    border-bottom: 2px solid #a3b28a;
    scroll-margin-top: 100px;
}

.walk-step-card:last-child { border-bottom: 0; }

.walk-step-card.is-complete { background: #eff5e6; }
.walk-step-card.is-locked { background: #f6f0d9; }

.walk-step-rail {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.walk-step-rail::after {
    content: "";
    position: absolute;
    top: 53px;
    bottom: -2px;
    left: calc(50% - 1px);
    width: 2px;
    background: #9eb7a0;
}

.walk-step-card:last-child .walk-step-rail::after { display: none; }

.walk-step-rail span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--rk-blue);
    border: 2px solid var(--rk-ink);
    border-radius: 50%;
    box-shadow: 2px 2px 0 rgba(24, 58, 54, 0.32);
    font-size: 12px;
    font-weight: 900;
}

.walk-step-card.is-complete .walk-step-rail span {
    color: var(--rk-ink);
    background: var(--rk-gold);
}

.walk-step-body { min-width: 0; padding: 17px 18px 15px 5px; }

.walk-step-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.walk-step-title-wrap { min-width: 0; }

.walk-step-title-wrap p {
    margin: 0 0 3px;
    color: #a16a19;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.walk-step-title-wrap h3 {
    margin: 0;
    color: var(--rk-deep);
    font-size: 20px;
    line-height: 1.12;
}

.walk-flag-toggle {
    display: inline-flex;
    min-height: 29px;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    color: var(--rk-deep);
    background: #f5e6a8;
    border: 1px solid var(--rk-ink);
    border-radius: 4px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.walk-flag-toggle input { accent-color: var(--rk-deep); }
.walk-flag-toggle:has(input:disabled) { color: #56645a; background: #ece9d7; cursor: not-allowed; }

.walk-step-grid {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 15px;
    margin-top: 10px;
}

.walk-step-objective {
    margin: 0;
    color: var(--rk-ink);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 900;
}

.walk-instruction-list {
    display: grid;
    gap: 5px;
    margin: 9px 0 0;
    padding: 0 0 0 17px;
    color: #536b61;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
}

.walk-instruction-list li::marker { color: var(--rk-blue); }

.walk-step-media {
    overflow: hidden;
    background: #29464a;
    border: 2px solid var(--rk-ink);
    border-radius: 4px;
}

.walk-step-media img {
    display: block;
    width: 100%;
    height: 84px;
    object-fit: cover;
    image-rendering: pixelated;
}

.walk-step-media span {
    display: block;
    padding: 4px 5px;
    color: #fffbe4;
    font-size: 8px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.walk-step-notes {
    margin-top: 8px;
    padding: 7px 9px;
    color: #70591e;
    background: #fff1b6;
    border-left: 3px solid var(--rk-gold);
    font-size: 9px;
    line-height: 1.35;
    font-weight: 800;
}

.walk-step-notes p { margin: 0; }

.walk-step-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 9px;
    margin-top: 10px;
}

.walk-map-chip,
.walk-checkpoint {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 3px 6px;
    color: var(--rk-ink);
    background: #dbeacf;
    border: 1px solid #789b72;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.walk-checkpoint { background: #f5dc83; border-color: #9a731d; }

.walk-map-link {
    color: var(--rk-blue);
    font-size: 9px;
    font-weight: 900;
    text-decoration: underline;
}

.walk-step-refs {
    display: grid;
    gap: 6px;
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px dashed #aab696;
}

.walk-ref-group {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
}

.walk-ref-label {
    color: #758477;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.walk-ref-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.walk-ref-chip,
.walk-reward-chip {
    display: inline-flex;
    min-width: 0;
    flex-direction: column;
    padding: 4px 6px;
    color: var(--rk-ink);
    background: #fffdf0;
    border: 1px solid #a0b28c;
    border-radius: 3px;
    text-decoration: none;
}

.walk-ref-chip:hover,
.walk-ref-chip:focus-visible { background: #fff1b6; outline: 2px solid var(--rk-blue); outline-offset: 1px; }

.walk-ref-chip strong,
.walk-reward-chip strong { font-size: 9px; line-height: 1.1; }

.walk-ref-chip small,
.walk-reward-chip small { margin-top: 2px; color: #56685c; font-size: 10px; font-weight: 800; }

.walk-ref-chip.is-fish { border-color: #8db1bd; }
.walk-ref-chip.is-gear { border-color: #c4a46a; }
.walk-ref-chip.is-item { border-color: #a6b78c; }
.walk-reward-chip { background: #edf4d8; border-color: #70926a; }

.walk-requirement {
    margin: 9px 0 0;
    color: #738076;
    font-size: 8px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.walk-requirement.is-locked { color: #a45a42; }

.walk-flag-details {
    margin-top: 7px;
    color: #607369;
    font-size: 8px;
}

.walk-flag-details summary { cursor: pointer; font-weight: 900; }

.walk-flag-details dl {
    display: grid;
    gap: 4px;
    margin: 7px 0 0;
    padding: 7px;
    background: #f7f2d8;
    border: 1px solid #bdc49e;
}

.walk-flag-details dl div { display: grid; grid-template-columns: 65px minmax(0, 1fr); gap: 7px; }
.walk-flag-details dt { color: #9b6b1f; font-weight: 900; text-transform: uppercase; }
.walk-flag-details dd { margin: 0; overflow-wrap: anywhere; }

.walk-side-panel { display: grid; gap: 17px; }
.walk-side-panel > section { box-shadow: 4px 4px 0 #77966f; }

.walk-side-icon {
    display: block;
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    /* Use one complete 128 x 128 UI tile per card icon. */
    background-image: url("../images/ui-sprites.webp");
    background-repeat: no-repeat;
    background-position: 0 -180px;
    background-size: 360px 360px;
    image-rendering: pixelated;
}

.walk-side-icon.is-check { background-position: -180px -90px; }
.walk-side-icon.is-lamp { background-position: -45px -180px; }

.walk-goal-panel > p,
.walk-next-panel > p { margin: 0; padding: 14px 15px 7px; color: #526960; font-size: 11px; line-height: 1.45; font-weight: 800; }

.walk-goal-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 7px 15px 14px;
}

.walk-goal-meta div { min-width: 0; }
.walk-goal-meta dt { color: #a16a19; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.walk-goal-meta dd { margin: 3px 0 0; color: var(--rk-deep); font-size: 9px; font-weight: 900; overflow-wrap: anywhere; }

.walk-flags-panel { max-height: 650px; }
.walk-panel-note { margin: 0; padding: 12px 15px 6px; color: #64766b; font-size: 9px; line-height: 1.4; font-weight: 700; }

.walk-flag-list {
    display: grid;
    max-height: 500px;
    gap: 4px;
    overflow-y: auto;
    margin: 0;
    padding: 8px 10px 14px;
    list-style: none;
}

.walk-flag-item label {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    padding: 7px 6px;
    color: var(--rk-ink);
    background: #fffdf0;
    border: 1px solid #b1bd99;
    border-radius: 3px;
    cursor: pointer;
}

.walk-flag-item label:hover { background: #fff1b6; }
.walk-flag-item input { position: absolute; opacity: 0; pointer-events: none; }

.walk-flag-box {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    background: #f5f0d9;
    border: 2px solid var(--rk-ink);
    border-radius: 3px;
}

.walk-flag-item input:checked + .walk-flag-box { background: var(--rk-gold); }
.walk-flag-item input:checked + .walk-flag-box::after { content: "✓"; color: var(--rk-ink); font-size: 12px; font-weight: 900; }
.walk-flag-item input:focus-visible + .walk-flag-box { outline: 3px solid var(--rk-blue); outline-offset: 2px; }
.walk-flag-item label:has(input:disabled) { color: #56645a; background: #eeebd9; cursor: not-allowed; }

.walk-flag-item label > span:last-child { display: grid; min-width: 0; gap: 2px; }
.walk-flag-item strong { overflow-wrap: anywhere; font-size: 9px; line-height: 1.2; }
.walk-flag-item small { overflow-wrap: anywhere; color: #56685c; font-size: 10px; line-height: 1.35; font-weight: 800; }

.walk-data-state {
    display: grid;
    gap: 5px;
    padding: 25px 18px;
    color: #66786c;
    font-size: 11px;
}

.walk-data-state.is-error { color: var(--rk-red); }
.walk-noscript { margin-top: 15px; padding: 15px; color: #fff; background: var(--rk-red); border: var(--rk-line); font-weight: 900; }

@media (max-width: 1120px) {
    .walk-route-tabs { grid-template-columns: 1fr 1fr; }
    .walk-route-actions { grid-column: 1 / -1; border-top: 2px solid rgba(24, 58, 54, 0.42); }
}

@media (max-width: 940px) {
    .walk-page-head-inner { align-items: stretch; flex-direction: column; }
    .walk-scope-badge { width: 100%; }
    .walk-intro-card { grid-template-columns: 1fr; }
    .walk-layout { grid-template-columns: 1fr; }
    .walk-side-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .walk-next-panel { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .walk-page-head { padding: 27px 18px; }
    .walk-page-title-block h1 { font-size: 31px; }
    .walk-page-sprite { width: 76px; height: 76px; }
    .walk-workspace { width: min(calc(100% - 24px), 1280px); padding-top: 20px; }
    .walk-route-tabs { grid-template-columns: 1fr; }
    .walk-route-tabs > button { border-right: 0; border-bottom: 2px solid rgba(24, 58, 54, 0.42); }
    .walk-route-actions { grid-column: auto; border-top: 0; }
    .walk-results-status { align-items: flex-start; flex-direction: column; gap: 4px; }
    .walk-step-card { grid-template-columns: 38px minmax(0, 1fr); }
    .walk-step-body { padding-right: 10px; }
    .walk-step-head { align-items: flex-start; flex-direction: column; gap: 8px; }
    .walk-step-grid { grid-template-columns: 1fr; }
    .walk-step-media { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; }
    .walk-step-media img { width: 90px; height: 62px; }
    .walk-step-media span { padding: 0 7px; text-align: left; }
    .walk-side-panel { display: block; }
    .walk-side-panel > section { margin-top: 17px; }
    .walk-side-panel > section:first-child { margin-top: 0; }
}