@font-face{font-family:Gochi Hand;src:url(/games/chalkline/play/fonts/gochi-hand-400.woff2)format("woff2");font-display:swap}@font-face{font-family:Sora;src:url(/games/chalkline/play/fonts/sora-var.woff2)format("woff2");font-weight:100 800;font-display:swap}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);background-image:var(--surface);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;font-family:Sora,system-ui,sans-serif;font-size:15px;line-height:1.4;overflow:hidden}#app{max-width:520px;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);margin:0 auto;position:relative}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px dashed var(--accent);outline-offset:4px}h1,h2,h3{margin:0;font-family:Gochi Hand,cursive;font-weight:400}.btn,.sheet__card,.lvl,.look,.tool{border-radius:16px 22px 14px 24px/22px 14px 24px 16px}.btn{border:2.5px solid var(--line);width:100%;box-shadow:2px 3px 0 -1px var(--line-soft);text-align:center;background:0 0;gap:1px;padding:12px 20px;transition:transform 80ms;display:grid}.btn:active{transform:rotate(-.6deg)scale(.98)}.btn__title{font-family:Gochi Hand,cursive;font-size:27px;line-height:1.1}.btn__sub{color:var(--muted);font-size:13px}.btn--primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);box-shadow:2px 3px 0 -1px var(--line-soft), inset 0 0 0 999px var(--accent-grain)}.btn--primary .btn__sub{color:inherit;opacity:.75}.btn--quiet{box-shadow:none;color:var(--muted);-webkit-text-decoration:underline wavy var(--line-soft) 1px;text-decoration:underline wavy var(--line-soft) 1px;text-underline-offset:5px;border-color:#0000;padding:8px}.icon-btn{width:44px;height:44px;color:var(--ink);background:0 0;border:0;border-radius:50%;place-items:center;display:grid}.icon-btn:active{background:var(--press)}.bar{text-align:center;grid-template-columns:44px 1fr 44px;align-items:center;padding:8px 10px 0;display:grid}.bar h2{font-size:26px;line-height:1.1}.bar h2 span{color:var(--muted);vertical-align:middle;font-family:Sora,sans-serif;font-size:13px}.bar__aside{color:var(--c2);font-family:Gochi Hand,cursive;font-size:20px}.stars{gap:2px;display:inline-flex}.star{fill:none;width:17px;height:17px;stroke:var(--star-off);stroke-width:1.6px;stroke-linejoin:round}.star--on{fill:var(--star);stroke:var(--star)}.home{flex-direction:column;justify-content:space-between;height:100%;padding:24px 30px 30px;display:flex;position:relative}.home__settings{position:absolute;top:12px;right:12px}.home__brand{text-align:center;margin-top:5vh}.home__art{width:150px;height:128px;overflow:visible}.home__art path{fill:none;stroke:var(--c1);stroke-width:6px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:5s ease-in-out infinite home-trace}.home__art circle{fill:var(--ink)}@keyframes home-trace{0%{stroke-dashoffset:1px}60%,85%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:0;opacity:0}}.logo{color:var(--ink);text-shadow:0 0 1px var(--ink), 1px 1px 0 var(--line-soft);font-size:clamp(60px,19vw,86px);line-height:1;transform:rotate(-3deg)}.home__tag{color:var(--muted);margin:10px 0 0;font-size:16px}.home__menu{gap:14px;display:grid}.sheet{z-index:20;background:var(--scrim);place-items:center;padding:22px;animation:.2s ease-out fade;display:grid;position:fixed;inset:0}.sheet__card{border:3px solid var(--card-edge);background:var(--card);background-image:var(--surface);width:min(100%,370px);color:var(--card-ink);text-align:center;padding:24px 22px 16px;animation:.28s cubic-bezier(.2,.8,.3,1.2) rise;box-shadow:0 14px 40px #00000059}.sheet__card h2{margin-bottom:10px;font-size:34px;line-height:1.05}.sheet__card p{margin:0 0 11px}.sheet__card .btn{margin-top:8px}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(26px)rotate(-2deg)}}.howto__demo{width:220px;height:120px;margin:0 auto 10px;display:block;overflow:visible}.howto__ghost{fill:none;stroke:var(--ghost);stroke-width:4px;stroke-dasharray:2 9;stroke-linecap:round}.howto__chalk{fill:none;stroke:var(--c2);stroke-width:6px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:4s ease-in-out infinite home-trace}.howto__demo circle{fill:var(--card-ink)}.howto__small{color:var(--card-muted);font-size:13px}.win .stars{gap:8px;margin:2px 0 10px}.win .star{stroke-width:1.3px;width:46px;height:46px;animation:.4s cubic-bezier(.2,.8,.3,1.6) both pop}.win .star:nth-child(2){animation-delay:.12s}.win .star:nth-child(3){animation-delay:.24s}@keyframes pop{0%{opacity:0;transform:scale(.2)rotate(-30deg)}}.win__kicker{letter-spacing:.1em;text-transform:uppercase;color:var(--card-muted);font-size:12px}.win__score{font-family:Gochi Hand,cursive;font-size:22px}.win__sub{min-height:1.4em;color:var(--card-muted)}.win__menu{gap:4px;display:grid}.select{flex-direction:column;height:100%;display:flex}.select__list{flex:1;padding:6px 18px 30px;overflow-y:auto}.board-set h3{align-items:baseline;gap:8px;margin:16px 2px 8px;font-size:24px;display:flex}.board-set h3 span{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:Sora,sans-serif;font-size:11px}.board-set h3 small{color:var(--c2);margin-left:auto;font-size:18px}.select__grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.lvl{border:2px solid var(--line-soft);background:0 0;justify-items:center;gap:3px;padding:9px 2px 8px;display:grid}.lvl b{font-family:Gochi Hand,cursive;font-size:24px;font-weight:400;line-height:1}.lvl .star{width:12px;height:12px}.lvl--next{border-color:var(--accent);border-width:3px}.lvl--locked{opacity:.4;cursor:default;border-style:dashed}.lvl--locked svg{width:18px;height:18px}.play{flex-direction:column;height:100%;display:flex}.score{text-align:center;grid-template-columns:repeat(3,1fr);margin:6px 18px 0;display:grid}.score__cell{gap:1px;display:grid}.score__cell small{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-size:11px}.score__cell b{font-family:Gochi Hand,cursive;font-size:26px;font-weight:400;line-height:1.1}.stage{border:7px solid var(--frame);background:var(--board);background-image:var(--surface);min-height:0;box-shadow:inset 0 0 40px #00000040, 0 3px 0 var(--frame-edge);border-radius:6px;flex:1;margin:8px 14px 0;position:relative;overflow:hidden}.board{touch-action:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.note{text-align:center;min-height:2.8em;color:var(--muted);margin:8px 22px 0;font-size:14px}.note--warn{color:var(--c3)}.tools{grid-template-columns:1fr 1.6fr;gap:12px;padding:4px 18px 18px;display:grid}.tool{border:2px solid var(--line-soft);background:0 0;justify-content:center;align-items:center;gap:8px;padding:10px;font-size:14px;display:flex}.tool:active{background:var(--press)}.settings{height:100%;padding-bottom:24px;overflow-y:auto}.settings h3{margin:18px 22px 8px;font-size:24px}.looks{gap:10px;padding:0 18px;display:grid}.look{border:2px solid var(--line-soft);text-align:left;background:0 0;grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;padding:10px 14px;display:grid}.look--on{border-color:var(--accent);border-width:3px}.look__sw{grid-row:span 2;display:flex}.look__sw i{border:2px solid var(--line-soft);border-radius:50%;width:22px;height:22px;margin-right:-6px}.look__name{font-family:Gochi Hand,cursive;font-size:21px;line-height:1.1}.look__blurb{color:var(--muted);font-size:12px}.toggle{border-bottom:1.5px dashed var(--line-soft);justify-content:space-between;align-items:center;margin:0 22px;padding:12px 0;display:flex}.toggle input{opacity:0;position:absolute}.toggle i{border:2px solid var(--line);border-radius:14px 16px 13px 15px;width:46px;height:26px;position:relative}.toggle i:after{content:"";background:var(--muted);border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:3px;left:3px}.toggle input:checked+i{border-color:var(--accent)}.toggle input:checked+i:after{background:var(--accent);transform:translate(20px)}.toggle input:focus-visible+i{outline:2px dashed var(--accent);outline-offset:3px}.settings>.btn--quiet{width:auto;margin:10px auto 0;display:block}.credits{text-align:center;color:var(--muted);margin:22px;font-size:12px}.credits a{color:inherit}:root,[data-theme=slate]{--bg:#1f2b27;--board:#24332e;--surface:radial-gradient(ellipse 60% 18% at 30% 22%, #ffffff0d, transparent 70%), radial-gradient(ellipse 50% 14% at 70% 70%, #ffffff0a, transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");--ink:#f1efe4;--muted:#a9b8ae;--line:#f1efe4d9;--line-soft:#f1efe447;--press:#f1efe41a;--ghost:#f1efe461;--dot:#f1efe4;--c1:#f1efe4;--c2:#f4e27c;--c3:#f5a8bd;--hint:#9fd3f0;--accent:#f4e27c;--accent-ink:#1f2b27;--accent-grain:#ffffff0f;--frame:#8a5b36;--frame-edge:#5e3b21;--card:#26352f;--card-edge:#8a5b36;--card-ink:#f1efe4;--card-muted:#a9b8ae;--scrim:#0a100e99;--star:#f4e27c;--star-off:#f1efe459;--chalk-width:13;--chalk-opacity:.94}[data-theme=pavement]{--bg:#55575c;--board:#5b5d62;--surface:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.12 0 0 0 1.6 -0.75'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.9' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -0.85'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23m)'/%3E%3C/svg%3E");--ink:#fff;--muted:#d3d4d8;--line:#ffffffe6;--line-soft:#ffffff52;--press:#ffffff1f;--ghost:#ffffff6b;--dot:#fff;--c1:#ff7ab8;--c2:#ffe066;--c3:#7fe6c6;--hint:#8fc8ff;--accent:#ff7ab8;--accent-ink:#2b2c30;--accent-grain:#ffffff14;--frame:#8d8f94;--frame-edge:#3f4145;--card:#4b4d52;--card-edge:#ffe066;--card-ink:#fff;--card-muted:#d3d4d8;--scrim:#1414188c;--star:#ffe066;--star-off:#fff6;--chalk-width:17;--chalk-opacity:.9}[data-theme=kraft]{--bg:#c39a6b;--board:#c8a072;--surface:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.22 0 0 0 0 0.1 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");--ink:#2d2520;--muted:#5f4a37;--line:#2d2520d9;--line-soft:#2d25204d;--press:#2d25201a;--ghost:#2d252066;--dot:#2d2520;--c1:#fffaf0;--c2:#fffaf0;--c3:#c8402e;--hint:#1f4e8c;--accent:#2d2520;--accent-ink:#fffaf0;--accent-grain:#ffffff0a;--frame:#a77e52;--frame-edge:#7b5a37;--card:#d2ab7d;--card-edge:#2d2520;--card-ink:#2d2520;--card-muted:#5f4a37;--scrim:#2d1e1273;--star:#c8402e;--star-off:#2d252059;--chalk-width:14;--chalk-opacity:.97}.ghost{stroke:var(--ghost);stroke-width:7px;stroke-linecap:round;stroke-dasharray:.1 15;transition:opacity .2s}.ghost--done{opacity:0}.arrow{fill:none;stroke:var(--ink);stroke-width:6px;stroke-linecap:round;stroke-linejoin:round;opacity:.8}.chalk{stroke-width:var(--chalk-width);stroke-linecap:round;opacity:var(--chalk-opacity);transition:stroke-dashoffset .12s linear}.drawn.wiping{opacity:0;transition:opacity .4s,transform .4s;transform:translate(14px)}.live{stroke-width:calc(var(--chalk-width) * .55);stroke-linecap:round;stroke-dasharray:1 12;opacity:0}.live.on{opacity:.8}.dot{fill:var(--dot);stroke:var(--board);stroke-width:4px;transition:r .12s}.dot--at{r:19;fill:var(--c2)}.dot--next{r:16}.stuck .dot--at{fill:var(--c3)}.hint-start{fill:none;stroke:var(--hint);stroke-width:5px;stroke-dasharray:8 7;transform-box:fill-box;transform-origin:50%;animation:6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hint-line{stroke:var(--hint);stroke-width:26px;stroke-linecap:round;opacity:.32}.hint-num{fill:var(--hint);text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:var(--board);stroke-width:6px;font-family:Gochi Hand,cursive;font-size:30px}.won .chalk{animation:.7s ease-out 2 alternate glow}@keyframes glow{to{stroke-width:calc(var(--chalk-width) * 1.5)}}.won .ghosts,.won .hints{opacity:0;transition:opacity .3s}