@font-face{font-family:Atkinson Hyperlegible Next;src:url(/games/sunroom-jigsaw/play/fonts/atkinson-hyperlegible-next.woff2)format("woff2");font-weight:200 800;font-display:swap}html{font-size:20px}html[data-size=xl]{font-size:24px}:root{--font:"Atkinson Hyperlegible Next", system-ui, sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--tool-h:clamp(58px, 8vh, 68px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(120% 90% at 50% 0%, var(--bg) 40%, var(--bg-2));background-color:var(--bg);color:var(--ink);font:1rem/1.4 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}#app{max-width:640px;height:100%;margin:0 auto}@media (width>=860px) and (aspect-ratio>=1){#app{max-width:1400px}.home,.page{max-width:640px;margin:0 auto}}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:4px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px var(--focus-2)}h1,h2,h3{margin:0;font-weight:800}.btn{border:2px solid var(--btn-edge);background:var(--btn);width:100%;min-height:64px;color:var(--btn-ink);text-align:center;border-radius:16px;gap:2px;padding:10px 18px;font-size:1.05rem;font-weight:700;display:grid}.btn__title{font-size:1.1rem;font-weight:800}.btn__sub{font-size:.9rem;font-weight:500}.btn--primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.btn--quiet{min-height:56px;color:inherit;text-underline-offset:4px;background:0 0;border-color:#0000;text-decoration:underline}.btn--back{justify-content:center;align-items:center;gap:4px;width:auto;min-width:56px;min-height:56px;padding:6px 14px 6px 8px;font-size:1rem;display:flex}.btn--back svg{width:26px;height:26px}.btn:active,.tool:active,.chip:active,.piece:active{transform:scale(.97)}.home{height:100%;padding:calc(var(--safe-top) + 16px) 20px calc(var(--safe-bottom) + 16px);flex-direction:column;justify-content:space-between;gap:16px;display:flex;position:relative;overflow-y:auto}.home__settings{border:2px solid var(--btn-edge);align-self:flex-end;align-items:center;gap:6px;width:auto;padding:6px 12px;text-decoration:none;display:flex}.home__settings svg{width:26px;height:26px}.home__brand{text-align:center;justify-items:center;gap:4px;display:grid}.home__sun{width:120px;height:120px;animation:1s cubic-bezier(.2,.7,.3,1) both sunrise}.home__sun svg,.won__sun svg{width:100%;height:100%}.logo{letter-spacing:-.01em;font-size:clamp(2.4rem,15vw,3.6rem);font-weight:800;line-height:1}.logo span{letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:8px;font-size:1.05rem;display:block}.home__tag{color:var(--muted);margin:10px 0 0;font-size:1rem}.home__menu{gap:12px;width:100%;max-width:460px;margin:0 auto;display:grid}.home__row{grid-template-columns:1fr 1fr;gap:8px;display:grid}@media (height<=700px){.home__sun{width:76px;height:76px}.home__menu{gap:8px}}@keyframes sunrise{0%{opacity:0;transform:translateY(20px)scale(.9)}}.play{height:100%;padding:var(--safe-top) 8px calc(var(--safe-bottom) + 8px);flex-direction:column;gap:8px;display:flex;position:relative}.bar{grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 0 0;display:grid}.bar h2{text-align:center;font-size:1.25rem}.bar--play{grid-template-columns:auto 1fr}.bar__title{min-width:0;line-height:1.2;display:grid}.bar__name{white-space:nowrap;text-overflow:ellipsis;font-size:1rem;font-weight:800;overflow:hidden}.bar__sub{color:var(--muted);font-size:.9rem}.status{background:var(--table);min-height:calc(2.6em + 12px);color:var(--table-ink);border-radius:12px;align-items:center;margin:0;padding:6px 12px;font-size:1rem;font-weight:700;line-height:1.3;display:flex}html[data-size=xl] .status{font-size:.875rem}.stage{background:var(--table);border-radius:14px;flex:none;place-items:center;min-height:0;display:grid;position:relative}.loading{color:var(--table-ink)}.board{box-shadow:0 0 0 2px var(--piece-line), 0 6px 18px #00000040;touch-action:manipulation;border-radius:4px;position:relative}.board--in{animation:.3s cubic-bezier(.2,.7,.3,1) rise}.board__canvas{width:100%;height:100%;display:block}.board__slots{display:grid;position:absolute;inset:0}.slot{background:0 0;border:0;min-width:0;min-height:0;padding:0}.slot:focus-visible{outline:4px solid var(--sel);outline-offset:-4px;box-shadow:none}.side{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex}.trayhead{grid-template-columns:1fr 1fr;gap:8px;display:grid}.chip{border:2px solid var(--btn-edge);background:var(--btn);min-height:56px;color:var(--btn-ink);border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:4px 10px;font-size:.9rem;font-weight:800;line-height:1.1;display:flex}.chip i{border:2.5px solid;border-radius:5px;flex:none;width:22px;height:22px}.chip--on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.chip--on i{box-shadow:inset 0 0 0 3px var(--primary);background:currentColor;-webkit-mask:none}.tray{background:var(--table);min-height:0;color:var(--table-ink);touch-action:pan-y;overscroll-behavior:contain;border-radius:14px;flex-wrap:wrap;flex:1;place-content:flex-start center;gap:10px;padding:10px 8px;display:flex;overflow-y:auto}.tray__note{color:var(--table-muted);text-align:center;flex-basis:100%;margin:0 4px;font-size:.9rem;font-weight:700}.piece{touch-action:pan-y;background:0 0;border:3px solid #0000;border-radius:14px;place-items:center;padding:0;display:grid}.piece canvas{pointer-events:none;display:block}.piece--sel{border-color:var(--sel);box-shadow:0 0 0 3px var(--sel);touch-action:none;background:#7f7f7f1f;position:relative;transform:translateY(-3px)}.piece--sel:after{content:"✓";background:var(--sel);width:30px;height:30px;color:var(--table);border-radius:50%;place-items:center;font-size:18px;font-weight:800;display:grid;position:absolute;top:-10px;right:-10px}.ghost{z-index:900;pointer-events:none;filter:drop-shadow(0 8px 14px #0006);position:fixed;top:0;left:0}.tools{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.tool__tag{display:none}.tool--tagged .tool__tag{background:var(--primary);color:var(--primary-ink);white-space:nowrap;border-radius:999px;padding:1px 7px;font-size:18px;font-weight:800;line-height:20px;display:block;position:absolute;top:-13px;left:50%;transform:translate(-50%)}.tool{min-width:0;min-height:var(--tool-h);border:2px solid var(--btn-edge);background:var(--btn);color:var(--btn-ink);border-radius:14px;align-content:center;place-items:center;gap:2px;padding:4px 2px;font-size:.85rem;font-weight:800;line-height:1.1;display:grid;position:relative}.tool svg{width:26px;height:26px}.tool--on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.play--done .tools .tool:not([data-act=menu]),.play--done .trayhead .chip{opacity:.5}.play--wide{padding:calc(var(--safe-top) + 4px) 16px 16px;grid-template:"bar bar""stage status""stage side"1fr/1fr minmax(360px,34%);column-gap:16px;display:grid}.play--wide .bar{grid-area:bar}.play--wide .status{grid-area:status}.play--wide .stage{grid-area:stage;height:auto!important}.play--wide .side{grid-area:side}@keyframes rise{0%{opacity:0;transform:translateY(20px)}}@keyframes fade{0%{opacity:0}}.sheet{z-index:1000;background:#0000008c;place-items:center;padding:12px;animation:.2s fade;display:grid;position:fixed;inset:0}.sheet__card{width:100%;max-width:480px;max-height:calc(100% - var(--safe-top) - var(--safe-bottom));background:var(--sheet);color:var(--sheet-ink);-webkit-user-select:text;user-select:text;border-radius:22px;gap:12px;padding:22px 18px 14px;animation:.25s cubic-bezier(.2,.7,.3,1) rise;display:grid;overflow:auto;box-shadow:0 20px 60px #0006}.sheet__card h2{text-align:center;font-size:1.5rem;line-height:1.15}.sheet__card p{color:var(--sheet-muted);text-align:center;margin:0}.sheet__card .sheet__big{color:var(--sheet-ink);font-size:1.15rem;font-weight:800}.sheet__card .btn:not(.btn--primary){background:var(--sheet-btn);color:var(--sheet-ink);border-color:#0000}.sheet__card .btn--quiet{background:0 0!important}.sheet__card a{color:var(--sheet-ink)}.howto{gap:14px;display:grid}.howto__aim{gap:8px;display:grid}.sheet__card .howto__aim p,.sheet__card .howto__step p{color:var(--sheet-ink);font-weight:700;line-height:1.3}.howto__steps{gap:14px;margin:0;padding:0;list-style:none;display:grid}.howto__step{gap:8px;padding-top:4px;display:grid;position:relative}.howto__num{z-index:3;border:2px solid var(--primary-ink);background:var(--primary);width:38px;height:38px;color:var(--primary-ink);border-radius:50%;place-items:center;font-size:22px;font-weight:800;line-height:1;display:grid;position:absolute;top:0;left:0}.howto__more ul{color:var(--sheet-ink);gap:8px;margin:0;padding-left:24px;line-height:1.35;display:grid}.howto [data-act=more]{scroll-margin-top:24px}.sheet__card{overflow-anchor:none}.howto__more[hidden]{display:none}.hp{border:2px solid var(--slot);background:var(--table);color:var(--table-ink);border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:14px 10px;display:flex}.hp--col{flex-direction:column;gap:6px}.hp--board{padding:10px}.hp__board{width:100%;max-width:340px;height:auto;display:block}.hp__crop{width:230px;height:auto;display:block}.hp__boardbg{fill:var(--board)}.hp__guide{opacity:var(--guide-alpha)}.hp__line{fill:none;stroke:#1e181273;stroke-width:1px}.hp__slot{fill:none;stroke:var(--slot);stroke-width:2px;stroke-dasharray:7 5}.hp__tap{fill:none;stroke:var(--sel);stroke-width:5px}.hp__glow{fill:none;stroke:var(--hint);stroke-width:5px}.hp__arrow{width:40px;height:34px;color:var(--table-ink);display:block}.hp__down{display:block;transform:rotate(90deg)}.hp__tray{justify-content:center;gap:8px;display:flex}.hp .hp__piece{flex:none}.hp__piece svg{filter:drop-shadow(0 2px 3px #00000059);display:block}.hp .piece--sel:after{font-size:22px}.hp__chip{padding:4px 18px;font-size:1rem}.hp--tools{gap:10px}.hp__tool{flex:0 110px;min-height:64px;font-size:1rem}.about,.won{gap:12px;display:grid}.about .about__small{font-size:.9rem}.won__sun{justify-self:center;width:84px;height:84px}.won__pic{border-radius:6px;justify-self:center;max-width:70%;max-height:150px;box-shadow:0 4px 14px #0000004d}.page{height:100%;padding:calc(var(--safe-top) + 4px) 16px calc(var(--safe-bottom) + 24px);flex-direction:column;gap:12px;display:flex;overflow-y:auto}.page>*{flex-shrink:0}.page .bar{padding:8px 0}.page h3{color:var(--muted);margin-top:10px;font-size:1rem}.choice{border:2px solid var(--btn-edge);background:var(--btn);border-radius:16px;grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;display:grid}.choice--pieces{grid-template-columns:repeat(3,1fr);grid-auto-flow:row}.choice__opt{min-width:0;min-height:56px;color:var(--btn-ink);background:0 0;border:3px solid #0000;border-radius:12px;padding:0 4px;font-size:1.05rem;font-weight:800}.choice__opt--on{background:var(--primary);border-color:var(--btn-ink);color:var(--primary-ink)}.pictures{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid}.picture{border:2px solid var(--btn-edge);background:var(--btn);width:100%;height:100%;color:var(--btn-ink);text-align:left;border-radius:14px;align-content:start;gap:4px;padding:8px;display:grid}.picture img{aspect-ratio:1;object-fit:cover;border-radius:8px;width:100%}.picture__title{font-size:.95rem;font-weight:800;line-height:1.2}.picture__by{font-size:.9rem;line-height:1.2}.picture__done{align-items:center;gap:4px;font-size:.9rem;font-weight:800;display:flex}.picture__done svg{width:22px;height:22px}.note{color:var(--muted);margin:0;font-size:.95rem}.credits-list{-webkit-user-select:text;user-select:text;gap:10px;margin:0;padding:0;list-style:none;display:grid}.credits-list li{background:var(--btn);color:var(--btn-ink);border-radius:14px;grid-template-columns:64px 1fr;gap:12px;padding:10px;display:grid}.credits-list img{object-fit:cover;border-radius:6px;width:64px;height:64px}.credits-list div{gap:2px;font-size:.9rem;display:grid}.credits-list b{font-size:1rem}.credits-list a{min-height:44px;color:inherit;align-items:center;font-weight:700;display:inline-flex}.toggle{border:2px solid var(--btn-edge);background:var(--btn);min-height:64px;color:var(--btn-ink);cursor:pointer;border-radius:14px;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:10px 14px;font-weight:800;display:grid;position:relative}.toggle small{font-size:.9rem;font-weight:500;display:block}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle i{border:2px solid;border-radius:99px;width:60px;height:36px;transition:background .2s;position:relative}.toggle i:after{content:"";background:currentColor;border-radius:50%;width:26px;height:26px;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle input:checked+i{border-color:var(--btn-ink);background:var(--primary)}.toggle input:checked+i:after{background:var(--primary-ink);transform:translate(24px)}.toggle input:focus-visible+i{outline:4px solid var(--focus);outline-offset:2px}.looks{gap:8px;display:grid}.look{border:3px solid var(--btn-edge);background:var(--btn);min-height:72px;color:var(--btn-ink);text-align:left;border-radius:14px;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(--btn-ink);box-shadow:inset 0 0 0 3px var(--btn-ink)}.look__sw{grid-row:span 2;display:flex}.look__sw i{border:1px solid #7f7f7f80;width:22px;height:44px}.look__sw i:first-child{border-radius:8px 0 0 8px}.look__sw i:last-child{border-radius:0 8px 8px 0}.look__name{font-weight:800}.look__blurb{font-size:.9rem}.credits{text-align:center;color:var(--muted);margin:8px 0 0;font-size:.9rem}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:10ms!important;animation-duration:10ms!important;animation-iteration-count:1!important}.piece--sel{transform:none}}.settings__reset,.sheet__danger{margin-top:24px}:root,[data-theme=sky]{--bg:#1d5480;--bg-2:#174670;--ink:#fff;--muted:#dcebf7;--sun:#ffd45c;--table:#f3ecdf;--table-ink:#1d2a36;--table-muted:#4a5360;--board:#e4d9c6;--slot:#7a6a58;--piece-line:#3a3026;--sel:#b4400a;--hint:#1d5480;--guide-alpha:.3;--btn:#f3ecdf;--btn-ink:#1d2a36;--btn-edge:#9ec3e0;--primary:#ffd45c;--primary-ink:#1d2a36;--sheet:#fbf7ef;--sheet-ink:#1d2a36;--sheet-muted:#4a5360;--sheet-btn:#ebe2d1;--focus:#ffd45c;--focus-2:#1d2a36}[data-theme=daylight]{--bg:#e6eff6;--bg-2:#d8e6f1;--ink:#0f2233;--muted:#33475a;--sun:#d99a00;--table:#fff;--table-ink:#111a22;--table-muted:#3f4a55;--board:#eef2f6;--slot:#66727e;--piece-line:#1c2733;--sel:#b4400a;--hint:#1d5480;--guide-alpha:.3;--btn:#fff;--btn-ink:#0f2233;--btn-edge:#5f7385;--primary:#1d5480;--primary-ink:#fff;--sheet:#fff;--sheet-ink:#0f2233;--sheet-muted:#3f4a55;--sheet-btn:#e9eef3;--focus:#1d5480;--focus-2:#fff}[data-theme=contrast]{--bg:#000;--bg-2:#000;--ink:#fff;--muted:#e6e6e6;--sun:#ffe14d;--table:#141414;--table-ink:#fff;--table-muted:#e0e0e0;--board:#222;--slot:#bdbdbd;--piece-line:#fff;--sel:#ffe14d;--hint:#4dd2ff;--guide-alpha:.4;--btn:#1a1a1a;--btn-ink:#fff;--btn-edge:#fff;--primary:#ffe14d;--primary-ink:#000;--sheet:#141414;--sheet-ink:#fff;--sheet-muted:#dcdcdc;--sheet-btn:#2e2e2e;--focus:#ffe14d;--focus-2:#000}