@font-face{font-family:Atkinson Hyperlegible Next;src:url(/games/sunroom-chess/play/fonts/atkinson-hyperlegible-next.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);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--body:20px;--status-last:18px;--status-now:21px}body.text-xl{--body:23px;--status-last:21px;--status-now:24px}*{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(--page) 45%, var(--page-2));background-color:var(--page);color:var(--ink);font:var(--body) / 1.45 var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#app{max-width:1100px;height:100%;margin:0 auto}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:4px solid var(--focus);outline-offset:2px}h1,h2,h3{margin:0;font-weight:800}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.pc{display:block;overflow:visible}.pc path,.pc circle{stroke-linejoin:round;stroke-linecap:round}.pc__halo path{fill:var(--bp-halo);stroke:var(--bp-halo);stroke-width:11px}.pc__body path{stroke-width:5.5px}.pc--w .pc__body path{fill:var(--wp);stroke:var(--wp-edge)}.pc--b .pc__body path{fill:var(--bp);stroke:var(--bp-detail);stroke-width:3.5px}.pc__line path{fill:none;stroke-width:5px}.pc--w .pc__line path{stroke:var(--wp-edge)}.pc--b .pc__line path{stroke:var(--bp-detail)}.pc--w .pc__dot circle{fill:var(--wp-edge)}.pc--b .pc__dot circle{fill:var(--bp-detail)}.btn{border:2px solid var(--btn-edge);background:var(--btn);width:100%;min-height:60px;color:var(--btn-ink);text-align:center;border-radius:16px;place-content:center;gap:2px;padding:8px 14px;font-size:21px;font-weight:700;line-height:1.2;display:grid;position:relative}.btn__title{font-size:22px;font-weight:800}.btn__title small{font-size:18px;font-weight:600}.btn__sub{font-size:17px;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--small{min-height:56px;font-size:19px}.btn:active,.tool:active,.icon-btn:active,.sq:active{transform:scale(.97)}.icon-btn{border:2px solid var(--btn-edge);background:var(--btn);min-width:76px;min-height:56px;color:var(--btn-ink);border-radius:14px;align-content:center;place-items:center;gap:1px;padding:4px 6px;font-size:17px;font-weight:700;line-height:1.1;display:grid}.icon-btn svg{width:24px;height:24px}.btn__tag{display:none}.btn--tagged .btn__tag{background:var(--primary);color:var(--primary-ink);white-space:nowrap;border-radius:99px;padding:1px 8px;font-size:18px;font-weight:800;line-height:20px;display:block;position:absolute;top:-13px;left:50%;transform:translate(-50%)}.home{max-width:560px;height:100%;padding:calc(var(--safe-top) + 12px) 20px calc(var(--safe-bottom) + 18px);flex-direction:column;justify-content:space-between;margin:0 auto;display:flex;position:relative;overflow-y:auto}.home__top{justify-content:flex-end;display:flex}.home__brand{text-align:center;justify-items:center;gap:4px;display:grid}.symbol{background:radial-gradient(circle, var(--sun) 0 58%, transparent 59%);border-radius:50%;justify-self:center;place-items:center;width:116px;height:116px;display:grid}.symbol .pc{width:84px;height:84px}.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:.3em;text-transform:uppercase;color:var(--muted);margin-top:8px;display:block}.home__tag{max-width:20em;font-size:var(--body);color:var(--muted);margin:12px 0 0}.home__menu{gap:12px;width:100%;max-width:440px;margin:16px auto 0;display:grid}.home__row,.sheet__row,.settings__row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.play{max-width:760px;height:100%;padding:var(--safe-top) 8px calc(var(--safe-bottom) + 8px);flex-direction:column;gap:4px;margin:0 auto;display:flex}.play>.bar{order:0}.play>.status{order:1}.play>.board{order:3}.play>.tools{order:5}.bar{grid-template-columns:76px 1fr 76px;align-items:center;gap:8px;padding:6px 2px 0;display:grid}.bar h2{text-align:center;font-size:24px}.bar>span:last-child:empty{width:76px}.bar__title{text-align:center;justify-items:center;line-height:1.15;display:grid}.bar .bar__main{font-size:23px}.bar__sub{color:var(--muted);font-variant-numeric:tabular-nums;font-size:18px;font-weight:600}.status{text-align:center;align-content:center;gap:2px;min-height:58px;margin:0;padding:0 4px;line-height:1.25;display:grid}.status p{margin:0}.status__last{font-size:var(--status-last);color:var(--muted);font-weight:600}.status__last:empty{display:none}.status__now{font-size:var(--status-now);color:var(--ink);font-weight:800}.status--hint .status__last,.status--hint .status__now{color:var(--hint-ink)}.taken{min-height:30px;color:var(--muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 6px;font-size:18px;font-weight:600;display:flex}.taken__grp{align-items:center;display:inline-flex}.taken__grp .pc{width:28px;height:28px}.taken__grp b{color:var(--ink);margin-left:1px}.taken__lead{border:2px solid var(--btn-edge);color:var(--ink);border-radius:99px;padding:0 8px}.board{flex-direction:column;flex:1 1 0;justify-content:center;gap:4px;min-height:0;display:flex;position:relative}.board__host{place-items:center;display:grid;position:relative}.bd{grid-template-columns:var(--lab,24px) calc(var(--sq,40px) * 8);grid-template-rows:calc(var(--sq,40px) * 8) var(--lab,24px);gap:2px 4px;display:grid}.bd__ranks{grid-template-rows:repeat(8, var(--sq,40px));place-items:center;display:grid}.bd__files{grid-column:2;grid-template-columns:repeat(8, var(--sq,40px));place-items:center;display:grid}.bd__ranks span,.bd__files span{font-size:max(18px, calc(var(--lab,24px) * .86));color:var(--label);font-weight:800;line-height:1}.bd__corner{display:none}.bd__frame{box-shadow:0 0 0 3px var(--frame);border-radius:2px;position:relative}.bd__grid{flex-direction:column;display:flex}.bd__row{display:flex}.sq{width:var(--sq,40px);height:var(--sq,40px);background:var(--sq-light);touch-action:manipulation;border:0;border-radius:0;margin:0;padding:0;position:relative}.sq--dark{background:var(--sq-dark)}.sq--last.sq--light{background:var(--last-light)}.sq--last.sq--dark{background:var(--last-dark)}.sq .pc{z-index:1;pointer-events:none;width:90%;height:90%;position:absolute;inset:5%}.sq--moving{z-index:3}.sq--threat:before{content:"";background:repeating-linear-gradient(45deg, var(--threat) 0 2.5px, transparent 2.5px 10px);position:absolute;inset:0}.sq--sel{box-shadow:inset 0 0 0 max(4px, calc(var(--sq,40px) * .09)) var(--sel);background:var(--sel-fill)!important}.sq__dot{z-index:2;background:var(--dot);width:36%;height:36%;box-shadow:0 0 0 3px var(--dot-ring);pointer-events:none;border-radius:50%;position:absolute;top:32%;left:32%}.sq__ring{z-index:2;border:max(4px, calc(var(--sq,40px) * .1)) solid var(--dot);box-shadow:0 0 0 2px var(--dot-ring), inset 0 0 0 2px var(--dot-ring);pointer-events:none;border-radius:50%;position:absolute;inset:3%}.sq--check{box-shadow:inset 0 0 0 max(4px, calc(var(--sq,40px) * .1)) var(--check), inset 0 0 0 max(7px, calc(var(--sq,40px) * .16)) var(--bp-halo)}.sq:focus-visible{z-index:4;outline:4px solid var(--focus);outline-offset:-2px;box-shadow:inset 0 0 0 7px var(--page)}.bd__arrow{z-index:3;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.bd__arrow path{stroke-linecap:round;stroke-linejoin:round}.ar__edge path{fill:var(--hint-edge);stroke:var(--hint-edge);stroke-width:.3px}.ar__fill path{fill:var(--hint);stroke:var(--hint);stroke-width:.15px}.ar__edge path:first-child,.ar__fill path:first-child{fill:none}.tools{grid-template-columns:repeat(3,1fr);gap:8px;padding-top:4px;display:grid}.tool{border:2px solid var(--btn-edge);background:var(--btn);min-height:60px;color:var(--btn-ink);border-radius:16px;justify-content:center;align-items:center;gap:8px;padding:4px 6px;font-size:20px;font-weight:800;display:flex;position:relative}.tool svg{flex:none;width:26px;height:26px}.tool:disabled{border-style:dashed}.sheet{z-index:10;padding:calc(var(--safe-top) + 12px) 12px calc(var(--safe-bottom) + 12px);background:#0009;place-items:center;animation:.2s fade;display:grid;position:fixed;inset:0}.sheet__card{background:var(--sheet);width:100%;max-width:520px;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}.sheet__card:focus{outline:none}.sheet__card h2{text-align:center;font-size:27px;line-height:1.15}.sheet__card h3{margin-top:6px;font-size:22px}.sheet__card p{color:var(--sheet-ink);text-align:center;margin:0}.sheet__card .note{color:var(--sheet-muted)}.sheet__card .sheet__big{font-size:24px;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 .choice{background:var(--sheet-btn)}.sheet__card .choice__opt{color:var(--sheet-ink)}.sheet__card .choice__opt--on{background:var(--sheet-ink);color:var(--sheet)}.choice--sides{grid-template-columns:auto 1fr 1fr;grid-auto-flow:row;align-items:center}.choice__label{padding:0 6px;font-weight:800}.choice--sides .choice__opt{justify-content:center;align-items:center;gap:4px;display:flex}.choice--sides .pc{width:34px;height:34px}.btn--opp{text-align:left;place-content:center start;justify-items:start}.promo{grid-template-columns:1fr 1fr;gap:10px;display:grid}.promo__btn{border:3px solid var(--sheet-ink);background:var(--sq-light);color:#1b2010;border-radius:16px;justify-items:center;gap:2px;min-height:120px;padding:8px;font-size:22px;font-weight:800;display:grid}[data-theme=night] .promo__btn{color:#000}.promo__btn .pc{width:76px;height:76px}.mv{-webkit-user-select:text;user-select:text;gap:4px;max-height:44vh;margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.mv li{border-bottom:1px solid var(--sheet-btn);grid-template-columns:2.4em 1fr;gap:6px;padding:6px 4px;display:grid}.mv__n{font-variant-numeric:tabular-nums;font-weight:800}.howto{--w:min(100vw - 56px, 488px);gap:14px;display:grid}.howto__aim{justify-items:center;gap:8px;display:grid}.sheet__card .howto__aim p{text-align:center}.howto__pic{--hsq:clamp(30px, calc((var(--w) - 64px) / var(--n)), 60px);justify-content:center;align-items:center;gap:6px;display:flex}.howto__arrow{width:44px;height:44px;fill:var(--sheet-ink);flex:none}.hb{--sq:var(--hsq);grid-template-columns:repeat(var(--cols), var(--hsq));grid-auto-rows:var(--hsq);box-shadow:0 0 0 3px var(--frame);margin:3px;display:grid}.hb__sq{background:var(--sq-light);position:relative}.hb__sq.sq--dark{background:var(--sq-dark)}.hb__sq .pc{width:90%;height:90%;position:absolute;inset:5%}.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(--sheet-ink);width:44px;height:44px;color:var(--sheet);font:800 1.3rem/1 var(--font-ui);border-radius:50%;grid-area:num;place-items:center;display:grid}.howto__step>.howto__pic,.howto__step>.howto__pieces{grid-area:pic}.sheet__card .howto__step p{text-align:left;grid-area:text}.howto__pieces{--hsq:clamp(30px, calc((var(--w) - 36px) / 6), 56px);grid-template-columns:auto auto;justify-content:center;gap:12px 18px;display:grid}.howto__piece{justify-items:center;gap:6px;margin:0;display:grid}.howto__piece figcaption{font-size:1rem;font-weight:800}.howto__more ul{text-align:left;gap:8px;margin:0;padding-left:1.2em;display:grid}.won,.about{gap:10px;display:grid}.about__by{font-weight:800}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(30px)}}.page{max-width:680px;height:100%;padding:calc(var(--safe-top) + 4px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 24px) calc(var(--safe-left) + 16px);flex-direction:column;gap:12px;margin:0 auto;display:flex;overflow-y:auto}.page>*{flex-shrink:0}.page .bar{padding:8px 0}.page h3{letter-spacing:.1em;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 h3{text-transform:none;letter-spacing:0;color:var(--ink);font-size:21px}.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:18px}.statset dd{font-variant-numeric:tabular-nums;margin:0;font-size:28px;font-weight:800}.statset dd small{color:var(--muted);font-size:18px;font-weight:600}.toggle{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{color:var(--btn-ink);font-size:17px;font-weight:500;display:block}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle i{background:var(--page);width:60px;height:36px;box-shadow:inset 0 0 0 2px var(--btn-edge);border-radius:99px;transition:background .2s;position:relative}.toggle i:after{content:"";background:var(--ink);border-radius:50%;width:26px;height:26px;transition:transform .2s;position:absolute;top:5px;left:5px}.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{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:19px;font-weight:700;line-height:1.15}.choice__opt--on{background:var(--primary);color:var(--primary-ink);box-shadow:inset 0 0 0 3px var(--primary-ink)}.note{color:var(--muted);margin:0;font-size:18px}.note--box{background:var(--btn);color:var(--btn-ink);border-radius:14px;padding:12px 14px}.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 #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:17px}.credits{text-align:center;color:var(--muted);margin:8px 0 0;font-size:17px}.credits a{color:inherit}@media (prefers-reduced-motion:reduce){.sheet,.sheet__card{animation:none}.toggle i,.toggle i:after{transition:none}}@media (width>=900px) and (aspect-ratio>=5/4){.play{max-width:1100px;padding:calc(var(--safe-top) + 8px) 24px 16px;grid-template-rows:auto auto auto 1fr auto auto;grid-template-columns:1fr minmax(300px,380px);column-gap:24px;display:grid}.play>.bar{grid-area:1/2}.play>.status{grid-area:2/2;min-height:140px}.play>.tools{grid-area:3/2;grid-template-columns:1fr}.play>.board{grid-area:1/1/7}}.sheet__card .btn--primary{background:var(--sheet-ink);border-color:var(--sheet-ink);color:var(--sheet)}.moveto{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;display:grid}.moveto__btn .btn__title{font-size:1.3em}.tool--go{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.tool span{white-space:nowrap}.btn--apart{margin-top:28px}*{overflow-anchor:none}:root,[data-theme=olive]{--page:#2e3b19;--page-2:#232d12;--ink:#fbf8ea;--muted:#dfe4cf;--label:#f3f1e2;--sun:#e9d27a;--btn:#3f5122;--btn-ink:#fbf8ea;--btn-edge:#9cb072;--primary:#fbf8ea;--primary-ink:#2e3b19;--sheet:#fbf8ea;--sheet-ink:#1f2810;--sheet-muted:#47522f;--sheet-btn:#e9e6d3;--focus:#f2c94c;--hint-ink:#ffd29a;--frame:#161d0b;--sq-light:#f3efdb;--sq-dark:#a7b88c;--wp:#fffdf4;--wp-edge:#1b2010;--bp:#262c1a;--bp-detail:#efe9cf;--bp-halo:#f3efdb;--dot:#1d3b6e;--dot-ring:#fbf8ea;--sel:#1d3b6e;--sel-fill:#f1d873;--last-light:#e3dc9e;--last-dark:#c4c57a;--hint:#8f3307;--hint-edge:#fffaf0;--check:#b3261e;--threat:#a3221b}[data-theme=daylight]{--page:#f5f2e6;--page-2:#ebe6d2;--ink:#1e2610;--muted:#444e30;--label:#1e2610;--sun:#b08300;--btn:#fff;--btn-ink:#1e2610;--btn-edge:#6b7952;--primary:#1e2610;--primary-ink:#fff;--sheet:#fff;--sheet-ink:#1e2610;--sheet-muted:#444e30;--sheet-btn:#eeece2;--focus:#1d4fa0;--hint-ink:#8a3208;--frame:#3b4724;--sq-light:#fbf8ec;--sq-dark:#b3c39a;--wp:#fff;--wp-edge:#1b2010;--bp:#262c1a;--bp-detail:#efe9cf;--bp-halo:#fbf8ec;--dot:#1d3b6e;--dot-ring:#fff;--sel:#1d3b6e;--sel-fill:#f1d873;--last-light:#e6df9f;--last-dark:#c7c87c;--hint:#a8400c;--hint-edge:#fffaf0;--check:#b3261e;--threat:#a3221b}[data-theme=night]{--page:#000;--page-2:#000;--ink:#fff;--muted:#e6e6e6;--label:#fff;--sun:#ffe14d;--btn:#161616;--btn-ink:#fff;--btn-edge:#a0a0a0;--primary:#ffe14d;--primary-ink:#000;--sheet:#121212;--sheet-ink:#fff;--sheet-muted:#e0e0e0;--sheet-btn:#2a2a2a;--focus:#38d1ff;--hint-ink:#ffe14d;--frame:#fff;--sq-light:#fff;--sq-dark:#8f8f8f;--wp:#fff;--wp-edge:#000;--bp:#000;--bp-detail:#fff;--bp-halo:#fff;--dot:#000;--dot-ring:#ffe14d;--sel:#000;--sel-fill:#ffe14d;--last-light:#bfe3ff;--last-dark:#6aa3d4;--hint:#c4006f;--hint-edge:#fff;--check:#d0021b;--threat:#000}
