@font-face{font-family:Atkinson Hyperlegible Next;src:url(/games/sunroom-cryptogram/play/assets/atkinson-hyperlegible-next-BcXVPD7q.woff2)format("woff2");font-weight:200 800;font-display:swap}:root{--font-ui:"Atkinson Hyperlegible Next", system-ui, sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--clue-size:22px;--status-size:20px;--key-size:25px;--key-h:58px;--quote-size:26px}body.text-xl{--clue-size:25px;--status-size:22px;--key-size:28px;--quote-size:30px}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{background:var(--page);color:var(--ink);font:20px/1.4 var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}body.text-xl{font-size:22px}#app{max-width:620px;height:100%;margin:0 auto}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}:focus-visible{outline:4px solid var(--focus);outline-offset:2px}h1,h2,h3{margin:0;font-weight:800}a{color:inherit}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.btn{border:2px solid var(--btn-edge);background:var(--btn);width:100%;min-height:62px;color:var(--btn-ink);text-align:center;border-radius:16px;place-content:center;gap:2px;padding:8px 14px;font-size:22px;font-weight:700;line-height:1.2;display:grid;position:relative}.btn__title{font-size:23px;font-weight:800}.btn__sub{font-size:18px;font-weight:500}.btn--primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.btn--quiet{text-underline-offset:4px;background:0 0;border-color:#0000;min-height:56px;font-size:20px;text-decoration:underline}.btn:active,.tool:active,.key:active,.bar__btn:active,.prompt__step:active{transform:scale(.97)}.home{height:100%;padding:calc(var(--safe-top) + 10px) 20px calc(var(--safe-bottom) + 16px);flex-direction:column;justify-content:space-between;gap:12px;display:flex;position:relative;overflow-y:auto}.home__top{justify-content:space-between;gap:12px;display:flex}.home__corner{grid-auto-flow:column;align-items:center;gap:6px;width:auto;padding:0 10px}.home__corner svg{width:26px;height:26px}.home__brand{text-align:center;justify-items:center;gap:6px;display:grid}.home__mark{width:112px;height:112px;animation:.6s cubic-bezier(.2,.7,.3,1) both rise}.mark{width:100%;height:100%}.mark__frame{fill:var(--accent)}.mark__cell{fill:var(--cell)}.mark__cur{fill:var(--cur)}.mark__ch{font:800 26px var(--font-ui);fill:var(--cell-ink);text-anchor:middle}.mark__code{font:800 22px var(--font-ui);fill:var(--bar-ink);text-anchor:middle}.mark__line{stroke:var(--bar-edge);stroke-width:4px;stroke-linecap:round}[data-theme=bold] .mark__frame{stroke:#fff;stroke-width:3px}.logo{font:800 clamp(44px, 14vw, 60px)/1 var(--font-ui);letter-spacing:-.01em;margin:4px 0 0}.logo span{font:800 24px/1 var(--font-ui);letter-spacing:.24em;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:20px}.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}.play{height:100%;padding:var(--safe-top) 8px calc(var(--safe-bottom) + 8px);flex-direction:column;gap:6px;display:flex}.main,.side{flex-direction:column;gap:6px;min-height:0;display:flex}.main{flex:1}.bar{grid-template-columns:76px 1fr 76px;align-items:center;gap:6px;padding-top:4px;display:grid}.bar h2{text-align:center;font-size:24px}.bar__btn{border:2px solid var(--btn-edge);background:var(--btn);height:56px;color:var(--btn-ink);border-radius:14px;align-content:center;justify-items:center;gap:0;padding:0 2px;font-size:15px;font-weight:700;line-height:1.1;display:grid}.bar__btn svg{width:24px;height:24px}.bar__title{text-align:center;justify-items:center;line-height:1.15;display:grid}.bar .bar__main{font-size:20px;font-weight:800}.bar__sub{color:var(--muted);font-variant-numeric:tabular-nums;font-size:17px;font-weight:600}.prompt{background:var(--bar-bg);min-height:72px;color:var(--bar-ink);box-shadow:inset 0 -5px 0 var(--bar-edge);border-radius:16px;grid-template-columns:70px 1fr 70px;align-items:stretch;gap:4px;padding:4px;display:grid}.prompt__step{border:2px solid var(--bar-ink);min-height:56px;color:var(--bar-ink);background:0 0;border-radius:12px;align-content:center;justify-items:center;gap:2px;padding:0;font-size:14px;font-weight:800;display:grid}.prompt__step svg{width:26px;height:26px}.prompt__text{text-align:center;align-content:center;min-width:0;padding:2px 4px 6px;display:grid}.prompt__name{font-size:17px;font-weight:700}.prompt__words{font-size:var(--clue-size);font-weight:800;line-height:1.18}.board{flex:1;align-items:center;min-height:0;display:grid;position:relative;overflow:hidden}.quote{--w:34px;place-content:center;column-gap:calc(var(--w) * .42);row-gap:calc(var(--w) * .16);flex-wrap:wrap;padding:4px 2px;display:flex}.w{flex-wrap:wrap;gap:3px;max-width:100%;display:flex}.t,.m{grid-template-rows:calc(var(--w) * 1.08) calc(var(--w) * .7);width:var(--w);background:0 0;border:0;justify-items:center;margin:0;padding:0;display:grid}.m{width:auto;min-width:calc(var(--w) * .3)}.t__g{border:2px solid var(--cell-edge);border-radius:max(4px, calc(var(--w) * .14));background:var(--cell);width:100%;height:100%;color:var(--cell-ink);font-size:calc(var(--w) * .8);place-items:center;font-weight:800;line-height:1;display:grid;position:relative;overflow:hidden}.m__g{height:100%;padding-bottom:calc(var(--w) * .08);color:var(--ink);font-size:calc(var(--w) * .8);align-items:end;font-weight:800;line-height:1;display:grid}.t__c{width:100%;color:var(--code);font-size:calc(var(--w) * .66);border-radius:6px;place-items:center;margin-top:2px;font-weight:800;line-height:1;display:grid}.t--given .t__g{border:4px double var(--given);background:var(--given-bg);color:var(--given)}.t--sel .t__g{border:max(3px, calc(var(--w) * .09)) solid var(--word-edge);background:var(--word)}.t--sel .t__c{background:var(--word);color:var(--code-sel);box-shadow:0 0 0 2px var(--word-edge)}.t--cur .t__g{background:var(--cur);color:var(--cell-ink);outline:max(3px, calc(var(--w) * .1)) solid var(--cur-ring);outline-offset:1px}.t--cur .t__c{background:var(--cur)}.t--wrong .t__g:after{content:"";background:linear-gradient(to top right, transparent calc(50% - 2px), var(--wrong) calc(50% - 2px), var(--wrong) calc(50% + 2px), transparent calc(50% + 2px));pointer-events:none;position:absolute;inset:0}.t--wrong .t__g{color:var(--wrong)}.t--hinted .t__g:before{content:"";border-style:solid;border-width:0 0 max(7px, calc(var(--w) * .26)) max(7px, calc(var(--w) * .26));border-color:transparent transparent var(--revealed) transparent;pointer-events:none;position:absolute;bottom:0;right:0}.t:focus-visible{outline:none}.t:focus-visible .t__g{outline:4px solid var(--focus);outline-offset:2px}.status{min-height:3.75em;font-size:var(--status-size);text-align:center;align-content:center;margin:0;padding:0 6px;font-weight:700;line-height:1.25;display:grid}.status--hint{color:var(--hint)}.tools{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.tool{border:2px solid var(--btn-edge);background:var(--btn);min-height:58px;color:var(--btn-ink);border-radius:14px;align-content:center;justify-items:center;gap:1px;padding:4px 2px;font-size:17px;font-weight:800;line-height:1.1;display:grid;position:relative}.tool svg{width:24px;height:24px}.tool:disabled,.key:disabled,.prompt__step:disabled{opacity:.55}.tool--short,.btn__tag{display:none}.btn--tagged .btn__tag{background:var(--primary);color:var(--primary-ink);white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:18px;line-height:20px;display:block;position:absolute;top:-13px;left:50%;transform:translate(-50%)}.keys{gap:5px;display:grid;position:relative}.keys__row{justify-content:center;gap:4px;display:flex}.keys__row:nth-child(2){padding:0 4.5%}.key{min-width:0;height:var(--key-h);border:2px solid var(--btn-edge);background:var(--key);color:var(--key-ink);font-size:var(--key-size);border-radius:10px;flex:1 1 0;padding:0;font-weight:800;line-height:1;position:relative}.key--used{background:var(--key-used);color:var(--key-used-ink)}.key--used span:after{content:"";background:var(--key-mark);border-radius:2px;height:4px;position:absolute;bottom:7px;left:22%;right:22%}.key--this{border:4px solid var(--key-mark)}.key--del{flex:1.9 1 0;align-content:center;justify-items:center;gap:0;font-size:15px;display:grid}.key--del svg{width:26px;height:26px}.keys__done{background:var(--page);border-radius:16px;grid-template-columns:1fr 1fr;align-items:stretch;gap:8px;padding:8px;display:grid;position:absolute;inset:0}.sheet{z-index:10;padding:calc(var(--safe-top) + 12px) 12px calc(var(--safe-bottom) + 12px);background:#0000008c;place-items:center;animation:.2s fade;display:grid;position:fixed;inset:0}.sheet__card{background:var(--sheet);width:100%;max-width:480px;max-height:100%;color:var(--sheet-ink);border-radius:22px;gap:10px;padding:20px 16px 12px;animation:.25s cubic-bezier(.2,.7,.3,1) rise;display:grid;overflow:auto;box-shadow:0 20px 60px #0006}[data-theme=bold] .sheet__card{border:2px solid #fff}.sheet--wide .sheet__card{max-width:620px}.sheet__card:focus{outline:none}.sheet__card h2{text-align:center;font-size:28px;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:26px;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 .btn--on{border-width:3px;border-color:var(--sheet-ink)!important}.sheet__card .sheet__label{color:var(--sheet-ink);text-align:left;margin-top:6px;font-weight:800}.sheet__three,.sheet__two{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.sheet__two{grid-template-columns:repeat(2,1fr)}.sheet__three .btn,.sheet__two .btn{padding:6px 4px}.sheet__three .btn__title,.sheet__two .btn__title{font-size:19px}.btn--level{text-align:left;justify-items:start}.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-size:1em;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:1;background:var(--primary);width:36px;height:36px;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);text-align:left;gap:8px;margin:0;padding-left:24px;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(--cell-edge);background:var(--page);color:var(--ink);border-radius:16px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 6px;padding:14px 10px 10px;display:flex}.hp--row{flex-wrap:nowrap}.hp .hp__quote{--w:44px;padding:0}.hp .t{width:var(--w)}.hp__arrow{width:40px;height:34px;color:var(--ink);flex:none}.hp .hp__key{flex:none;place-items:center;width:54px;height:62px;font-size:30px;display:grid}.hp__or{font-size:22px;font-weight:800}.hp--tools{gap:8px}.hp__tool{flex:1 1 0;max-width:100px;font-size:20px}.won__quote{border-left:6px solid var(--accent);background:var(--sheet-btn);color:var(--sheet-ink);font-size:var(--quote-size);text-align:left;-webkit-user-select:text;user-select:text;border-radius:8px;margin:4px 0;padding:16px;font-weight:700;line-height:1.3}.sheet__card .won__by{color:var(--sheet-ink);font-size:23px;font-weight:800}.sheet__card .won__src{margin-top:-8px}.won,.about{gap:10px;display:grid}.won__mark,.about__mark{justify-self:center;width:84px;height:84px}.sheet__card .about__by{color:var(--sheet-ink);font-weight:800}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(24px)}}.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{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px;font-size:18px}.label{margin:4px 0 -4px;font-weight:700}.statset{gap:8px;display:grid}.statset dl{grid-template-columns:repeat(3,1fr);gap:8px;margin:0;display:grid}.statset dl div{border:2px solid var(--btn-edge);background:var(--btn);border-radius:14px;padding:12px;display:grid}.statset dt{color:var(--btn-ink);font-size:18px}.statset dd{font-variant-numeric:tabular-nums;margin:0;font-size:30px;font-weight:800}.toggle{border:2px solid var(--btn-edge);background:var(--btn);min-height:64px;color:var(--btn-ink);border-radius:14px;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:10px 14px;font-weight:700;display:grid;position:relative}.toggle small{font-size:18px;font-weight:500;display:block}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle i{background:var(--page);width:62px;height:38px;box-shadow:inset 0 0 0 2px var(--btn-edge);border-radius:99px;position:relative}.toggle i:after{content:"";background:var(--btn-ink);border-radius:50%;width:26px;height:26px;transition:transform .2s;position:absolute;top:6px;left:6px}.toggle input:checked+i{background:var(--primary);box-shadow:none}.toggle input:checked+i:after{background:var(--primary-ink);transform:translate(24px)}.toggle input:focus-visible+i{outline:4px solid var(--focus)}.choice{border:2px solid var(--btn-edge);background:var(--btn);border-radius:16px;grid-auto-columns:1fr;grid-auto-flow:column;gap:6px;padding:6px;display:grid}.choice__opt{min-height:56px;color:var(--btn-ink);background:0 0;border:0;border-radius:12px;font-size:20px;font-weight:700;line-height:1.15}.choice__opt--on{background:var(--primary);color:var(--primary-ink)}.note{color:var(--muted);margin:0;font-size:20px}.note--box{background:var(--btn);color:var(--btn-ink);border-radius:14px;padding:12px 14px}.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(--ink);border-width:4px}.look__sw{grid-row:span 2;display:flex}.look__sw i{border:1px solid #7f8a96;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:18px}.credits{text-align:center;color:var(--muted);margin:8px 0 0;font-size:18px}@media (height<=760px){:root{--key-h:56px;--key-size:23px}.status{min-height:2.5em}}@media not ((width>=900px) and (aspect-ratio>=1)){.play>.bar,.prompt{display:none}.play{padding-top:calc(var(--safe-top) + 6px)}.tools{grid-template-columns:repeat(5,1fr)}.tool--short{display:grid}.tool{min-height:56px;font-size:16px}.play,.main,.side,.keys{gap:4px}}@media (width>=900px) and (aspect-ratio>=1){#app{max-width:1280px}.play{padding:var(--safe-top) 20px calc(var(--safe-bottom) + 12px);grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1.5fr) minmax(380px,1fr);column-gap:24px;display:grid}.play>.bar{grid-column:1/-1}.side{justify-content:end;gap:12px}.tools{grid-template-columns:repeat(2,1fr)}.tool{min-height:64px;font-size:19px}:root{--key-h:64px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.btn:active,.tool:active,.key:active,.bar__btn:active,.prompt__step:active{transform:none}}.btn--apart{margin-top:28px}:root,[data-theme=sepia]{--page:#f5ecd9;--page-2:#ebdcbc;--ink:#24170b;--muted:#4f3a26;--accent:#704214;--bar-bg:#704214;--bar-ink:#fffaf0;--bar-edge:#e8a33a;--cell:#fffaf0;--cell-ink:#1a1008;--cell-edge:#7d6449;--code:#4a2b0c;--code-sel:#24170b;--word:#f2d79c;--word-edge:#704214;--cur:#e8a33a;--cur-ring:#24170b;--given:#55300c;--given-bg:#ead8b0;--wrong:#b3261e;--revealed:#704214;--hint:#6b3a0c;--btn:#fffaf0;--btn-ink:#24170b;--btn-edge:#866c50;--key:#fffaf0;--key-ink:#1a1008;--key-used:#e2c992;--key-used-ink:#1a1008;--key-mark:#704214;--primary:#704214;--primary-ink:#fffaf0;--sheet:#fffaf0;--sheet-ink:#24170b;--sheet-muted:#4f3a26;--sheet-btn:#efe2c6;--focus:#1d5d94}[data-theme=daylight]{--page:#fff;--page-2:#f4efe6;--ink:#000;--muted:#333;--accent:#5e3510;--bar-bg:#5e3510;--bar-ink:#fff;--bar-edge:#ffc23d;--cell:#fff;--cell-ink:#000;--cell-edge:#555;--code:#3d2208;--code-sel:#000;--word:#f6d98f;--word-edge:#5e3510;--cur:#ffc23d;--cur-ring:#000;--given:#5e3510;--given-bg:#efe3cc;--wrong:#b3261e;--revealed:#5e3510;--hint:#5e3510;--btn:#fff;--btn-ink:#000;--btn-edge:#555;--key:#f3f0ea;--key-ink:#000;--key-used:#e8cf94;--key-used-ink:#000;--key-mark:#5e3510;--primary:#000;--primary-ink:#fff;--sheet:#fff;--sheet-ink:#000;--sheet-muted:#333;--sheet-btn:#efeae0;--focus:#0f4f8a}[data-theme=bold]{--page:#000;--page-2:#000;--ink:#fff;--muted:#e6e6e6;--accent:#ffe14d;--bar-bg:#ffe14d;--bar-ink:#000;--bar-edge:#fff;--cell:#fff;--cell-ink:#000;--cell-edge:#fff;--code:#fff;--code-sel:#000;--word:#ffe14d;--word-edge:#ffe14d;--cur:#38d1ff;--cur-ring:#fff;--given:#000;--given-bg:#d6d6d6;--wrong:#c00000;--revealed:#000;--hint:#ffe14d;--btn:#161616;--btn-ink:#fff;--btn-edge:#a0a0a0;--key:#fff;--key-ink:#000;--key-used:#ffe14d;--key-used-ink:#000;--key-mark:#000;--primary:#ffe14d;--primary-ink:#000;--sheet:#121212;--sheet-ink:#fff;--sheet-muted:#e6e6e6;--sheet-btn:#2a2a2a;--focus:#38d1ff}