@font-face{font-family:Atkinson Hyperlegible Next;src:url(/games/sunroom-spider/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;--t:1;--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}}[data-text=large]{--t:1.15;--cap-lines:3}[data-text=xl]{--t:1.3;--cap-lines:3}*{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(--table) 45%, var(--table-2));background-color:var(--table);color:var(--ink);font:calc(20px * var(--t)) / 1.4 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: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;font-size:calc(21px * var(--t));border-radius:16px;align-content:center;gap:2px;padding:10px 18px;font-weight:700;display:grid}.btn__title{font-size:calc(22px * var(--t));font-weight:700;line-height:1.2}.btn__sub{font-size:calc(18px * var(--t));font-weight:500;line-height:1.25}.btn--primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.btn--quiet{min-height:56px;font-size:calc(20px * var(--t));text-underline-offset:4px;background:0 0;border-color:#0000;text-decoration:underline}.btn--small{min-height:56px;font-size:calc(19px * var(--t));padding:8px 14px}.btn--chip{width:auto;min-width:56px;min-height:56px;font-size:calc(18px * var(--t));justify-content:center;align-items:center;gap:4px;padding:6px 14px 6px 10px;display:inline-flex}.btn--chip svg{flex:none;width:24px;height:24px}.btn:active,.tool:active{transform:scale(.97)}.home{height:100%;padding:calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 16px);flex-direction:column;gap:12px;display:flex;overflow-y:auto}.home>*{flex-shrink:0}.home__top{justify-content:space-between;gap:12px;display:flex}.home__brand{text-align:center;justify-items:center;gap:4px;margin:auto 0 0;display:grid}.home__mark{width:84px;height:74px;position:relative}.home__sun{fill:var(--sun);animation:1.2s cubic-bezier(.2,.7,.3,1) both sunrise;position:absolute;inset:0}.home__spider{width:36px;height:44px;color:var(--ink);fill:var(--ink);margin-left:-18px;animation:1.6s cubic-bezier(.3,.7,.3,1) both lower;position:absolute;top:-14px;left:50%}.home__sun svg,.home__spider svg{width:100%;height:100%}.logo{font:800 clamp(44px, 14vw, 72px) / 1 var(--font-ui);letter-spacing:-.01em;margin:0}.logo span{font:700 20px/1 var(--font-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--sun);margin-bottom:6px;padding-left:.3em;display:block}.home__tag{font-size:calc(20px * var(--t));color:var(--muted);margin:6px 0 0}.home__menu{gap:10px;width:100%;max-width:460px;margin:0 auto auto;display:grid}.home__level{font-size:calc(18px * var(--t));text-align:center;color:var(--muted);margin:-4px 0 0}.home__row{grid-template-columns:1fr 1fr;gap:8px;display:grid}@keyframes sunrise{0%{opacity:0;transform:translateY(24px)scale(.85)}}@keyframes lower{0%{transform:translateY(-40px)}}.play{height:100%;padding-top:var(--safe-top);grid-template:"bar""caption""table"1fr"stuck""tools"/1fr;display:grid}.bar{grid-area:bar;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:6px 8px 2px;display:grid}.page .bar{grid-template-columns:auto 1fr auto}.page .bar:after{content:"";width:56px}.bar h2{font-size:calc(24px * var(--t));text-align:center}.bar__title{min-width:0;line-height:1.2;display:grid}.bar__deal{font-size:calc(19px * var(--t));font-weight:700}.bar__sub{font-size:calc(18px * var(--t));color:var(--muted);font-weight:600}.caption{min-height:calc(var(--cap-lines,2) * 1.25 * 20px * var(--t) + 8px);font-size:calc(20px * var(--t));text-align:center;color:var(--ink);grid-area:caption;place-items:center;margin:0;padding:2px 12px;font-weight:600;line-height:1.25;display:grid;overflow:hidden}.caption--news{color:var(--hint);font-weight:700}.table-wrap{grid-area:table;min-height:0;position:relative}.table{touch-action:none;outline:none;position:absolute;inset:0}.table:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:8px}.tools{padding:6px 8px calc(var(--safe-bottom) + 8px);grid-area:tools;grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.tool{border:2px solid var(--btn-edge);background:var(--btn);min-height:68px;color:var(--btn-ink);font-size:calc(18px * var(--t));border-radius:16px;align-content:center;justify-items:center;gap:0;padding:4px 2px;font-weight:700;line-height:1.15;display:grid;position:relative}.tool svg{width:26px;height:26px;margin-bottom:1px}.tool__tag{font-size:max(18px, calc(14px * var(--t)));white-space:nowrap;font-weight:600;line-height:1.1}.tool--off{background:0 0;border-style:dashed}.stuck{background:var(--sheet);color:var(--sheet-ink);text-align:center;border-radius:16px;grid-area:stuck;gap:8px;margin:4px 8px 0;padding:10px 12px;display:grid;box-shadow:0 6px 24px #0000004d}.stuck[hidden]{display:none}.stuck p{margin:0;font-weight:700}.stuck__btns{grid-template-columns:1fr 1fr;gap:8px;display:grid}.stuck .btn:not(.btn--primary){background:var(--sheet-btn);border-color:var(--sheet-muted);color:var(--sheet-ink)}@media (orientation:landscape) and (height<=560px){.play{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);grid-template:"bar tools""caption tools""table tools"1fr"stuck tools"/1fr minmax(112px,18%)}.bar{padding-top:4px}.caption{font-size:calc(18px * var(--t));min-height:calc(var(--cap-lines,2) * 1.2 * 18px * var(--t) + 4px);padding:0 8px;line-height:1.2}.tools{padding:calc(var(--safe-top) + 8px) 8px calc(var(--safe-bottom) + 8px) 0;grid-template-columns:1fr;grid-auto-rows:1fr;align-content:stretch;max-height:100%}.tool{grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:6px;min-height:56px}.tool svg{grid-row:span 2}.tool span,.tool small{justify-self:start}}.slot{width:var(--cw);height:var(--ch);border:2px dashed var(--slot);border-radius:calc(var(--cw) * .12);background:var(--slot-fill);position:absolute;top:0;left:0}.slot--target{border:4px dashed var(--target)}.slot--cursor{outline:3px solid var(--focus);outline-offset:2px}.card{width:var(--cw);height:var(--ch);font-size:var(--cw);border-radius:calc(var(--cw) * .12);will-change:transform;touch-action:none;transition:transform .22s cubic-bezier(.2,.7,.3,1),opacity .22s;position:absolute;top:0;left:0}.card--gone{opacity:0;pointer-events:none}.card--still{transition:none}.card--fly{opacity:1;transition:transform 1s cubic-bezier(.3,0,.4,1.25)}.card__face,.card__back{border-radius:inherit;position:absolute;inset:0}.card__face{background:var(--card);box-shadow:var(--card-shadow), inset 0 0 0 1px var(--card-edge);overflow:hidden}.card__back{border:2px solid var(--back-edge);background:repeating-linear-gradient(45deg, var(--back) 0 5px, var(--back-2) 5px 7px);box-shadow:var(--card-shadow);display:none}.card--down .card__face{display:none}.card--down .card__back{display:block}.card--s,.card--c{color:var(--black)}.card--h,.card--d{color:var(--red)}.four-colour .card--d{color:var(--blue)}.four-colour .card--c{color:var(--green)}.card svg{fill:currentColor}.card__rank{font:800 calc(.46em * var(--k,1)) / 1 var(--font-ui);letter-spacing:-.04em;position:absolute;top:.03em;left:.06em}.card__rank--10{letter-spacing:-.1em}.card__suit{width:calc(.36em * var(--k,1));height:calc(.36em * var(--k,1));position:absolute;top:.06em;right:.06em}.card__pip{width:.6em;height:.6em;position:absolute;bottom:.12em;left:50%;transform:translate(-50%)}.card__court{height:1.1em;font:800 .5em/1 var(--font-ui);border:.08em solid;border-radius:.2em;place-items:center;display:grid;position:absolute;bottom:.26em;left:.4em;right:.4em}.table--narrow .card__rank{text-align:center;letter-spacing:-.03em;font-size:.68em;top:.04em;left:0;right:0}.table--narrow .card__rank--10{letter-spacing:-.11em;text-indent:-.08em;font-size:.66em}.table--narrow .card__suit{width:.5em;height:.5em;top:.66em;left:50%;right:auto;transform:translate(-50%)}.table--narrow .card__pip,.table--narrow .card__court{display:none}.table--narrow .card--tight .card__rank{text-align:left;font-size:calc(.64em * var(--k,1));letter-spacing:-.06em;top:0;left:.02em;right:auto}.table--narrow .card--tight .card__rank--10{font-size:calc(.54em * var(--k,1));letter-spacing:-.12em;text-indent:0}.table--narrow .card--tight .card__suit{width:calc(.4em * var(--k,1));height:calc(.4em * var(--k,1));top:.05em;left:auto;right:.02em;transform:none}.card--lift .card__face{box-shadow:0 10px 22px #00000059, inset 0 0 0 1px var(--card-edge)}.card--selected .card__face{box-shadow:inset 0 0 0 calc(var(--cw) * .07) var(--select), inset 0 0 0 calc(var(--cw) * .1) var(--black)}.card--target:after{content:"";border:4px dashed var(--target);border-radius:calc(var(--cw) * .16);pointer-events:none;position:absolute;inset:-4px}.card--cursor:after{content:"";border:3px solid var(--focus);border-radius:calc(var(--cw) * .15);pointer-events:none;position:absolute;inset:-3px}.card--nope>*{animation:.4s nope}.hinted .card__face{box-shadow:inset 0 0 0 calc(var(--cw) * .08) var(--hint), var(--card-shadow);animation:.9s ease-in-out 3 glow}.slot.hinted{border:4px solid var(--hint)}.card.hinted:before{content:"";z-index:-1;border:4px solid var(--hint);border-radius:calc(var(--cw) * .16);position:absolute;inset:-4px}@keyframes nope{20%,60%{transform:translate(-8%)}40%,80%{transform:translate(8%)}}@keyframes glow{50%{filter:brightness(1.08)}}.sheet{z-index:1000;background:#0000008c;place-items:center;padding:16px;animation:.2s fade;display:grid;position:fixed;inset:0}.sheet__card{width:100%;max-width:520px;max-height:calc(100% - var(--safe-top) - var(--safe-bottom));border:2px solid var(--sheet-muted);background:var(--sheet);color:var(--sheet-ink);border-radius:22px;gap:12px;padding:22px 18px 16px;animation:.25s cubic-bezier(.2,.7,.3,1) rise;display:grid;overflow:auto;box-shadow:0 20px 60px #0006}.sheet__card h2{font:800 calc(30px * var(--t)) / 1.15 var(--font-ui);text-align:center}.sheet__card p{color:var(--sheet-ink);text-align:center;margin:0}.sheet__card a{color:inherit}.sheet__card .sheet__big{font-size:calc(26px * var(--t));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--apart{margin-top:28px}.sheet__row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.howto{gap:14px;display:grid}.howto p,.howto li{text-align:left}.howto__aim,.howto__step{gap:8px;display:grid}.howto__steps{gap:20px;margin:0;padding:0;list-style:none;display:grid}.howto__step{position:relative}.howto__num{z-index:2;border:2px solid var(--primary-ink);background:var(--primary);width:40px;height:40px;color:var(--primary-ink);font:800 24px/1 var(--font-ui);border-radius:50%;place-items:center;display:grid;position:absolute;top:-6px;left:-6px}.howto__more ul{gap:10px;margin:0;padding-left:24px;display:grid}.hp{background:var(--table);color:var(--ink);border-radius:14px;justify-content:center;align-items:center;gap:6px;padding:14px 6px;display:flex}.hp--down{flex-direction:column}.hp__group{--cw:52px;--ch:73px;flex:none;font-size:52px;position:relative}.hp__group .card{touch-action:auto}.hp__stack{justify-items:center;gap:10px;display:grid}.hp__arrow{width:34px;height:34px;color:var(--hint);flex:none}.hp__arrow--down{transform:rotate(90deg)}.hp .tool{width:104px;font-size:max(20px, calc(18px * var(--t)))}.hp .hp__mark{box-shadow:0 0 0 4px var(--select), 0 0 0 7px var(--black)}.hp--tools{gap:16px}.about{gap:10px;display:grid}.about__mark{width:64px;height:64px;color:var(--sheet-ink);fill:var(--sheet-ink);justify-self:center}.about .about__by{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}[data-theme=daylight] .won__sun{fill:var(--primary)}.won__badges{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.won__badges span{background:var(--primary);color:var(--primary-ink);border-radius:99px;padding:4px 12px;font-weight:700}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(30px)}}.page{height:100%;padding:calc(var(--safe-top) + 4px) 16px calc(var(--safe-bottom) + 24px);flex-direction:column;gap:12px;max-width:640px;margin:0 auto;display:flex;overflow-y:auto}.page>*{flex-shrink:0}.page .bar{padding:8px 0}.page h3{font-size:calc(20px * var(--t));color:var(--ink);margin-top:12px}.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:10px 14px;display:grid}.statset dt{font-size:calc(18px * var(--t));color:var(--muted)}.statset dd{font-size:calc(28px * var(--t));margin:0;font-weight:800}.statset dd small{font-size:calc(18px * var(--t));color:var(--muted);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;position:relative}.toggle small{font-size:calc(18px * var(--t));color:var(--muted);font-weight:500;display:block}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle i{border:2px solid var(--btn-ink);background:0 0;border-radius:99px;width:64px;height:38px;transition:background .2s;position:relative}.toggle i:after{content:"";background:var(--btn-ink);border-radius:50%;width:26px;height:26px;transition:transform .2s;position:absolute;top:4px;left:4px}.toggle input:checked+i{background:var(--primary);border-color:var(--primary)}.toggle input:checked+i:after{background:var(--primary-ink);transform:translate(26px)}.toggle input:focus-visible+i{outline:3px solid var(--focus);outline-offset:2px}.choice{border:2px solid var(--btn-edge);background:var(--btn);border-radius:16px;grid-auto-columns:1fr;grid-auto-flow:column;gap:6px;padding:5px;display:grid}.choice__opt{min-height:56px;color:var(--btn-ink);font-size:calc(19px * var(--t));background:0 0;border:2px solid #0000;border-radius:12px;padding:4px 6px;font-weight:700;line-height:1.15}.choice__opt--on{background:var(--primary);border-color:var(--primary-ink);color:var(--primary-ink);text-underline-offset:5px;text-decoration:underline;text-decoration-thickness:3px}.note{font-size:calc(18px * var(--t));color:var(--muted);margin:0}.looks{gap:8px;display:grid}.look{background:var(--btn);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;min-height:72px;padding:10px 14px;display:grid}.look--on{border-color:var(--primary);border-width:4px}.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--on .look__name:after{content:" (chosen)";font-weight:600}.look__blurb{font-size:calc(18px * var(--t));color:var(--muted)}@media (prefers-reduced-motion:reduce){*,.card,.card--fly{transition-duration:10ms!important;animation:none!important}}.ad-ask{gap:12px;display:grid}*{overflow-anchor:none}:root,[data-theme=indigo]{--table:#343a5e;--table-2:#2b3050;--ink:#fffaf0;--muted:#d9dcf0;--card:#fffaf0;--card-edge:#6d7298;--card-shadow:0 1px 2px #00000073;--back:#8f5a3c;--back-2:#b77a52;--back-edge:#ffe6c7;--red:#9c1424;--black:#15172a;--blue:#1648b0;--green:#0b5a2e;--slot:#9aa0c8;--slot-ink:#d9dcf0;--slot-fill:#2f3455;--sun:#ffc46b;--hint:#ffc46b;--target:#ffc46b;--select:#ffc46b;--btn:#454c78;--btn-ink:#fffaf0;--btn-edge:#7a81b3;--primary:#ffc46b;--primary-ink:#1c1f36;--sheet:#fffaf0;--sheet-ink:#1c1f36;--sheet-muted:#474b66;--sheet-btn:#e7e6ef;--focus:#ffc46b}[data-theme=daylight]{--table:#e6e7f0;--table-2:#d9dbe8;--ink:#15172a;--muted:#3c4062;--card:#fff;--card-edge:#6b7092;--card-shadow:0 1px 2px #15172a4d;--back:#4a5185;--back-2:#6b73ab;--back-edge:#fff;--red:#9c1424;--black:#111320;--blue:#1146a6;--green:#0b5a2e;--slot:#6b7092;--slot-ink:#3c4062;--slot-fill:#dcdeea;--sun:#a35c00;--hint:#8f3f00;--target:#a34a00;--select:#a34a00;--btn:#fff;--btn-ink:#15172a;--btn-edge:#8e93b4;--primary:#2c3157;--primary-ink:#fff;--sheet:#fff;--sheet-ink:#15172a;--sheet-muted:#41455f;--sheet-btn:#e8e9f1;--focus:#8f3f00}[data-theme=contrast]{--table:#000;--table-2:#000;--ink:#fff;--muted:#fff;--card:#fff;--card-edge:#fff;--card-shadow:0 0 0 1px #000;--back:#3a3a3a;--back-2:#5a5a5a;--back-edge:#fff;--red:#a3001a;--black:#000;--blue:#0038c8;--green:#005a22;--slot:#fff;--slot-ink:#fff;--slot-fill:#000;--sun:#ffe500;--hint:#ffe500;--target:#ffe500;--select:#ffe500;--btn:#1a1a1a;--btn-ink:#fff;--btn-edge:#fff;--primary:#ffe500;--primary-ink:#000;--sheet:#000;--sheet-ink:#fff;--sheet-muted:#fff;--sheet-btn:#262626;--focus:#ffe500}