@font-face{font-family:Atkinson Hyperlegible Next;src:url(/games/sunroom-words/play/fonts/atkinson-hyperlegible-next.woff2)format("woff2");font-weight:200 800;font-display:swap}@font-face{font-family:Corben;src:url(/games/sunroom-words/play/fonts/corben-700.woff2)format("woff2");font-weight:700;font-display:swap}:root{--font-ui:"Atkinson Hyperlegible Next", system-ui, sans-serif;--font-title:"Corben", Georgia, serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--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(--room) 40%, var(--room-2));background-color:var(--room);color:var(--ink);font:19px/1.4 var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#app{max-width:1040px;height:100%;margin:0 auto}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}h2,h3{margin:0;font-weight:700}.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 20px;font-size:21px;font-weight:700;display:grid}.btn__title{font-size:22px;font-weight:700}.btn__sub{font-size:16px;font-weight:500}.btn--primary{background:var(--primary);color:var(--primary-ink);border-color:#0000}.btn--quiet{text-underline-offset:4px;background:0 0;border-color:#0000;min-height:56px;font-size:19px;text-decoration:underline}.btn:active,.tool:active,.icon-btn:active{transform:scale(.97)}.icon-btn{border:2px solid var(--btn-edge);background:var(--btn);width:56px;height:56px;color:var(--btn-ink);border-radius:14px;place-items:center;padding:0;display:grid}.icon-btn svg{width:28px;height:28px}.home{height:100%;padding:calc(var(--safe-top) + 20px) 20px calc(var(--safe-bottom) + 16px);flex-direction:column;justify-content:space-between;gap:12px;display:flex;position:relative}.home__settings{top:calc(var(--safe-top) + 14px);position:absolute;right:16px}.home__brand{text-align:center;flex:1;align-content:center;justify-items:center;gap:4px;display:grid}.home__sun{width:104px;height:104px;fill:var(--sun);animation:1.2s cubic-bezier(.2,.7,.3,1) both sunrise}.home__sun svg{width:100%;height:100%;animation:80s linear infinite spin}.logo{font:700 clamp(40px, 14vw, 60px)/1.05 var(--font-title);letter-spacing:-.01em;margin:0}.logo span{font:700 20px/1 var(--font-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:8px;display:block}.home__tag{max-width:22em;color:var(--muted);margin:10px 0 0;font-size:clamp(16px,5vw,20px)}.home__menu{gap:12px;width:100%;max-width:440px;margin:0 auto;display:grid}.home__level{gap:6px;display:grid}.home__blurb{text-align:center;color:var(--muted);margin:0;font-size:16px}.home__row{grid-template-columns:1fr 1fr;display:grid}@media (height<=700px){.home__sun{width:64px;height:64px}.logo{font-size:40px}.logo span{margin-top:6px;font-size:17px}.home__tag{margin-top:4px;font-size:16px}.home__menu{gap:8px}.home .btn{min-height:58px;padding:6px 16px}}@keyframes sunrise{0%{opacity:0;transform:translateY(24px)scale(.85)}}@keyframes spin{to{transform:rotate(360deg)}}.play{height:100%;padding-top:var(--safe-top);flex-direction:column;display:flex}.bar{grid-template-columns:56px 1fr 56px;align-items:center;gap:10px;padding:8px 10px 2px;display:grid}.bar h2{text-align:center;font-size:24px}.bar__title{text-align:center;min-width:0;line-height:1.15;display:grid}.bar__theme{font:700 22px/1.15 var(--font-title);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.bar__sub{color:var(--muted);font-size:16px;font-weight:600}.bar__time{font-variant-numeric:tabular-nums;text-align:right;font-size:17px;font-weight:700}.caption{text-align:center;min-height:48px;color:var(--hint);place-items:center;margin:0;padding:2px 14px;font-size:18px;font-weight:700;line-height:22px;display:grid}.board{flex-direction:column;flex:1;gap:10px;min-height:0;padding:0 8px;display:flex}.grid-wrap{flex:1;place-items:center;min-height:0;display:grid;position:relative}.paper{padding:calc(var(--cell) * .2);border-radius:calc(var(--cell) * .3);background:var(--paper);box-shadow:var(--paper-shadow), inset 0 0 0 2px var(--paper-edge)}.paper--in{animation:.45s cubic-bezier(.2,.7,.3,1) paper-in}.paper__area{grid-template-rows:repeat(var(--rows), var(--cell));touch-action:none;cursor:pointer;display:grid;position:relative}.paper__row{grid-template-columns:repeat(var(--cols), var(--cell));display:grid}.paper__bands{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.letter{font:700 calc(var(--cell) * .64) / 1 var(--font-ui);color:var(--letter);pointer-events:none;place-items:center;display:grid;position:relative}.play--xl .letter{font-size:calc(var(--cell) * .8);font-weight:800}.letter--found{color:var(--band-ink)}.letter--pending{color:var(--letter)}[data-theme=night] .letter--pending{color:#fff}.letter--hint:before{content:"";z-index:-1;background:var(--hint-fill);box-shadow:0 0 0 3px var(--hint-edge);border-radius:50%;animation:.9s ease-in-out 3 glow;position:absolute;inset:6%}.letter--hint{color:#1a1a1a;z-index:0}.live line{transition:none}.live--nope{animation:.4s nope}.bands .grow{stroke-dasharray:40;stroke-dashoffset:40px;animation:.35s ease-out forwards grow}.paper--won .letter--found{animation:.6s cubic-bezier(.3,0,.4,1.4) both lift;animation-delay:var(--delay,0s)}@keyframes paper-in{0%{opacity:0;transform:translateY(16px)scale(.98)}}@keyframes grow{to{stroke-dashoffset:0}}@keyframes lift{50%{transform:translateY(-22%)scale(1.15)}}@keyframes nope{20%,60%{transform:translate(-.12px)}40%,80%{transform:translate(.12px)}}@keyframes glow{50%{transform:scale(1.12)}}.words{background:var(--paper);box-shadow:inset 0 0 0 2px var(--paper-edge);border-radius:16px;flex-wrap:wrap;place-content:start center;gap:6px;margin:0;padding:8px;list-style:none;display:flex}.word{min-height:44px;color:var(--letter);letter-spacing:.04em;background:0 0;border:2px solid #0000;border-radius:12px;align-items:center;gap:4px;padding:2px 10px;font-size:23px;font-weight:800;display:inline-flex;position:relative}.word--found{border-color:var(--band-edge);background:var(--band);color:#1a1a1a}.word--found span{text-decoration:line-through;text-decoration-thickness:3px}.word__tick{background:var(--band-edge);color:#fff;pointer-events:none;border-radius:50%;place-items:center;width:22px;height:22px;padding:3px;display:grid;position:absolute;top:-7px;right:-7px}.word__tick svg{width:100%;height:100%}.word--hinted{border-color:var(--hint-edge);border-style:dashed}.word--just{animation:.4s cubic-bezier(.3,0,.4,1.5) pop}.play--easy .word{padding:2px 14px;font-size:26px}.play--xl .word{font-size:26px}.play--hard .words{gap:2px 4px}.play--hard .word{min-height:40px;padding:0 8px;font-size:22px}.bar__theme--long{font-size:19px}@keyframes pop{50%{transform:scale(1.12)}}.tools{padding:10px 10px calc(var(--safe-bottom) + 10px);grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.tool{border:2px solid var(--btn-edge);background:var(--btn);min-height:64px;color:var(--btn-ink);border-radius:16px;justify-items:center;gap:2px;padding:6px 4px;font-size:16px;font-weight:700;display:grid}.tool svg{width:28px;height:28px}@media (height<=720px){.bar{padding-top:4px}.bar__theme{font-size:19px}.bar__theme--long{font-size:17px}.bar__sub{font-size:15px}.caption{min-height:44px;font-size:16px;line-height:20px}.board{gap:6px}.words{gap:2px 4px;padding:4px 6px}.word{min-height:36px;padding:0 8px;font-size:20px}.play--easy .word,.play--xl .word{font-size:22px}.play--hard .words{gap:0 2px}.play--hard .word{letter-spacing:.02em;min-height:31px;padding:0 6px;font-size:19px}.play--hard .word__tick{width:16px;height:16px}.tools{padding-top:6px;padding-bottom:calc(var(--safe-bottom) + 6px)}.tool{grid-template-columns:auto auto;justify-content:center;align-items:center;gap:6px;min-height:56px;font-size:15px}.tool svg{width:24px;height:24px}}@media (width>=760px) and (aspect-ratio>=1){.board{flex-direction:row;gap:20px;padding:0 20px}.words{flex-flow:column;flex:0 0 280px;align-self:center;align-items:stretch;max-height:100%;overflow-y:auto}.word{justify-content:flex-start;width:100%}.tools{width:100%;max-width:620px;margin:0 auto}}.sheet{z-index:1000;background:#00000080;place-items:center;padding:20px;animation:.2s fade;display:grid;position:fixed;inset:0}.sheet__card{width:100%;max-width:460px;max-height:calc(100% - var(--safe-top) - var(--safe-bottom));background:var(--sheet);color:var(--sheet-ink);border-radius:22px;gap:12px;padding:24px 20px 16px;animation:.25s cubic-bezier(.2,.7,.3,1) rise;display:grid;overflow:auto;box-shadow:0 20px 60px #0006}.sheet__card h2{font:700 28px/1.15 var(--font-title);text-align:center}.sheet__card p{color:var(--sheet-muted);text-align:center;margin:0}.sheet__card .sheet__big{color:var(--sheet-ink);font-variant-numeric:tabular-nums;font-size:24px;font-weight:700}.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}.howto ol{gap:10px;margin:0;padding-left:24px;font-size:19px;display:grid}.howto{gap:14px;display:grid}.howto .howto__note{color:var(--sheet-ink);font-weight:700}.won{gap:12px;display:grid}.won__sun{width:84px;height:84px;fill:var(--sun);justify-self:center;animation:.9s cubic-bezier(.2,.7,.3,1) both sunrise}.won__badges{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.won__badges span{color:#2b1810;background:#ffd84d;border-radius:99px;padding:4px 12px;font-size:16px;font-weight:700}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(30px)}}.page{max-width:640px;height:100%;padding:calc(var(--safe-top) + 4px) 16px calc(var(--safe-bottom) + 24px);align-content:start;gap:12px;margin:0 auto;display:grid;overflow-y:auto}.page .bar{padding:8px 0}.page h3{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px;font-size:17px}.statset{gap:8px;display:grid}.statset dl{grid-template-columns:1fr 1fr;gap:8px;margin:0;display:grid}.statset dl div{background:var(--btn);border-radius:14px;padding:12px 14px;display:grid}.statset dt{color:var(--muted);font-size:16px}.statset dd{font-variant-numeric:tabular-nums;margin:0;font-size:28px;font-weight:800}.statset dd small{color:var(--muted);font-size:17px;font-weight:600}.toggle{background:var(--btn);border-radius:14px;grid-template-columns:1fr auto;align-items:center;gap:12px;min-height:64px;padding:10px 14px;font-weight:700;display:grid}.toggle small{color:var(--muted);font-size:16px;font-weight:500;display:block}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle i{background:#8a8a8a;border-radius:99px;width:60px;height:36px;transition:background .2s;position:relative}.toggle i:after{content:"";background:#fff;border-radius:50%;width:28px;height:28px;transition:transform .2s;position:absolute;top:4px;left:4px;box-shadow:0 1px 3px #0000004d}.toggle input:checked+i{background:var(--primary)}.toggle input:checked+i:after{transform:translate(24px)}.toggle input:focus-visible+i{outline:3px solid var(--focus)}.choice{background:var(--btn);border:2px solid var(--btn-edge);border-radius:16px;grid-auto-columns:1fr;grid-auto-flow:column;gap:6px;padding:6px;display:grid}.choice__opt{min-height:52px;color:var(--btn-ink);background:0 0;border:0;border-radius:12px;font-size:19px;font-weight:700}.choice__opt--on{background:var(--primary);color:var(--primary-ink)}.note{color:var(--muted);margin:0;font-size:17px}.looks{gap:8px;display:grid}.look{background:var(--btn);min-height:72px;color:var(--btn-ink);text-align:left;border:3px solid #0000;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(--primary)}.look__sw{grid-row:span 2;display:flex}.look__sw i{border:1px solid #8a8a8a;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:700}.look__blurb{color:var(--muted);font-size:16px}.credits{text-align:center;color:var(--muted);margin:8px 0 0;font-size:15px}.credits a{color:inherit}@media (prefers-reduced-motion:reduce){.home__sun svg,.letter--hint:before,.paper--won .letter--found{animation:none}}.tool--hint{position:relative}.tool__badge{background:var(--primary);color:var(--primary-ink);white-space:nowrap;pointer-events:none;border-radius:999px;padding:1px 7px;font-size:13px;font-weight:700;line-height:18px;position:absolute;top:-9px;right:-4px}.tool__badge:empty{display:none}:root,[data-theme=terracotta]{--room:#7b3a26;--room-2:#6a2f1e;--ink:#fff5e8;--muted:#f7e2d1;--paper:#fffaf0;--paper-edge:#e7d3bb;--paper-shadow:0 2px 0 #5a2716, 0 10px 30px #280c0459;--letter:#2b1810;--paper-muted:#6b4a3a;--band-ink:#1a1a1a;--band-blend:multiply;--band-edge-on:1;--select:#1f6fd1;--select-fill:#d6e8ff;--hint:#ffe27a;--hint-fill:#ffd84d;--hint-edge:#8f4a00;--sun:#f6c453;--btn:#8f4630;--btn-ink:#fff5e8;--btn-edge:#b0644a;--primary:#f6c453;--primary-ink:#2b1810;--sheet:#fffaf0;--sheet-ink:#2b1810;--sheet-muted:#6b4a3a;--sheet-btn:#f1e3d0;--focus:#ffe27a}[data-theme=daylight]{--room:#f6ecdc;--room-2:#efe1cb;--ink:#2b1810;--muted:#5e4234;--paper:#fff;--paper-edge:#d9c6ad;--paper-shadow:0 2px 0 #d9c6ad, 0 10px 26px #5a3c1e29;--letter:#1d120c;--paper-muted:#5e4234;--band-ink:#1a1a1a;--band-blend:multiply;--select:#1f5fbf;--select-fill:#d6e8ff;--hint:#8a4500;--hint-fill:#ffd84d;--hint-edge:#8f4a00;--sun:#e3a72f;--btn:#fff;--btn-ink:#2b1810;--btn-edge:#cdb89e;--primary:#8a3a22;--primary-ink:#fff;--sheet:#fff;--sheet-ink:#2b1810;--sheet-muted:#5e4234;--sheet-btn:#f3e8d8;--focus:#1f5fbf}[data-theme=night]{--room:#0e0e10;--room-2:#000;--ink:#fff;--muted:#d0d0d0;--paper:#000;--paper-edge:#8a8a8a;--paper-shadow:none;--letter:#fff;--paper-muted:#d0d0d0;--band-ink:#000;--band-blend:normal;--select:#38d1ff;--select-fill:#0b3a4d;--hint:#ffd23f;--hint-fill:#ffd23f;--hint-edge:#fff;--sun:#ffd23f;--btn:#232327;--btn-ink:#fff;--btn-edge:#6a6a70;--primary:#ffd23f;--primary-ink:#000;--sheet:#1b1b1f;--sheet-ink:#fff;--sheet-muted:#d0d0d0;--sheet-btn:#2f2f35;--focus:#38d1ff}