:root{--px: 4px;--tile: calc(18 * var(--px));--tiles: 6;--ink: #f4ecff;--ink-dim: #b7a6d3;--bg: #1d1330;--panel: #2c1f47;--edge: #0f0a1a;--accent: #ffd23f;--danger: #ff5a6e;color-scheme:dark;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center}kbd{font:inherit;font-size:.8em;padding:0 .3em;border:2px solid var(--ink-dim);border-radius:3px}.game{width:calc(var(--tiles) * var(--tile) + 2 * var(--px));display:grid;gap:1rem;padding:1.5rem 0}.game-header{display:flex;align-items:baseline;gap:.75rem}.game-header h1{margin:0;font-size:1.75rem;letter-spacing:.1em}.env-badge{font-size:.75rem;padding:.1rem .4rem;border:2px solid currentColor;color:var(--ink-dim)}.env-production{color:var(--danger)}.user{margin-left:auto;font-size:.8rem;color:var(--ink-dim)}.user a{color:inherit}.playfield{position:relative;height:calc(2.5 * var(--tile));background:linear-gradient(#7ec8f0,#c4ecff 70%);border:var(--px) solid var(--edge);image-rendering:pixelated;overflow:hidden}.tiles{position:absolute;inset:auto 0 0 0;display:flex}.tile{all:unset;position:relative;width:var(--tile);display:grid;grid-template-rows:var(--tile) var(--tile);cursor:pointer}.tile-stone{cursor:default}.tile-block{background-size:100% 100%;image-rendering:pixelated}.tile-stone .tile-block{background-image:url(/static/kenney/tile_0000.png)}.tile-dry_soil .tile-block{background-image:url(/static/kenney/tile_0041.png)}.tile-wet_soil .tile-block{background-image:url(/static/kenney/tile_0004.png);filter:brightness(.62) saturate(1.4) hue-rotate(-12deg)}.tile-dry_grass .tile-block{background-image:url(/static/kenney/tile_0001.png);filter:sepia(.9) saturate(1.8) hue-rotate(-18deg) brightness(1.05)}.tile-tall_grass .tile-block{background-image:url(/static/kenney/tile_0001.png)}.tile-dry_soil .tile-block,.tile-dry_grass .tile-block,.tile-tall_grass .tile-block{box-shadow:inset calc(-2 * var(--px)) 0 0 #434a5f}.tile-above{position:relative}.tufts{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url(/static/kenney/tile_0125.png),url(/static/kenney/tile_0124.png),url(/static/kenney/tile_0125.png);background-size:var(--tile) var(--tile);background-position:calc(-6 * var(--px)) 100%,50% 100%,calc(6 * var(--px)) 100%;background-repeat:no-repeat;transform-origin:50% 100%}.tufts-dry{background-image:url(/static/kenney/tile_0105.png),url(/static/kenney/tile_0105.png),url(/static/kenney/tile_0105.png)}.tile.is-target:after,.tile.is-blocked:after{content:"";position:absolute;inset:auto 0 0 0;height:var(--tile);pointer-events:none}.tile.is-target:after{outline:var(--px) dashed var(--accent);outline-offset:calc(-1 * var(--px));height:calc(var(--tile));animation:pulse .9s ease-in-out infinite}.tile.is-blocked:after{box-shadow:inset 0 0 0 var(--px) var(--danger)}.tile.is-rustling .tufts{animation:rustle .26s ease-in-out infinite alternate}.rustle-mark{position:absolute;left:50%;top:calc(-2 * var(--px));transform:translate(-50%);font-weight:900;font-size:calc(14 * var(--px));line-height:1;color:var(--accent);text-shadow:0 var(--px) 0 var(--edge);animation:bob .5s ease-in-out infinite alternate}.sparkles{position:absolute;left:var(--tile);width:calc(4 * var(--tile));bottom:var(--tile);height:calc(1.2 * var(--tile));pointer-events:none;background-image:radial-gradient(circle,#fff 0 var(--px),transparent calc(var(--px) + 1px)),radial-gradient(circle,var(--accent) 0 var(--px),transparent calc(var(--px) + 1px));background-size:calc(.9 * var(--tile)) calc(.6 * var(--tile)),calc(1.3 * var(--tile)) calc(.8 * var(--tile));animation:twinkle .7s steps(2) infinite}.actor{position:absolute;left:calc(var(--pos) * var(--tile));bottom:var(--tile);width:var(--tile);height:var(--tile);display:grid;place-items:end center;pointer-events:none;z-index:2}.actor svg{width:calc(16 * var(--px));height:calc(16 * var(--px));display:block}.player{transition:left .12s steps(3)}.player.facing-left svg{transform:scaleX(-1)}.creature{z-index:3}.hopping{animation:hop 375ms ease-out infinite}.creature.hopping{animation-delay:.18s}.to-roster{animation:to-roster .8s ease-in forwards}.move-bar{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.pixel-button{all:unset;display:flex;justify-content:center;align-items:center;gap:.5rem;padding:.6rem .8rem;cursor:pointer;font-weight:700;color:var(--ink);background:var(--panel);border:var(--px) solid var(--edge);box-shadow:inset 0 calc(-1 * var(--px)) 0 #0006}.pixel-button:active{box-shadow:inset 0 var(--px) 0 #0006}.pixel-button:focus-visible{outline:var(--px) dashed var(--accent)}.move-water_blast{background:#2f6fb8}.move-leaflet{background:#3a8f3a}.roster{min-height:calc(20 * var(--px));display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--panel);border:var(--px) solid var(--edge)}.roster-empty,.roster-more{margin:0 auto;color:var(--ink-dim)}.roster-more{margin:0 0 0 auto}.roster-slot{position:relative;animation:pop-in .3s ease-out}.roster-slot svg{width:calc(14 * var(--px));height:calc(14 * var(--px));display:block}.roster-count{position:absolute;right:-.25rem;bottom:-.25rem;font-size:.75rem;font-weight:700;padding:0 .25rem;background:var(--edge)}.hints{display:grid;gap:.35rem;font-size:.8rem;color:var(--ink-dim);text-align:center}.signed-out,.welcome{display:grid;gap:1rem;justify-items:start;max-width:28rem;padding:2rem}.welcome{max-width:34rem}.welcome h1{margin:0;letter-spacing:.1em}.welcome-tagline{margin:0;color:var(--accent);font-weight:700}.exercise-ribbon{margin:0;padding:.35rem .6rem;font-size:.75rem;text-align:center;color:var(--edge);background:var(--accent);border:2px solid var(--edge)}.exercise-notice{display:grid;gap:.6rem;font-size:.85rem;line-height:1.5;color:var(--ink-dim)}.exercise-notice p,.exercise-notice ul{margin:0}.exercise-notice ul{padding-left:1.2rem}.exercise-notice a{color:var(--accent)}.exercise-links{font-size:.75rem}.exercise-details{padding:.6rem .8rem;background:var(--panel);border:2px solid var(--edge)}.exercise-details summary{cursor:pointer;font-size:.8rem;color:var(--ink-dim)}.exercise-details[open] summary{margin-bottom:.6rem}.shake-a{animation:shake-a .28s linear}.shake-b{animation:shake-b .28s linear}@keyframes shake-a{0%,to{translate:0}20%,60%{translate:calc(-1 * var(--px))}40%,80%{translate:var(--px)}}@keyframes shake-b{0%,to{translate:0}20%,60%{translate:calc(-1 * var(--px))}40%,80%{translate:var(--px)}}@keyframes pulse{50%{opacity:.45}}@keyframes rustle{0%{transform:rotate(-6deg)}to{transform:rotate(6deg)}}@keyframes bob{to{top:calc(-4 * var(--px))}}@keyframes twinkle{50%{background-position:calc(.4 * var(--tile)) calc(.3 * var(--tile)),0 calc(.2 * var(--tile));opacity:.7}}@keyframes hop{0%,to{translate:0 0}40%{translate:0 calc(-5 * var(--px))}}@keyframes to-roster{0%{translate:0 0;scale:1;opacity:1}30%{translate:0 calc(-4 * var(--px))}to{translate:0 calc(2.5 * var(--tile));scale:.6;opacity:0}}@keyframes pop-in{0%{scale:.4}70%{scale:1.15}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition:none!important}}