:root{--field-rgb: 231 231 233;--field-color: rgb(var(--field-rgb));--tile-size: clamp(20px, 3.2dvh, 32px);--step-glide: 90ms;--shadow-rgb: 120 155 160;--shadow-alpha: .2;--shadow-spread: 1.12;--shadow-length: 1.35;--shadow-lean: -28deg;--fog-rgb: var(--field-rgb);--fog-fade-tiles: 10;--night-alpha: 0;color-scheme:light;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}html,body{height:100%}body{margin:0;background:var(--field-color)}#app{position:relative;height:100vh;height:100dvh;overflow:hidden;touch-action:none;background:var(--field-color);isolation:isolate}.board{position:absolute;top:50%;left:50%;display:grid;grid-template-columns:repeat(var(--grid-width),var(--tile-size));grid-template-rows:repeat(var(--grid-height),var(--tile-size));transform:translate(-50%,-50%) translate(calc(var(--camera-x, 0) * var(--tile-size)),calc(var(--camera-y, 0) * var(--tile-size)));transition:transform var(--step-glide) linear}.weather{position:absolute;inset:0;z-index:1;pointer-events:none}.whiteout{position:absolute;inset:0;z-index:2;pointer-events:none;background-color:#fff;opacity:0;transition-property:opacity;transition-duration:0ms;transition-timing-function:cubic-bezier(.45,0,.55,1);will-change:opacity}.night{position:absolute;inset:0;z-index:3;pointer-events:none;background-color:rgb(0 0 0 / var(--night-alpha));transition:background-color .26s linear}.fog{--fog-radius: calc(var(--sight-tiles, 15) * var(--tile-size));--fog-fade: calc(var(--fog-fade-tiles, 12) * var(--tile-size));--fog-from: calc(var(--fog-radius) - var(--fog-fade));position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle var(--fog-radius) at 50% 50%,rgb(var(--fog-rgb) / 0) var(--fog-from),rgb(var(--fog-rgb) / .001) calc(var(--fog-from) + var(--fog-fade) * .08),rgb(var(--fog-rgb) / .01) calc(var(--fog-from) + var(--fog-fade) * .16),rgb(var(--fog-rgb) / .034) calc(var(--fog-from) + var(--fog-fade) * .24),rgb(var(--fog-rgb) / .078) calc(var(--fog-from) + var(--fog-fade) * .32),rgb(var(--fog-rgb) / .148) calc(var(--fog-from) + var(--fog-fade) * .4),rgb(var(--fog-rgb) / .243) calc(var(--fog-from) + var(--fog-fade) * .48),rgb(var(--fog-rgb) / .36) calc(var(--fog-from) + var(--fog-fade) * .56),rgb(var(--fog-rgb) / .493) calc(var(--fog-from) + var(--fog-fade) * .64),rgb(var(--fog-rgb) / .63) calc(var(--fog-from) + var(--fog-fade) * .72),rgb(var(--fog-rgb) / .76) calc(var(--fog-from) + var(--fog-fade) * .8),rgb(var(--fog-rgb) / .873) calc(var(--fog-from) + var(--fog-fade) * .88),rgb(var(--fog-rgb) / .944) calc(var(--fog-from) + var(--fog-fade) * .94),rgb(var(--fog-rgb) / 1) var(--fog-radius))}.tilt{--sight: calc(var(--sight-tiles, 15) * var(--tile-size));position:absolute;--tilt-span: calc(var(--sight) * (var(--tilt-to) - var(--tilt-from)));left:calc(50% - var(--sight) * var(--tilt-half-width));width:calc(var(--sight) * 2 * var(--tilt-half-width));z-index:5;pointer-events:none;backdrop-filter:blur(var(--tilt-blur));-webkit-backdrop-filter:blur(var(--tilt-blur));--tilt-ramp-len: calc(var(--tilt-span) * var(--tilt-ramp));mask-image:linear-gradient(var(--tilt-dir),rgb(0 0 0 / 0) 0,rgb(0 0 0 / 1) var(--tilt-ramp-len));-webkit-mask-image:linear-gradient(var(--tilt-dir),rgb(0 0 0 / 0) 0,rgb(0 0 0 / 1) var(--tilt-ramp-len));background:transparent}.tilt--top{--tilt-dir: to top;top:max(0px,calc(50% - var(--sight) * var(--tilt-to)));bottom:calc(50% + var(--sight) * var(--tilt-from))}.tilt--bottom{--tilt-dir: to bottom;bottom:max(0px,calc(50% - var(--sight) * var(--tilt-to)));top:calc(50% + var(--sight) * var(--tilt-from))}.layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--grid-width),var(--tile-size));grid-template-rows:repeat(var(--grid-height),var(--tile-size))}.tile{position:relative;z-index:var(--row)}.sprite{position:absolute;bottom:0;left:50%;transform:translate(-50%);image-rendering:pixelated;user-select:none;-webkit-user-drag:none}.sprite--tree,.sprite--rock,.sprite--house,.sprite--bunny,.sprite--wolf,.sprite--bear{width:calc(var(--tile-size) * var(--sprite-width, 1));height:auto}.sprite--player{width:auto;height:var(--tile-size)}.tile[data-facing=east] .sprite--player{transform:translate(-50%) scaleX(-1)}.tile--bumped{--bump-distance: calc(var(--tile-size) * .18);animation:player-bump 195ms}@keyframes player-bump{0%{translate:0 0;animation-timing-function:cubic-bezier(.2,0,0,1)}35%{translate:calc(var(--bump-x, 0) * var(--bump-distance)) calc(var(--bump-y, 0) * var(--bump-distance));animation-timing-function:cubic-bezier(.4,0,.3,1)}to{translate:0 0}}.tile[data-facing=west] .sprite--bunny,.tile[data-facing=west] .sprite--wolf,.tile[data-facing=west] .sprite--bear{transform:translate(-50%) scaleX(-1)}.tile--animal{transform:translate(calc(var(--slide-x, 0) * var(--tile-size)),calc(var(--slide-y, 0) * var(--tile-size)));transition:transform var(--step-glide) linear}.tile--animal.tile--jumped{transition:none}.sprite--tree,.shadow--tree{transform-origin:50% 100%;animation-duration:3.4s;animation-delay:var(--sway-delay, 0s);animation-timing-function:ease-in-out;animation-iteration-count:infinite}.tile[data-sway="1"] .sprite--tree{animation-name:tree-sway-1}.tile[data-sway="2"] .sprite--tree{animation-name:tree-sway-2}.tile[data-sway="3"] .sprite--tree{animation-name:tree-sway-3}.tile[data-sway="4"] .sprite--tree{animation-name:tree-sway-4}@keyframes tree-sway-1{0%{transform:translate(-50%) rotate(-1.43deg)}18%{transform:translate(-50%) rotate(2.6deg)}32%{transform:translate(-50%) rotate(1.87deg)}50%{transform:translate(-50%) rotate(2.34deg)}72%{transform:translate(-50%) rotate(-.26deg)}88%{transform:translate(-50%) rotate(-1.61deg)}to{transform:translate(-50%) rotate(-1.43deg)}}@keyframes tree-sway-2{0%{transform:translate(-50%) rotate(-1.76deg)}18%{transform:translate(-50%) rotate(3.2deg)}32%{transform:translate(-50%) rotate(2.3deg)}50%{transform:translate(-50%) rotate(2.88deg)}72%{transform:translate(-50%) rotate(-.32deg)}88%{transform:translate(-50%) rotate(-1.98deg)}to{transform:translate(-50%) rotate(-1.76deg)}}@keyframes tree-sway-3{0%{transform:translate(-50%) rotate(-2.15deg)}18%{transform:translate(-50%) rotate(3.9deg)}32%{transform:translate(-50%) rotate(2.81deg)}50%{transform:translate(-50%) rotate(3.51deg)}72%{transform:translate(-50%) rotate(-.39deg)}88%{transform:translate(-50%) rotate(-2.42deg)}to{transform:translate(-50%) rotate(-2.15deg)}}@keyframes tree-sway-4{0%{transform:translate(-50%) rotate(-2.53deg)}18%{transform:translate(-50%) rotate(4.6deg)}32%{transform:translate(-50%) rotate(3.31deg)}50%{transform:translate(-50%) rotate(4.14deg)}72%{transform:translate(-50%) rotate(-.46deg)}88%{transform:translate(-50%) rotate(-2.85deg)}to{transform:translate(-50%) rotate(-2.53deg)}}.shadow{--shadow-width: calc(var(--tile-size) * var(--sprite-width, 1.15) * var(--shadow-spread));--shadow-run: calc( var(--tile-size) * var(--sprite-width, 1.15) * var(--aspect, 1.8) * var(--shadow-length) * var(--shadow-jitter, 1) );--shadow-bury: calc(var(--tile-size) * .18);position:absolute;top:calc(100% - var(--shadow-bury));left:calc(50% - var(--shadow-width) / 2);width:var(--shadow-width);height:calc(var(--shadow-run) + var(--shadow-bury));transform-origin:50% var(--shadow-bury);rotate:var(--shadow-lean);background-color:rgb(var(--shadow-rgb) / var(--shadow-alpha));mask-image:var(--sprite);mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:var(--sprite);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;pointer-events:none}.tile[data-sway="1"] .shadow--tree{animation-name:tree-shadow-sway-1}.tile[data-sway="2"] .shadow--tree{animation-name:tree-shadow-sway-2}.tile[data-sway="3"] .shadow--tree{animation-name:tree-shadow-sway-3}.tile[data-sway="4"] .shadow--tree{animation-name:tree-shadow-sway-4}@keyframes tree-shadow-sway-1{0%{transform:rotate(1.07deg)}18%{transform:rotate(-1.95deg)}32%{transform:rotate(-1.4deg)}50%{transform:rotate(-1.76deg)}72%{transform:rotate(.2deg)}88%{transform:rotate(1.21deg)}to{transform:rotate(1.07deg)}}@keyframes tree-shadow-sway-2{0%{transform:rotate(1.32deg)}18%{transform:rotate(-2.4deg)}32%{transform:rotate(-1.73deg)}50%{transform:rotate(-2.16deg)}72%{transform:rotate(.24deg)}88%{transform:rotate(1.49deg)}to{transform:rotate(1.32deg)}}@keyframes tree-shadow-sway-3{0%{transform:rotate(1.61deg)}18%{transform:rotate(-2.93deg)}32%{transform:rotate(-2.11deg)}50%{transform:rotate(-2.63deg)}72%{transform:rotate(.29deg)}88%{transform:rotate(1.82deg)}to{transform:rotate(1.61deg)}}@keyframes tree-shadow-sway-4{0%{transform:rotate(1.9deg)}18%{transform:rotate(-3.45deg)}32%{transform:rotate(-2.48deg)}50%{transform:rotate(-3.11deg)}72%{transform:rotate(.35deg)}88%{transform:rotate(2.14deg)}to{transform:rotate(1.9deg)}}.footprint{--print-size: var(--tile-size);--print-rgb: 96 108 116;--print-alpha: .5;place-self:center;position:relative;width:calc(var(--print-size) * var(--print-aspect, 1));height:var(--print-size);opacity:var(--print-fade, 1);transition:opacity .26s linear;pointer-events:none}.footprint__leg{position:absolute;inset:0;transform:rotate(var(--print-turn, 0deg));background-color:rgb(var(--print-rgb) / var(--print-alpha));mask-image:var(--print-sprite);mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:var(--print-sprite);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}.footprint__leg--in{clip-path:inset(50% 0 0 0)}.footprint__leg--out{clip-path:inset(0 0 50% 0)}@media(prefers-reduced-motion:reduce){.footprint{transition:none}}.tile.tile--becalmed .sprite--tree,.tile.tile--becalmed .shadow--tree{animation-name:none;animation-duration:0s}.tile.tile--becalmed .sprite--tree{transform:translate(-50%)}.tile.tile--becalmed .shadow--tree{transform:none}@media(prefers-reduced-motion:reduce){.tile .sprite--tree,.tile .shadow--tree{animation-name:none;animation-duration:0s}.night{transition:none}.tile .sprite--tree{transform:translate(-50%)}.tile .shadow--tree{transform:none}}