:root{font-family:var(--jke-font-ui),system-ui,-apple-system,Segoe UI,sans-serif;color:#183c3d;background:#f7fbf3}*{box-sizing:border-box}body{margin:0}.skip-link{position:absolute;top:-100px;left:8px;z-index:20;background:white;padding:10px}.skip-link:focus{top:8px}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,summary:focus-visible{outline:3px solid #d8753e;outline-offset:3px}#app{max-width:1500px;margin:auto;padding:26px clamp(12px,3vw,42px) 70px}.eyebrow{color:#377668;font-size:.78rem;letter-spacing:.14em;font-weight:700;text-transform:uppercase}.intro{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;background:linear-gradient(120deg,#fffdf3,#ddf2e9);border:1px solid #cfdfd4;border-radius:28px;padding:clamp(24px,5vw,60px);box-shadow:0 15px 40px #25443c15}.intro h1{font-size:clamp(2.2rem,5vw,4.3rem);line-height:1.05;margin:8px 0 18px}.intro p{font-size:1.14rem;line-height:1.6;max-width:55ch}.primary{border:0;background:#145d62;color:white;border-radius:13px;padding:12px 20px;font-weight:700;min-height:46px}.primary:hover{background:#0b484d}.intro-art{height:230px;border-radius:24px;background:repeating-linear-gradient(0deg,#a8cbb0 0 20px,#accfb4 20px 40px);display:flex;align-items:center;justify-content:space-around;color:#076c97;font-size:4rem;overflow:hidden}.intro-art i{font-style:normal;letter-spacing:-.2em;text-shadow:0 5px #c3ecfb}.intro-art b{color:#ffd55a;text-shadow:0 4px #927a2d}.mission-list{margin:28px auto;max-width:990px}.mission-list h2{font-size:1.55rem}.mission-list ol{list-style:none;padding:0;display:grid;gap:10px}.mission-list li button{width:100%;border:1px solid #d4dfd7;background:white;border-radius:16px;padding:15px 18px;display:flex;align-items:center;gap:16px;text-align:left;color:inherit;min-height:74px}.mission-list li button:hover,.sandbox-link:hover{background:#edf7ef}.number{width:37px;height:37px;border-radius:50%;background:#d9eee6;display:grid;place-items:center;font-weight:700;flex:none}.mission-list li strong,.mission-list li small{display:block}.mission-list li small{color:#486967;line-height:1.4}.done{margin-left:auto;color:#17706d;white-space:nowrap;font-size:.85rem}.sandbox-link{border:2px dashed #6ba49a;border-radius:16px;padding:17px;width:100%;text-align:left;background:#f0f9f3;color:#145d62;font-weight:700}.fine-print{color:#59716c;font-size:.85rem}.game-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px;color:#56726b;font-size:.9rem;font-weight:700}.home-link{border:0;background:transparent;color:#145d62;text-decoration:underline;padding:9px 0}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,335px);gap:20px;align-items:start}.play-panel,.lesson-panel{background:#fffefa;border:1px solid #d8e4d9;border-radius:22px;box-shadow:0 12px 28px #163d3410}.play-panel{padding:20px}.lesson-panel{padding:17px;display:grid;gap:15px}.brief h1{font-size:clamp(1.7rem,3vw,2.5rem);margin:5px 0}.brief p:last-child{margin:6px 0 18px;line-height:1.45}.toolbar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}.toolbar button,.board-actions button:not(.primary){background:white;color:#19484a;border:1px solid #9ebcb4;border-radius:10px;padding:9px 11px;min-height:43px;font-weight:700}.toolbar button span{margin-right:5px}.toolbar button[aria-pressed=true]{background:#145d62;color:white;border-color:#145d62}.board-wrap{background:#d8e9d2;border-radius:17px;padding:12px;overflow:auto}.map-label{font-size:.68rem;font-weight:700;letter-spacing:.12em;color:#477365}.map-label.top{margin:0 0 7px}.map-label.bottom{text-align:right;margin:7px 0 0}.board{--tile-size:clamp(36px,5.2vw,65px);display:grid;grid-template-columns:repeat(12,var(--tile-size));grid-template-rows:repeat(7,var(--tile-size));width:max-content;max-width:none;margin:auto;background:#91bb94;border:5px solid #6d9f87;border-radius:12px;overflow:hidden}.tile{position:relative;border:1px solid #81a989;background:#a9ce9c;color:#267b9e;padding:0;display:grid;place-items:center;font-size:clamp(18px,2.5vw,30px);font-weight:700;touch-action:manipulation}.tile:nth-child(4n){background-color:#afd3a1}.tile.channel,.tile.spring,.tile.meadow,.tile.generator,.tile.dam{background:#b39167;border-color:#9b7a59}.tile.channel:before,.tile.spring:before,.tile.meadow:before,.tile.generator:before{content:"";position:absolute;inset:25% 0;background:#d9ba85}.tile.wet:before{background:#4da9c8;box-shadow:inset 0 4px #92d5e3}.tile.flowing:before{background:linear-gradient(90deg,#2f8eae,#76cbe1,#2f8eae);background-size:140% 100%;animation:water-move 1.1s linear infinite}.tile span{z-index:1}.tile.flowing span{color:#e8ffff;text-shadow:0 1px #20677f}.tile.dam{background:#755a49;color:#fff2ce}.tile.dam:after{content:"";position:absolute;inset:7% 33%;background:#5d4339;border-left:3px solid #b98c67;border-right:3px solid #b98c67}.tile.dam span{z-index:2}.tile.generator{color:#354753}.tile.powered span{color:#ffcf38;text-shadow:0 1px 3px #3d573e;animation:pulse .8s ease-in-out infinite alternate}.tile.spring span,.tile.meadow span{color:#176885}.tile:hover{filter:brightness(1.08)}.board-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}.hint{font-size:.83rem;color:#516d68;line-height:1.45;margin-bottom:0}.companion{display:flex;gap:10px;background:#eaf6ee;border-radius:15px;padding:10px;min-height:116px}.companion figure{width:90px;min-width:90px;height:94px;margin:0;display:grid;place-items:center}.companion img{max-width:100%;max-height:100%;object-fit:contain}.companion small{font-size:.68rem;color:#4c7771;font-weight:700;letter-spacing:.1em}.companion p{margin:7px 0;font-size:.9rem;line-height:1.35}.predict,.observation,details{border:1px solid #d7e4d8;border-radius:14px;padding:14px}.predict h2,.observation h2{font-size:1rem;margin:0 0 7px}.predict p,.observation p{font-size:.9rem;line-height:1.45;margin:0 0 9px}.predict button{display:block;text-align:left;width:100%;background:#fff;border:1px solid #afc8be;border-radius:10px;padding:10px;margin:7px 0;min-height:44px;color:#1d494a}.predict button[aria-pressed=true]{border:2px solid #176e72;background:#e7f5f2;font-weight:700}.predict .predict-note{color:#3d716c;font-size:.82rem;margin:10px 0 0}.complete{background:#e1f3df;border-radius:11px;padding:12px;margin-top:10px}.complete strong{color:#27603c}.complete .primary{width:100%}details{font-size:.84rem;line-height:1.5;color:#4a6661}summary{cursor:pointer;font-weight:700;color:#145d62}@keyframes water-move{to{background-position:140% 0}}@keyframes pulse{to{transform:scale(1.18)}}@media(max-width:980px){.game-layout{grid-template-columns:1fr}.lesson-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.companion,details{grid-column:span 2}.board{--tile-size:clamp(35px,6.5vw,60px)}}@media(max-width:600px){#app{padding:12px 8px 65px}.intro{grid-template-columns:1fr;padding:25px}.intro-art{height:130px}.game-layout{gap:12px}.play-panel{padding:13px}.lesson-panel{grid-template-columns:1fr}.companion,details{grid-column:auto}.board-wrap{padding:5px}.board{--tile-size:max(28px,7.4vw);border-width:3px}.tile{font-size:18px}.toolbar button{font-size:.8rem;padding:8px;min-height:44px}.done{font-size:.7rem}.mission-list li button{padding:12px 9px}}@media(max-width:385px){.board{--tile-size:27px}.toolbar{gap:4px}}@media(prefers-reduced-motion:reduce){.tile.flowing:before,.tile.powered span{animation:none}}

/* Creekside Basics uses the same illustrations as the campaign. */
.intro-art{position:relative;display:block;height:260px;overflow:hidden;background:#d5eee3}
.intro-art .sys-world-scene{width:100%;height:100%}
.intro-art figure{position:absolute;bottom:-4px;margin:0;width:27%;height:78%;filter:drop-shadow(0 5px 4px #24534455)}
.intro-art figure[data-intro-crew="kiki"]{left:8%}
.intro-art figure[data-intro-crew="finn"]{right:5%}
.intro-art figure img{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom}
.board-wrap{background:linear-gradient(145deg,#dcecd6,#cce7e0)}
.board{border-color:#78a994;box-shadow:0 5px 15px #25544929}
.tile{background-image:linear-gradient(135deg,#ffffff24 25%,transparent 25%,transparent 50%,#ffffff24 50%,#ffffff24 75%,transparent 75%);background-size:19px 19px}
.tile.channel,.tile.spring,.tile.meadow,.tile.generator{background-color:#75bdd0;background-image:repeating-linear-gradient(150deg,#ffffff21 0 4px,transparent 4px 19px)}
.tile.dam{background:#b99a74;color:#503d31}
.tile.dam:after{display:none}
.tile .tile-art{width:78%;height:78%;display:grid;place-items:center;color:#225f64}
.tile.dam .tile-art{color:#503d31}
.tile .tile-art .sys-icon{width:100%;height:100%;max-width:40px;max-height:40px;filter:drop-shadow(0 1px 1px #1b4b3440)}
.tile .tile-direction{position:absolute;right:1px;top:1px;width:15px;height:15px;display:grid;place-items:center;border-radius:50%;background:#ecfbffcc;color:#075881!important;font-size:.7rem;text-shadow:none!important}
.tile.powered .tile-art{animation:pulse .8s ease-in-out infinite alternate}
@media(max-width:600px){.intro-art{height:160px}.intro-art figure{height:90%}.tile .tile-art .sys-icon{max-width:28px;max-height:28px}}
@media(prefers-reduced-motion:reduce){.tile.powered .tile-art{animation:none}}
.game-layout,.play-panel,.lesson-panel{min-width:0}
@media(max-width:980px){.game-layout{grid-template-columns:minmax(0,1fr)}}
.game-loading{margin:24px auto;padding:18px;max-width:30rem;border:1px solid #b9d8cc;border-radius:14px;background:#edf8f3;color:#174f54;font-weight:700}
.game-loading button{display:inline-block;margin:8px 0 0;border:1px solid #77a99d;border-radius:8px;padding:7px 10px;background:white;color:#175b5e;font-weight:700}