:root{--paper:#efe0bd;--ink:#553d2e;--rust:#ad5b3f;--cell:44px}body{background:radial-gradient(circle at 50% 22%,#fff5d8 0,#efe0bd 54%,#ddbf86 100%);color:var(--ink);overflow:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}header{height:calc(75px + var(--safe-top));padding-top:var(--safe-top);display:flex;align-items:center;justify-content:center;position:relative;z-index:4}.back{position:absolute;left:15px;top:calc(13px + var(--safe-top));width:46px;height:46px;display:grid;place-items:center;font-size:42px;line-height:1;color:#624536}.level{text-align:center}.level small{display:block;font-size:10px;letter-spacing:.22em;font-weight:900;opacity:.65}.level b{display:block;font-size:27px;line-height:1.1}.game-menu-button{background:#78513e;border-color:#ffffff55;box-shadow:0 6px 15px #68452f3d}main{height:calc(100% - 75px - var(--safe-top));display:flex;flex-direction:column;align-items:center;padding:4px 10px calc(16px + var(--safe-bottom))}#hearts{height:24px;display:flex;gap:6px}.heart{font-size:18px;color:var(--rust);transition:.25s}.heart.lost{opacity:.2;transform:scale(.7)}#instruction{font-size:12px;font-weight:750;margin:3px 0 11px;opacity:.72}#board{position:relative;width:calc(var(--cols)*var(--cell));height:calc(var(--rows)*var(--cell));max-width:calc(100vw - 24px);max-height:calc(100vh - 190px - var(--safe-top) - var(--safe-bottom));filter:drop-shadow(0 9px 15px #76552c22)}.arrow{position:absolute;width:var(--cell);height:var(--cell);left:calc(var(--x)*var(--cell));top:calc(var(--y)*var(--cell));display:grid;place-items:center;border:0;background:transparent;color:var(--ink);padding:0;transition:transform .12s}.arrow svg{width:88%;height:88%;overflow:visible}.arrow path{fill:none;stroke:currentColor;stroke-width:5.2;stroke-linecap:round;stroke-linejoin:round}.arrow.blocked{animation:bump .35s ease}.arrow.hinted{color:#d24f32;animation:pulse .75s ease-in-out infinite}.arrow.leaving{pointer-events:none;z-index:8;transition:transform .38s cubic-bezier(.4,0,.7,1),opacity .22s .15s;transform:translate(calc(var(--dx)*120vmax),calc(var(--dy)*120vmax));opacity:0}@keyframes bump{25%{transform:translate(calc(var(--dx)*-5px),calc(var(--dy)*-5px))}65%{transform:translate(calc(var(--dx)*3px),calc(var(--dy)*3px))}}@keyframes pulse{50%{transform:scale(1.18);filter:drop-shadow(0 0 6px #fff)}}.hint{margin-top:auto;min-width:112px;height:46px;border:1px solid #71473533;border-radius:23px;background:#f8ead0;color:#7b4937;font-size:12px;font-weight:900;letter-spacing:.12em;box-shadow:0 5px 14px #845c3628}.hint span{font-size:18px;vertical-align:-1px}#toast{position:fixed;left:50%;bottom:calc(78px + var(--safe-bottom));transform:translate(-50%,15px);background:#634333;color:#fff5df;border-radius:20px;padding:9px 15px;font-size:12px;font-weight:750;opacity:0;pointer-events:none;transition:.25s;z-index:20;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}.result{position:fixed;inset:0;z-index:30;display:grid;place-items:center;text-align:center;background:#efe0bde8;backdrop-filter:blur(4px)}.result[hidden]{display:none}.result section{position:relative;z-index:2}.result span{display:grid;place-items:center;margin:auto;width:78px;height:78px;border-radius:50%;background:#a95e40;color:#fff6df;font-size:44px;animation:pop .55s cubic-bezier(.2,1.6,.4,1)}.result h1{font-size:43px;margin:13px 0 3px}.result p{margin:0 0 24px;font-weight:700;opacity:.7}.result button{border:0;border-radius:17px;background:#604334;color:#fff5df;min-width:190px;height:52px;font-weight:900;font-size:16px;box-shadow:0 8px 20px #5b3c2930}.burst{position:absolute;width:10px;height:10px;border-radius:50%;box-shadow:0 -150px #ad5b3f,106px -106px #e9a74a,150px 0 #ad5b3f,106px 106px #e9a74a,0 150px #ad5b3f,-106px 106px #e9a74a,-150px 0 #ad5b3f,-106px -106px #e9a74a;animation:burst 1s ease-out both}@keyframes pop{from{transform:scale(.1) rotate(-25deg)}}@keyframes burst{from{transform:scale(.2);opacity:1}to{transform:scale(1.5) rotate(35deg);opacity:0}}@media(max-height:620px){#instruction{display:none}.hint{height:40px}header{height:65px}main{height:calc(100% - 65px - var(--safe-top))}#board{max-height:calc(100vh - 135px)}}
.arrow.error{color:#e33f3f!important;filter:drop-shadow(0 0 3px #e33f3f55)}
.arrow.snaking{pointer-events:none;z-index:8;transform:none!important;opacity:1!important}
.arrow-map .arrow .shaft,.arrow-map .arrow .head{stroke-width:5.6}
.arrow{pointer-events:none}.arrow .hit,.arrow .head-hit{pointer-events:stroke;touch-action:none}
#board{width:auto;height:auto;max-width:none;max-height:none;flex:0 0 auto}.arrow-map{display:block;width:100%;height:100%;overflow:visible}.arrow{position:static;width:auto;height:auto;display:initial;color:var(--ink);cursor:pointer;transition:transform .12s,opacity .2s}.arrow path{fill:none;stroke:currentColor;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}.arrow .hit,.arrow .head-hit{stroke:transparent;stroke-width:24;fill:none;pointer-events:stroke}.arrow .shaft,.arrow .head{pointer-events:none}.arrow.hinted{transform-box:fill-box;transform-origin:center}.arrow.leaving{transition:transform .38s cubic-bezier(.4,0,.7,1),opacity .22s .15s;transform:translate(calc(var(--dx)*120vmax),calc(var(--dy)*120vmax));opacity:0}
:root{--pad:22px}
html,body{touch-action:pan-x pan-y;overscroll-behavior:none}#board,.arrow-map{touch-action:none}
.arrow-map .arrow .shaft,.arrow-map .arrow .head{stroke-width:6.2}

/* Fine, evenly spaced paths keep the silhouette legible at every board size. */
.arrow-map .arrow .shaft,.arrow-map .arrow .head{stroke-width:var(--stroke)}
.arrow-map .arrow .hit,.arrow-map .arrow .head-hit{stroke-width:var(--hit)}

.mechanic{pointer-events:none;font-family:system-ui,sans-serif;font-weight:800}.arrow.sealed .shaft{stroke-dasharray:3 2}.arrow.error .shaft{stroke:currentColor}

.mechanic-help{font-size:13px;line-height:1.65;color:#536079;margin:0 0 18px;text-align:left}

.arrow.hinted{filter:drop-shadow(0 0 5px #fff);color:var(--ink)}

header{gap:14px}#collectedKeys{display:flex;gap:7px}#collectedKeys:empty{display:none}.key-status{display:grid;place-items:center;width:29px;height:34px;color:var(--key-color);filter:grayscale(.8);opacity:.35;transition:filter .2s,opacity .2s,background .2s;border-radius:8px}.key-status.collected{filter:none;opacity:1;background:#fff6dc}.key-status svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.exit-key{pointer-events:none} .arrow-map{overflow:hidden}