@font-face{font-family:Atkinson Hyperlegible Next;src:url(/games/sunroom-checkers/play/fonts/atkinson-hyperlegible-next.woff2)format("woff2");font-weight:200 800;font-display:swap}html{font-size:20px}html[data-text=large]{font-size:23px}html[data-text=xl]{font-size:26px}:root{--font-ui:"Atkinson Hyperlegible Next", system-ui, sans-serif;--font-title:"Atkinson Hyperlegible Next", system-ui, sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{background:var(--page);color:var(--ink);font:1rem/1.35 var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#app{max-width:980px;height:100%;margin:0 auto}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:4px solid var(--focus);outline-offset:2px}h2,h3{margin:0;font-weight:700}.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:64px;color:var(--btn-ink);text-align:center;border-radius:18px;gap:2px;padding:10px 18px;font-size:1.05rem;font-weight:700;display:grid}.btn__title{font-size:1.1rem;font-weight:700}.btn__sub{font-size:1rem;font-weight:500}.btn--primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.btn--quiet{min-height:56px;font-size:1rem}.btn--huge{min-height:88px;font-size:1.4rem}.btn:active,.tool:active,.bar__btn:active,.choice:active{transform:scale(.97)}.home{max-width:520px;height:100%;padding:calc(var(--safe-top) + 14px) 16px calc(var(--safe-bottom) + 14px);flex-direction:column;justify-content:safe center;gap:32px;margin:0 auto;display:flex;overflow-y:auto}.home__brand{text-align:center;justify-items:center;gap:8px;display:grid}.home__art{width:min(56vw,240px,26vh)}.home__board{width:100%;display:block}.home__sun circle{fill:var(--primary)}.home__sun path{stroke:var(--primary)}.logo{font:800 2.1rem/1.05 var(--font-title);letter-spacing:.01em;margin:0}.logo span{font-size:1.2em;display:block}.home__tag{max-width:24em;color:var(--muted);margin:0}.home__menu{gap:10px;display:grid}.home__row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.play{height:100%;padding:calc(var(--safe-top) + 6px) 8px calc(var(--safe-bottom) + 8px);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"bar""board""panel""tools";gap:6px;display:grid}.bar{grid-area:bar;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;display:grid}.bar h2{font:800 1.3rem/1.1 var(--font-title);text-align:center}.bar__spacer{width:64px}.bar__btn{border:2px solid var(--btn-edge);background:var(--btn);min-width:64px;min-height:56px;color:var(--btn-ink);border-radius:14px;align-content:center;justify-items:center;gap:0;padding:4px 8px;font-size:.8rem;font-weight:700;line-height:1.1;display:grid}.bar__btn svg{width:24px;height:24px}.bar__title{text-align:center;min-width:0;line-height:1.15;display:grid}.bar__main{font:800 1.05rem/1.15 var(--font-title)}.bar__sub{color:var(--muted);font-size:1rem;font-weight:700}.boardwrap{grid-area:board;place-items:center;min-height:0;display:grid;overflow:hidden}.boardbox{--sq:40px;--lab:0px;grid-template-columns:var(--lab) calc(var(--sq) * 8 + 8px);grid-template-rows:calc(var(--sq) * 8 + 8px) var(--lab);display:grid}.ranks{grid-area:1/1;grid-template-rows:repeat(8, var(--sq));padding:4px 0;display:grid}.files{grid-area:2/2;grid-template-columns:repeat(8, var(--sq));padding:0 4px;display:grid}.ranks span,.files span{color:var(--label);font-size:min(.9rem, calc(var(--sq) * .42));place-items:center;font-weight:800;line-height:1;display:grid}.board{grid-area:1/2;grid-template-columns:repeat(8, var(--sq));grid-template-rows:repeat(8, var(--sq));background:var(--frame);box-shadow:0 4px 14px var(--shadow);border-radius:6px;padding:4px;display:grid}.sq{width:var(--sq);height:var(--sq);background:var(--dark);border:0;border-radius:0;place-items:center;padding:0;display:grid;position:relative}.sq--light{background:var(--light)}.sq:focus-visible{outline:4px solid var(--focus-board);outline-offset:-4px;z-index:3}.sq>*{grid-area:1/1}.pc{width:88%;height:88%;filter:drop-shadow(0 2px 1.5px var(--shadow))}.pc__rim{fill:var(--black-rim)}.pc--red .pc__rim{fill:var(--red-rim)}.pc__body{fill:var(--black)}.pc--red .pc__body{fill:var(--red)}.pc__top{fill:var(--black-top)}.pc__ring{fill:none;stroke:var(--red-ring);stroke-width:7px}.pc--king .pc__ring{stroke-width:5px}.pc__crown{fill:var(--crown);stroke:var(--crown-edge);stroke-width:3px;stroke-linejoin:round}.mk{pointer-events:none;position:absolute;inset:0}.sq--sel{background:var(--sel-fill);box-shadow:inset 0 0 0 max(3px, calc(var(--sq) * .12)) var(--sel)}.sq--sel .pc{transform:scale(.84)}.mk--dest{border:max(4px, calc(var(--sq) * .11)) dashed var(--dest);border-radius:50%;inset:12%}.mk--hintdest{border-color:var(--hint);border-style:double;border-width:calc(var(--sq) * .14)}.mk--must{border:calc(var(--sq) * .08) dashed var(--must);border-radius:4px;inset:3px}.mk--movable{border:calc(var(--sq) * .08) dotted var(--sel);border-radius:4px;inset:3px}.mk--hint{border:calc(var(--sq) * .12) double var(--hint);inset:2px}.mk--last{--t:max(2px, calc(var(--sq) * .07));background:linear-gradient(var(--last), var(--last)) top left / 30% var(--t) no-repeat, linear-gradient(var(--last), var(--last)) top left / var(--t) 30% no-repeat, linear-gradient(var(--last), var(--last)) bottom right / 30% var(--t) no-repeat, linear-gradient(var(--last), var(--last)) bottom right / var(--t) 30% no-repeat;inset:3px}.mk--lastto{background:linear-gradient(var(--last), var(--last)) top left / 30% var(--t) no-repeat, linear-gradient(var(--last), var(--last)) top left / var(--t) 30% no-repeat, linear-gradient(var(--last), var(--last)) top right / 30% var(--t) no-repeat, linear-gradient(var(--last), var(--last)) top right / var(--t) 30% no-repeat, linear-gradient(var(--last), var(--last)) bottom left / 30% var(--t) no-repeat, linear-gradient(var(--last), var(--last)) bottom left / var(--t) 30% no-repeat, linear-gradient(var(--last), var(--last)) bottom right / 30% var(--t) no-repeat, linear-gradient(var(--last), var(--last)) bottom right / var(--t) 30% no-repeat}.sq--taken .pc{opacity:.45}.mk--x{width:76%;height:76%;inset:12%}.mk--x path{stroke:var(--taken);stroke-width:12px;stroke-linecap:round}.panel{grid-area:panel;gap:6px;display:grid}.status{text-align:center;min-height:2.7em;margin:0;padding:0 4px;font-size:1rem;font-weight:700;line-height:1.35}.choices{flex-wrap:wrap;justify-content:center;gap:8px;min-height:56px;display:flex}.choice{border:2px solid var(--btn-edge);background:var(--btn);min-width:5em;min-height:56px;color:var(--btn-ink);border-radius:14px;flex:1 1 0;padding:6px 12px;font-size:1rem;font-weight:700;line-height:1.15}.choice--to{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.choice--wide{flex:0 18em}.tools{grid-area:tools;grid-template-columns:repeat(3,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;align-content:center;justify-items:center;gap:2px;padding:4px;font-size:.9rem;font-weight:700;line-height:1.1;display:grid;position:relative}.tool svg{width:26px;height:26px}.tool--off{border-style:dashed}.tool--off svg,.tool--off span{opacity:.75}.tool__tag{background:var(--primary);color:var(--primary-ink);white-space:nowrap;border-radius:99px;padding:1px 7px;font-size:18px;font-weight:800;line-height:20px;display:none;position:absolute;top:-13px;left:50%;transform:translate(-50%)}.tool--tagged .tool__tag{display:block}@media (height<=760px){html[data-text=large] .bar__sub,html[data-text=xl] .bar__sub{display:none}}html[data-text=xl] .tool svg,html[data-text=xl] .bar__btn svg{display:none}html[data-text=xl] .bar__btn{font-size:.75rem}.bar__main{overflow-wrap:anywhere}@media (orientation:landscape) and (width>=700px){.play{grid-template:"bar bar""board panel"minmax(0,1fr)"board tools"/minmax(0,1fr) minmax(300px,380px);column-gap:18px}.panel{align-content:center}.status{font-size:1.1rem}}.sheet{z-index:1000;background:#0009;place-items:center;padding:12px;animation:.2s fade;display:grid;position:fixed;inset:0}.sheet__card{width:100%;max-width:500px;max-height:calc(100% - var(--safe-top) - var(--safe-bottom));background:var(--sheet);color:var(--sheet-ink);border-radius:22px;gap:12px;padding:20px 16px 14px;animation:.25s cubic-bezier(.2,.7,.3,1) rise;display:grid;overflow:auto;box-shadow:0 20px 60px #0006}.sheet__card:focus{outline:none}.sheet__card h2{font:800 1.45rem/1.15 var(--font-title);text-align:center}.sheet__card h3{font:800 1.15rem/1.2 var(--font-title)}.sheet__card p{color:var(--sheet-ink);text-align:center;margin:0}.sheet__card .sheet__big{font-size:1.15rem;font-weight:700}.sheet__card .btn:not(.btn--primary){background:var(--sheet-btn);border-color:var(--sheet-muted);color:var(--sheet-ink)}.sheet__card .btn--primary:focus-visible,.sheet__card .btn:focus-visible,.sheet__card .opt:focus-visible{outline-color:var(--sheet-ink)}.sheet__card .quote{font-style:italic}.sheet__card .label{text-align:left}.sheet__card .about-opp,.sheet__card .note-in-sheet{color:var(--sheet-muted)}.opts{grid-template-columns:1fr 1fr;gap:8px;display:grid}.opt{border:3px solid var(--sheet-muted);background:var(--sheet-btn);min-height:64px;color:var(--sheet-ink);border-radius:14px;align-content:center;padding:6px 8px;line-height:1.15;display:grid}.opt b{font-size:1.05rem}.opt span{font-size:1rem}.opt--on{border-color:var(--sheet-ink);background:var(--primary);color:var(--primary-ink);box-shadow:inset 0 0 0 3px var(--sheet)}.opt--on b:before{content:"✓ "}.readout{gap:8px;display:grid}.sheet__card .readout p{text-align:left}.howto{gap:14px;display:grid}.howto__aim{justify-items:center;gap:8px;display:grid}.howto__pic{justify-self:center;width:100%;height:auto;display:block}.howto__steps{gap:14px;margin:0;padding:0;list-style:none;display:grid}.howto__step{border-top:2px solid var(--sheet-btn);grid-template-columns:auto 1fr;grid-template-areas:"num text""pic pic";align-items:center;gap:10px 12px;padding-top:14px;display:grid}.howto__num{background:var(--primary);width:44px;height:44px;color:var(--primary-ink);font:800 1.3rem/1 var(--font-ui);border-radius:50%;grid-area:num;place-items:center;display:grid}.howto__step>.howto__pic{grid-area:pic}.sheet__card .howto__step p{text-align:left;grid-area:text}.sheet__card .howto__aim p{text-align:center}.howto__more ul{text-align:left;gap:8px;margin:0;padding-left:1.2em;display:grid}.won{gap:12px;display:grid}.won__art{justify-self:center;width:84px;height:84px}.won__art svg{width:100%;height:100%}.credits{text-align:center;color:var(--muted);margin:8px 0 0;font-size:1rem}.sheet__card .credits{color:var(--sheet-muted)}.credits a{min-width:56px;min-height:56px;color:inherit;padding:0 8px;line-height:56px;display:inline-block}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(30px)}}.page{max-width:640px;height:100%;padding:calc(var(--safe-top) + 6px) 16px calc(var(--safe-bottom) + 24px);flex-direction:column;gap:12px;margin:0 auto;display:flex;overflow-y:auto}.page>*{flex-shrink:0}.page h3{font:800 1.15rem/1.2 var(--font-title);color:var(--ink);margin-top:10px}.statset{gap:8px;display:grid}.statset dl{gap:8px;margin:0;display:grid}.statset dl div{border:2px solid var(--btn-edge);background:var(--btn);color:var(--btn-ink);border-radius:14px;padding:10px 14px;display:grid}.statset dt{font-weight:700}.statset dt small{font-size:1rem;font-weight:500}.statset dd{margin:0;font-size:1.15rem;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:1rem;font-weight:500;display:block}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle i{border:2px solid var(--btn-ink);border-radius:99px;width:60px;height:36px;position:relative}.toggle i:after{content:"";background:var(--btn-ink);border-radius:50%;width:26px;height:26px;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle input:checked+i{background:var(--primary);border-color: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}.choice-set{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-set__opt{min-height:56px;color:var(--btn-ink);background:0 0;border:0;border-radius:12px;padding:4px;font-size:1rem;font-weight:700;line-height:1.15}.choice-set__opt--on{background:var(--primary);color:var(--primary-ink)}.label{margin:4px 0 -4px;font-weight:700}.note{color:var(--muted);margin:0}.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(--primary);box-shadow:inset 0 0 0 3px var(--primary)}.look__sw{grid-row:span 2;display:flex}.look__sw i{border:1px solid #7f7f7f99;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{font-size:1rem}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.btn--apart{margin-top:28px}*{overflow-anchor:none}:root,[data-theme=cocoa]{--page:#4a2f27;--page-2:#3b241d;--ink:#fff6e6;--muted:#f0d9c4;--label:#f0d9c4;--frame:#2e1c16;--light:#f3e6cf;--dark:#9c6b47;--sel-fill:#9c6b47;--black:#1f1a17;--black-top:#8f857d;--black-rim:#1f1a17;--red:#c0392b;--red-ring:#fff1dc;--red-rim:#fff1dc;--crown:#ffd75e;--crown-edge:#3a1f17;--dest:#fff6e6;--sel:#ffd75e;--must:#ffd75e;--hint:#8fe6ff;--last:#fff6e6;--taken:#ffd75e;--btn:#6b4237;--btn-ink:#fff6e6;--btn-edge:#c9957e;--primary:#ffd75e;--primary-ink:#3a1f17;--sheet:#fff8ec;--sheet-ink:#2a1712;--sheet-muted:#5c4035;--sheet-btn:#f1e2cf;--focus:#fff;--focus-board:#fff;--shadow:#00000059}[data-theme=daylight]{--page:#f7ecdc;--page-2:#efdcc3;--ink:#2a1712;--muted:#5c4035;--label:#5c4035;--frame:#4a2f27;--light:#fffaf2;--dark:#b07d52;--sel-fill:#b07d52;--black:#1f1a17;--black-top:#8f857d;--black-rim:#1f1a17;--red:#b3231a;--red-ring:#fff1dc;--red-rim:#3a120b;--crown:#ffd75e;--crown-edge:#3a1f17;--dest:#fff;--sel:#0b1f5c;--must:#0b1f5c;--hint:#5c0b47;--last:#fff;--taken:#0b1f5c;--btn:#fff;--btn-ink:#2a1712;--btn-edge:#8a6a55;--primary:#7a2a1a;--primary-ink:#fff;--sheet:#fff;--sheet-ink:#2a1712;--sheet-muted:#5c4035;--sheet-btn:#f6e9d6;--focus:#0b1f5c;--focus-board:#0b1f5c;--shadow:#3c1e0a4d}[data-theme=night]{--page:#000;--page-2:#000;--ink:#fff;--muted:#e8e8e8;--label:#ffd23f;--frame:#ffd23f;--light:#1c1c1c;--dark:#fff;--sel-fill:#ffd23f;--black:#000;--black-top:#8a8a8a;--black-rim:#000;--red:#d0021b;--red-ring:#fff;--red-rim:#000;--crown:#ffd23f;--crown-edge:#000;--dest:#000;--sel:#000;--must:#000;--hint:#7a00c2;--last:#000;--taken:#000;--btn:#1c1c1c;--btn-ink:#fff;--btn-edge:#9a9a9a;--primary:#ffd23f;--primary-ink:#000;--sheet:#111;--sheet-ink:#fff;--sheet-muted:#e8e8e8;--sheet-btn:#2a2a2a;--focus:#38d1ff;--focus-board:#0047ff;--shadow:#0000}