:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#202622;background:#f6f7f4;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}a{color:inherit}.site-shell{max-width:1188px;margin:0 auto;padding:0 38px}
.site-header{height:96px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e3e7e1}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;font-size:15px;font-weight:850;letter-spacing:.055em}.brand-mark{display:grid;place-items:center;position:relative;width:34px;height:34px;color:white;background:#183c2a;border-radius:9px;font-size:25px;font-weight:800;line-height:1;padding-bottom:3px}.brand-dot{position:absolute;bottom:7px;right:6px;width:5px;height:5px;background:#d8ea76;border-radius:50%}.header-right{display:flex;align-items:center;gap:21px}.header-label{font-size:10px;color:#8c978c;letter-spacing:.14em;font-weight:700}.icon-button{border:1px solid #d9ded8;color:#37443a;background:white;width:32px;height:32px;display:inline-grid;place-items:center;border-radius:50%;font-size:15px;font-weight:700}.icon-button:hover{border-color:#829585;background:#f9fbf7}
.intro{padding:70px 0 49px;max-width:750px}.eyebrow{display:flex;align-items:center;gap:11px;font-size:11px;font-weight:800;letter-spacing:.19em;color:#71836f}.eyebrow-line{height:2px;width:22px;background:#8ca389}.intro h1{font-size:clamp(42px,5vw,67px);letter-spacing:-.062em;line-height:1.1;font-weight:790;margin:19px 0 17px}.intro h1 em{font-style:normal;color:#477959}.intro p{max-width:590px;font-size:15.5px;line-height:1.76;color:#66716a;margin:0}
.play-layout{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(260px,.88fr);gap:22px;align-items:start}.game-panel,.sidebar-panel{background:#fff;border:1px solid #e2e8e0;border-radius:16px;box-shadow:0 12px 42px -40px rgba(29,62,40,.2)}.game-panel{padding:32px 34px 30px}.panel-top{display:flex;align-items:center;justify-content:space-between}.top-heading,.section-mini{font-size:11px;font-weight:800;letter-spacing:.17em;color:#526257}.status-pill{font-size:11px;color:#4d7858;background:#ecf5ec;border:1px solid #deecdd;border-radius:99px;padding:7px 10px;font-weight:650;display:flex;align-items:center;gap:7px}.status-dot{width:6px;height:6px;border-radius:50%;background:#66a571}
.switches{margin-top:29px}.field-name{font-size:12px;color:#66736b;margin:0 0 10px;font-weight:650}.difficulty-label{margin-top:21px}.segmented{display:flex;gap:3px;padding:4px;border:1px solid #e5eae3;background:#f6f8f5;border-radius:10px}.segment{flex:1;border:0;background:transparent;color:#69736b;padding:12px 10px;border-radius:7px;font-size:12px;font-weight:700;transition:background .18s,color .18s,box-shadow .18s}.segment.active{background:white;color:#264c36;box-shadow:0 1px 5px #23402a16}.segment:hover:not(.active){background:#eff3ed;color:#35573f}.small-star{color:#89a38b}
.loading-state{color:#6b786d;font-size:13px;padding:48px 5px;display:flex;justify-content:center;align-items:center;gap:12px}.spinner{height:17px;width:17px;border:2px solid #dde7dc;border-top-color:#568665;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}.notice{background:#fbf8ea;border:1px solid #eee4bd;color:#76682e;border-radius:8px;padding:10px 13px;font-size:12px;line-height:1.6;margin-top:20px}
.puzzle-head{display:flex;align-items:center;justify-content:space-between;margin-top:35px}.muted-label{font-size:11px;color:#97a198}.tile-row{display:flex;justify-content:center;gap:9px;margin:16px 0 0}.tile{width:min(17.8%,66px);aspect-ratio:1;display:grid;place-items:center;border:1px solid #dfe5db;border-radius:10px;background:#f4f7f2;font-size:clamp(22px,3vw,31px);font-weight:800;letter-spacing:-.04em;color:#263d2c}.start-tiles .tile{background:#e7efe5;border-color:#d8e7d3;color:#345b3e}.tile.goal{background:#245336;color:white;border-color:#245336}
.journey-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:27px 0 0}.journey-item{display:flex;align-items:center;gap:6px;color:#8a988c;font-size:10px;font-weight:750;letter-spacing:.08em;white-space:nowrap}.journey-icon{font-size:22px;font-weight:400;color:#95a597}.target-cross{font-size:16px;color:#517959}.journey-line{height:1px;background:#e0e7df;flex:1;max-width:100px}.goal-tiles{margin-top:12px;margin-bottom:29px}
.divider-wide{border-top:1px solid #ecf0ea}.score-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:21px 0 22px}.score-cell{display:flex;flex-direction:column;align-items:center;gap:6px}.score-cell:not(:last-child){border-right:1px solid #edf0ec}.score-label{font-size:9px;font-weight:800;letter-spacing:.13em;color:#99a39a}.score-cell strong{font-size:26px;letter-spacing:-.06em;font-weight:760;color:#243c2c;font-variant-numeric:tabular-nums}
.play-form-top{display:flex;justify-content:space-between;align-items:center;margin-top:27px;margin-bottom:11px}.play-form-top label{font-size:13px;font-weight:750}.play-form-top span{font-size:11px;color:#96a198}.input-row{display:flex;gap:9px}.input-row input{min-width:0;flex:1;width:1px;height:52px;border:1px solid #dbe3da;border-radius:9px;padding:0 15px;background:#fff;color:#1d432c;outline:none;font-size:17px;font-weight:740;letter-spacing:.14em;text-transform:uppercase}.input-row input::placeholder{font-size:11px;color:#bdc5bd;letter-spacing:.13em}.input-row input:focus{border-color:#6e9c79;box-shadow:0 0 0 3px #5c9b6425}.input-row input[aria-invalid="true"]{border-color:#c57b65;box-shadow:0 0 0 3px #ad70561c}.action-button{border:1px solid #1c5030;border-radius:9px;background:#245738;color:white;padding:0 20px;min-height:51px;font-size:13px;font-weight:750;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:15px;transition:background .18s,transform .18s}.action-button:hover:not(:disabled){background:#163e26;transform:translateY(-1px)}.action-button span{font-size:17px;font-weight:400}.form-message{min-height:19px;margin:10px 0 0;color:#9ba49d;font-size:11px}.form-message.error{color:#bd6555}.form-message.success{color:#468457}.form-helpers{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px}.subtle-button{border:0;background:transparent;padding:8px 0;color:#57675c;font-size:11px;font-weight:750}.subtle-button:hover:not(:disabled){color:#1c6339}.subtle-button>span:first-child{font-size:18px;vertical-align:middle;margin-right:4px}.help-small{color:#9eaaa0;font-weight:500}.source-note{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:17px 3px;color:#849187;font-size:10.5px;line-height:1.7}.source-indicator{color:#7b9c81}.source-note button{padding:0;border:0;background:transparent;text-decoration:underline;text-decoration-color:#aab8ae;text-underline-offset:3px;color:#617564;font-size:10.5px}
.sidebar{display:flex;flex-direction:column;gap:18px}.sidebar-panel{padding:28px 27px}.sidebar-head{display:flex;justify-content:space-between;align-items:flex-start;gap:7px}.sidebar-head p{font-size:11px;color:#a0aaa2;margin:10px 0 0}.history-number{font-size:23px;font-weight:740;letter-spacing:-.06em;color:#c0cbbf;font-variant-numeric:tabular-nums}.history-list{margin-top:24px;max-height:380px;overflow-y:auto;scrollbar-color:#e1e9e0 transparent;scrollbar-width:thin}.empty-history{min-height:158px;border:1px dashed #dfe7dd;border-radius:9px;background:#fbfcfa;color:#a4b0a6;display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;line-height:1.7}.empty-symbol{font-size:32px;line-height:1}.empty-history p{font-size:11px;margin:11px 0 0}.history-entry{display:flex;gap:12px;align-items:center;min-height:45px;padding:8px 0;border-bottom:1px solid #edf1eb;animation:rise .2s ease-out}@keyframes rise{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.history-step{width:25px;text-align:center;font-size:11px;color:#a8b2aa;flex-shrink:0;font-variant-numeric:tabular-nums}.history-letters{display:flex;gap:3px}.mini-tile{display:grid;place-items:center;width:24px;height:26px;border-radius:4px;background:#f2f5ef;color:#4f6655;font-size:12px;font-weight:800}.mini-tile.changed{color:#fff;background:#5b956a}.history-entry:last-child .mini-tile{background:#e8f1e6}.history-entry:last-child .mini-tile.changed{background:#347448;color:#fff}.history-word-label{margin-left:auto;font-size:9px;color:#a6b2a8}.history-entry.final .history-word-label{color:#397b49;font-weight:750}.history-entry.reverted .history-word-label{color:#a18a66}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:27px 11px;margin-top:27px}.stats-grid>div{display:flex;flex-direction:column;gap:4px}.stats-grid strong{font-size:27px;font-weight:770;letter-spacing:-.05em;color:#244732;font-variant-numeric:tabular-nums}.stats-grid span{font-size:10px;color:#9ca69e}.stats-symbol{font-size:21px;color:#9ab69f}.aside-tip{display:flex;gap:13px;background:#edf2e9;border:1px solid #e3e9de;border-radius:12px;padding:19px}.aside-tip-icon{width:30px;min-width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:#dee8d8;color:#50835d;font-size:19px}.aside-tip strong{font-size:11px;color:#4b6752}.aside-tip p{font-size:11px;color:#7b8a7d;line-height:1.65;margin:5px 0 0}
.win-section{border-radius:11px;background:#f1f7ef;border:1px solid #dceada;margin-top:22px;padding:26px;text-align:center}.win-icon{margin:auto;background:#dcecdc;color:#388753;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font-size:24px}.win-kicker{color:#47815b;font-size:10px;letter-spacing:.2em;font-weight:800;margin-top:13px}.win-section h2{font-size:25px;letter-spacing:-.05em;margin:8px 0}.win-section>p{font-size:12px;color:#6d8170;line-height:1.65}.win-actions{display:flex;justify-content:center;gap:9px;margin-top:21px}.outline-button{border:1px solid #bcd3bc;background:transparent;border-radius:9px;min-height:50px;padding:0 17px;font-size:12px;font-weight:700;color:#346441}.outline-button:hover{background:white}.share-feedback{min-height:14px;margin:7px 0!important;font-size:11px!important}.optimal-path{text-align:left;border-top:1px solid #d8e6d7;margin-top:20px;padding-top:20px}.solution-steps{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;align-items:center}.solution-word{font-size:11px;font-weight:800;color:#365841;background:#fff;border:1px solid #dce7d9;padding:7px 9px;border-radius:6px}.solution-arrow{color:#95ae99;font-size:14px}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#9aa59c;font-size:11px;margin-top:60px;padding:23px 0 30px;border-top:1px solid #e2e9e0}.footer-bullet{padding:0 5px}.footer-heart{color:#557d59}
dialog{border:1px solid #e0e8df;border-radius:14px;max-width:min(520px,calc(100vw - 30px));padding:26px 28px 30px;box-shadow:0 25px 80px #0002;line-height:1.7;font-size:13px;color:#596960}dialog::backdrop{background:#14251ab0}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-top h2{color:#203d2b;margin:0;font-size:24px;letter-spacing:-.05em}.dialog-top .icon-button{font-size:22px;font-weight:400}.dialog-source{border-top:1px solid #e5ece2;padding-top:14px}.dialog-source strong{color:#3f6348}.dialog-source p{margin:5px 0 0}dialog ol{padding-left:20px}dialog li{margin-bottom:7px}dialog a{color:#396e48}
@media(min-width:1300px){.site-shell{padding:0 30px}}
@media(max-width:900px){.site-shell{padding:0 24px}.play-layout{grid-template-columns:minmax(0,1fr) minmax(240px,.85fr);gap:15px}.game-panel{padding:27px 24px}.sidebar-panel{padding:23px 20px}.tile-row{gap:6px}.tile{font-size:24px}.mini-tile{width:21px;height:23px;font-size:10px}.history-entry{gap:6px}}
@media(max-width:700px){.site-shell{padding:0 17px}.site-header{height:74px}.header-label{display:none}.intro{padding:44px 0 34px}.intro h1{font-size:clamp(38px,9vw,54px);margin:15px 0}.intro p{font-size:13.5px}.play-layout{grid-template-columns:1fr}.game-panel{padding:22px 21px}.sidebar{display:grid;grid-template-columns:1fr}.source-note{padding-bottom:4px}.site-footer{margin-top:35px;flex-wrap:wrap;font-size:10px}.tile{width:min(17.8%,60px)}.history-list{max-height:320px}.mini-tile{width:25px;height:27px}}
@media(max-width:390px){.game-panel{padding:20px 15px}.site-shell{padding:0 11px}.segmented .segment{padding:12px 3px;font-size:11px}.tile-row{gap:6px}.tile{border-radius:7px}.input-row input{padding:0 12px}.action-button{padding:0 13px}.win-actions{flex-wrap:wrap}.form-helpers{align-items:start}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* v2: sanapolku muodostuu suoraan lähtösanan alle. */
.puzzle-head{margin-top:28px;gap:12px;align-items:start}
.puzzle-head .muted-label{margin-top:7px;font-size:10px;letter-spacing:.04em}
.goal-label{font-size:10px;font-weight:700;color:#8da093;white-space:nowrap;letter-spacing:.07em}
.goal-label strong{font-size:12px;margin-left:6px;letter-spacing:.1em;color:#346747}
.word-ladder{max-width:360px;margin:0 auto;padding:4px 12px 6px}
.word-ladder .tile-row,.letter-input-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;width:100%}
.word-ladder .tile-row{margin-top:9px}
.word-ladder .tile{width:100%;height:auto;aspect-ratio:1;min-width:0;font-size:clamp(21px,2.6vw,30px)}
.word-step{position:relative}
.word-step .tile.changed{border-color:#64a175;background:#e3f0e2;color:#28623d}
.word-step.final .tile{background:#275a38;color:white;border-color:#275a38}
.word-step.final .tile.changed{background:#367a49;border-color:#367a49;color:#fff}
.word-step.reverted .tile.changed{border-color:#d6c09e;background:#f7f0e4;color:#826746}
.step-index{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:6px;min-width:22px;text-align:right;font-size:10px;color:#acb6ad;font-variant-numeric:tabular-nums}
.word-step.reverted .step-index{color:#a58a64}
#play-form-section{margin-top:9px}
.letter-input{display:block;width:100%;height:auto;aspect-ratio:1;min-width:0;padding:0;border:2px solid #c8d9cb;border-radius:10px;background:#fff;text-align:center;text-transform:uppercase;font-size:clamp(21px,2.6vw,30px);font-weight:800;color:#244e35;outline:none;caret-color:#25683c;box-shadow:0 2px 7px #345c3110}
.letter-input:focus{border-color:#4c9262;box-shadow:0 0 0 3px #5c9b6425}
.letter-input[aria-invalid="true"]{border-color:#bc6c57;background:#fff9f7}
.letter-input-row:focus-within .letter-input:not(:focus){border-color:#b3cbb8}
.move-submit{display:flex;width:100%;margin-top:4px;min-height:45px}
.form-message{min-height:31px;margin:9px 0 0;text-align:center;line-height:1.4}
.form-helpers{margin-top:12px}
.stats-grid{gap:24px 12px}
.stats-grid .stat-timer{grid-column:1/-1;background:#f2f7f1;border:1px solid #e1ebdf;border-radius:9px;padding:14px 15px;gap:4px}
.stats-grid .stat-timer strong{font-size:34px;color:#24593a;font-variant-numeric:tabular-nums}
.stats-grid .stat-timer span{color:#728778}
.stats-grid strong{font-size:24px}
@media(max-width:900px){.word-ladder{padding:4px 11px}.word-ladder .tile-row,.letter-input-row{gap:7px}}
@media(max-width:700px){.word-ladder{max-width:360px;margin:auto}.word-ladder .tile{font-size:27px}.letter-input{font-size:27px}}
@media(max-width:390px){.word-ladder{padding:4px 7px}.word-ladder .tile-row,.letter-input-row{gap:6px}.word-ladder .tile,.letter-input{border-radius:7px;font-size:24px}.step-index{margin-right:3px}}

/* v3: kirjaimen sijainti verrattuna maaliin KAKKA */
.word-ladder .tile.correct-position,
.word-ladder .start-tiles .tile.correct-position,
.word-ladder .word-step .tile.correct-position,
.word-ladder .word-step.final .tile.correct-position,
.word-ladder .word-step.reverted .tile.correct-position {
  background:#a26b3f; color:#fffaf3; border-color:#915b31;
}
.letter-input.correct-position,
.letter-input-row:focus-within .letter-input.correct-position:not(:focus) {
  background:#a26b3f; color:#fffaf3; border-color:#915b31;
}
.letter-input.correct-position:focus {border-color:#6e4425;box-shadow:0 0 0 3px #a26b3f44}
.archive-panel{padding-top:25px;padding-bottom:25px}
.archive-description{color:#77867b;font-size:12px;line-height:1.55;margin:12px 0 17px}
.archive-label{font-size:11px;color:#68786c;display:block;margin-bottom:7px}
.archive-select{width:100%;background:#f6f8f5;border:1px solid #dfe9dc;border-radius:8px;padding:9px 10px;color:#274632;font:inherit;font-size:12px}
.archive-rows{margin-top:14px;max-height:320px;overflow:auto}
.archive-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #edf1eb;font-size:11px}
.archive-row span{color:#809084;flex:1;font-variant-numeric:tabular-nums}
.archive-row strong{color:#354e3a;letter-spacing:.11em;font-size:12px}
.archive-row small{font-size:13px;color:#438052;min-width:12px;text-align:right}
.archive-more{margin-top:10px;font-size:11px;text-align:center;width:100%}
.archive-help{margin:13px 0 0;font-size:10px;color:#9aaa9a;line-height:1.5}
.site-footer{align-items:flex-start;line-height:1.7}
.footer-attribution{max-width:650px;color:#718174;font-size:10px;margin-top:6px}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-links a:hover,.footer-attribution a:hover{text-decoration:underline}
.info-page{max-width:760px;margin:56px auto;line-height:1.75;font-size:15px;color:#455449}
.info-page h1{font-size:clamp(34px,5vw,48px);color:#244532;line-height:1.1}
.info-page h2{color:#285538;font-size:23px;margin-top:30px}
.info-page a{color:#236747;text-decoration:underline}
.info-page li{margin-bottom:7px}
@media(max-width:700px){.site-footer{flex-direction:column}.info-page{margin:30px auto;font-size:14px}}