@font-face{font-family:Atkinson Hyperlegible Next;src:url(/games/sunroom-eights/play/fonts/atkinson-hyperlegible-next.woff2)format("woff2");font-weight:200 800;font-display:swap}@font-face{font-family:Fredoka;src:url(/games/sunroom-eights/play/fonts/fredoka.woff2)format("woff2");font-weight:300 700;font-display:swap}:root{--font-ui:"Atkinson Hyperlegible Next", system-ui, sans-serif;--font-title:"Fredoka", "Atkinson Hyperlegible Next", sans-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(--table) 45%, var(--table-2));background-color:var(--table);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:860px;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:12px 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--huge{min-height:96px;font-size:30px}.btn:active,.tool:active,.icon-btn:active,.pile--draw: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:16px;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) + 20px);flex-direction:column;justify-content:space-between;gap:16px;display:flex;position:relative;overflow-y:auto}.home__settings{top:calc(var(--safe-top) + 14px);position:absolute;right:16px}.home__brand{text-align:center;justify-items:center;gap:4px;margin-top:3vh;display:grid}.home__art{width:210px;height:170px;animation:1.2s cubic-bezier(.2,.7,.3,1) both sunrise;position:relative}.home__sun{width:116px;height:116px;fill:var(--sun);position:absolute;top:0;right:0}.home__sun svg{width:100%;height:100%;animation:60s linear infinite spin}.home__card{width:96px;height:134px;font-size:96px;position:absolute;top:30px;left:30px;transform:rotate(-10deg)}.logo{font:600 clamp(44px, 15vw, 64px)/1 var(--font-title);letter-spacing:-.01em;margin:0}.logo span{font:600 clamp(30px, 10vw, 40px)/1 var(--font-title);letter-spacing:.08em;color:var(--sun);margin-top:4px;display:block}.home__tag{max-width:24em;color:var(--muted);margin:10px 0 0;font-size:clamp(17px,5vw,20px)}.home__menu{gap:12px;width:100%;max-width:440px;margin:0 auto;display:grid}.home__row{grid-template-columns:1fr 1fr;display:grid}@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;overflow:hidden}.bar{grid-template-columns:56px 1fr 56px;align-items:center;gap:8px;padding:6px 10px 2px;display:grid}.bar h2{text-align:center;font-size:24px}.bar__title{text-align:center;line-height:1.15;display:grid}.bar__main{font:600 20px/1.15 var(--font-title)}.bar__sub{color:var(--muted);font-size:16px;font-weight:600}.seats{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:6px;padding:4px 10px 0;display:grid}.seat{border:3px solid var(--seat-edge);background:var(--seat);border-radius:16px;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:6px;min-width:0;padding:3px 6px 2px;line-height:1.15;display:grid;position:relative}.seat .badge{width:24px;height:24px}.badge__shape{fill:var(--ink)}.badge text{font:700 54px var(--font-title);fill:var(--seat)}.seat__name{text-overflow:ellipsis;white-space:nowrap;font-size:clamp(15px,4.6vw,18px);font-weight:800;overflow:hidden}.seat__count{color:var(--muted);white-space:nowrap;grid-column:1/-1;font-size:17px;font-weight:600}.seat__count b{color:var(--ink);font-size:22px;font-weight:800}.seat--low .seat__count{color:var(--ink)}.seat--low .seat__count:after{content:" !";font-weight:800}.seat--turn{border-color:var(--turn);box-shadow:0 0 0 2px var(--turn);border-width:4px}.seat__tag{background:var(--turn);color:var(--turn-ink);border-radius:99px;padding:0 8px;font-size:14px;font-weight:800;line-height:20px;position:absolute;top:-11px;right:6px}.seat__tag:empty{display:none}.middle{height:calc(var(--pw,84px) * 1.4 + 10px);flex:none;justify-content:center;align-items:center;gap:18px;padding:6px 10px 4px;display:flex}.middle--left{flex-direction:row-reverse}.pile{width:var(--pw,84px);height:calc(var(--pw,84px) * 1.4);font-size:var(--pw,84px);position:relative}.pile--draw{background:0 0;border:0;border-radius:.09em;padding:0}.pile--draw .back{position:absolute;inset:0}.pile__label{background:var(--card);width:92%;color:var(--black);font:800 15px/1.1 var(--font-ui);text-align:center;border-radius:10px;padding:3px 4px;position:absolute;bottom:8%;left:50%;transform:translate(-50%)}.pile--empty .back{visibility:hidden}.pile--empty{border:3px dashed var(--seat-edge)}.pile--top .face{position:absolute;inset:0}.called{text-align:center;justify-items:center;gap:2px;min-width:84px;font-size:16px;font-weight:800;display:grid}.called svg{background:var(--card);border-radius:50%;width:46px;height:46px;padding:6px}.called--h svg,.called--d svg{fill:var(--red)}.called--s svg,.called--c svg{fill:var(--black)}.called[hidden]{display:none}.called--pickup b{background:var(--turn);width:54px;height:54px;color:var(--turn-ink);border-radius:14px;place-items:center;font-size:26px;display:grid}.dir{color:var(--muted);justify-items:center;font-size:16px;font-weight:700;display:grid}.dir b{color:var(--ink);font-size:38px;line-height:1}.status{text-align:center;flex:none;place-items:center;height:64px;margin:0;padding:0 12px;font-size:16px;font-weight:700;line-height:1.2;display:grid;overflow:hidden}.status--you{color:var(--hint)}.hand{flex:1;min-height:0;margin:0 10px;position:relative}.hand__label{color:var(--muted);font-size:15px;font-weight:700;position:absolute;top:-2px;left:0}.hcard{width:var(--cw);height:calc(var(--cw) * 1.4);font-size:var(--cw);touch-action:manipulation;background:0 0;border:0;border-radius:.09em;padding:0;transition:transform .22s cubic-bezier(.2,.7,.3,1);position:absolute;top:0;left:0}.hcard .face{position:absolute;inset:0}.hcard--ok .face{box-shadow:0 0 0 .05em var(--hint), 0 0 0 .075em var(--table), var(--card-shadow)}.hcard--ok{margin-top:-.05em}.hcard--hint .face,.pile--draw.hinted .back{box-shadow:0 0 0 .07em var(--hint), 0 0 .25em .06em var(--hint);animation:.9s ease-in-out 3 glow}.hcard--nope .face{animation:.4s nope}.hcard--new .face{animation:.45s cubic-bezier(.2,.7,.3,1) drawn}@keyframes drawn{0%{opacity:0;transform:translateY(-40%)scale(.8)}}@keyframes nope{20%,60%{transform:translate(-6%)}40%,80%{transform:translate(6%)}}@keyframes glow{50%{box-shadow:0 0 0 .09em var(--hint), 0 0 .4em .1em var(--hint)}}.tools{padding:6px 10px calc(var(--safe-bottom) + 6px);grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.tool{border:2px solid var(--btn-edge);background:var(--btn);min-height:62px;color:var(--btn-ink);border-radius:16px;align-content:center;justify-items:center;gap:1px;padding:3px 2px;font-size:15px;font-weight:700;line-height:1.1;display:grid;position:relative}.tool svg{width:24px;height:24px}.tool__tag{display:none}.tool--tagged .tool__tag{background:var(--primary);color:var(--primary-ink);white-space:nowrap;border-radius:999px;padding:1px 7px;font-size:13px;font-weight:800;line-height:18px;display:block;position:absolute;top:-10px;right:2px}.face,.back{box-shadow:var(--card-shadow), inset 0 0 0 1px var(--card-edge);border-radius:.09em;display:block}.face{background:var(--card);color:var(--black);position:absolute;inset:0}.back{position:absolute;inset:0}.face--h,.face--d{color:var(--red)}.four-colour .face--d{color:var(--blue)}.four-colour .face--c{color:var(--green)}.face svg{fill:currentColor}.face__rank{width:.42em;font:800 .4em/1 var(--font-ui);letter-spacing:-.07em;text-align:center;position:absolute;top:.03em;left:.05em}.face__suit{width:.3em;height:.3em;position:absolute;top:.45em;left:.06em}.face__pip{width:.56em;height:.56em;position:absolute;bottom:.1em;right:.08em}.face__court{width:1.19em;height:1.48em;font:600 .42em/1 var(--font-title);border:.085em solid;border-radius:.2em;place-items:center;display:grid;position:absolute;bottom:.19em;right:.19em}.face__wild{width:.34em;height:.34em;position:absolute;top:.04em;right:.04em}.play--xl .face__rank{width:.48em;font-size:.46em}.play--xl .face__suit{width:.34em;height:.34em;top:.5em}.back{background:repeating-linear-gradient(45deg, transparent 0 .06em, #ffffff1f .06em .12em), linear-gradient(var(--back), var(--back-2));outline:.035em solid var(--card);outline-offset:-.07em;place-items:center;display:grid}.back svg{width:56%;fill:var(--back-ink)}.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:460px;max-height:calc(100% - var(--safe-top) - var(--safe-bottom));background:var(--sheet);color:var(--sheet-ink);border-radius:22px;gap:12px;padding:22px 18px 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:600 30px/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-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}.sheet__card .quote{color:var(--sheet-ink);font-style:italic}.suits{grid-template-columns:1fr 1fr;gap:10px;display:grid}.suit-btn{background:var(--sheet-btn);min-height:112px;color:var(--sheet-ink);border:0;border-radius:18px;justify-items:center;gap:2px;padding:10px 6px;font-size:21px;font-weight:800;display:grid}.suit-btn svg{width:52px;height:52px}.suit-btn--h svg,.suit-btn--d svg{fill:var(--red)}.suit-btn--s svg,.suit-btn--c svg{fill:var(--sheet-ink)}.suit-btn small{font-size:16px;font-weight:600}.suit-btn--best{box-shadow:inset 0 0 0 4px var(--sheet-ink)}.readout{gap:8px;display:grid}.sheet__card .readout p{color:var(--sheet-ink);text-align:left;font-size:20px}.howto ol{gap:10px;margin:0;padding-left:24px;font-size:19px;display:grid}.howto{gap:14px;display:grid}.sheet__card .howto__lead{color:var(--sheet-ink);font-weight:800}.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__sun--other{fill:var(--sheet-muted)}.score{gap:6px;margin:0;display:grid}.score div{background:var(--sheet-btn);border-radius:12px;justify-content:space-between;padding:8px 14px;font-size:19px;font-weight:700;display:flex}.score dd{margin:0}@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;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:17px}.statset{gap:8px;display:grid}.statset dl{grid-template-columns:1fr 1fr;gap:8px;margin:0;display:grid}.statset dl div{border:2px solid var(--btn-edge);background:var(--btn);border-radius:14px;padding:12px 14px;display:grid}.statset dt{color:var(--muted);font-size:16px}.statset dd{margin:0;font-size:28px;font-weight:800}.statset dd small{color:var(--muted);font-size:17px;font-weight:600}.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{color:var(--btn-ink);font-size:16px;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:60px;height:36px;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: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{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;padding:4px;font-size:18px;font-weight:700;line-height:1.15}.choice__opt--on{background:var(--primary);color:var(--primary-ink)}.label{margin:4px 0 -4px;font-size:18px;font-weight:700}.note{color:var(--muted);margin:0;font-size:17px}.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 2px 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:16px}.credits{text-align:center;color:var(--muted);margin:8px 0 0;font-size:15px}.credits a{color:inherit}@media (prefers-reduced-motion:reduce){.hcard{transition-duration:10ms!important}.home__sun svg{animation:none}}:root,[data-theme=parlour]{--table:#7a2619;--table-2:#651d12;--ink:#fff6e6;--muted:#f6dcc6;--seat:#64200f;--seat-edge:#e48a70;--card:#fffaf0;--card-edge:#3c140a40;--card-shadow:0 2px 4px #00000059;--red:#b3231a;--black:#1e1a17;--blue:#1f55b8;--green:#17723a;--back:#f2b84b;--back-2:#e09f2c;--back-ink:#7a2619;--sun:#ffc94a;--hint:#ffd75e;--turn:#ffd75e;--turn-ink:#3a120b;--btn:#8f3324;--btn-ink:#fff6e6;--btn-edge:#e48a70;--primary:#ffc94a;--primary-ink:#3a120b;--sheet:#fff8ec;--sheet-ink:#2a1510;--sheet-muted:#5a3a2f;--sheet-btn:#f3e3cc;--focus:#fff}[data-theme=daylight]{--table:#fbefd9;--table-2:#f3e0c0;--ink:#2a1510;--muted:#5a3a2f;--seat:#fff;--seat-edge:#9c7550;--card:#fff;--card-edge:#50281466;--card-shadow:0 2px 4px #5028144d;--red:#b3231a;--black:#1a1a1a;--blue:#1b4fae;--green:#136b34;--back:#b8301d;--back-2:#9c2616;--back-ink:#ffe3a8;--sun:#c27a0e;--hint:#b8301d;--turn:#b8301d;--turn-ink:#fff;--btn:#fff;--btn-ink:#2a1510;--btn-edge:#9c7550;--primary:#a82a18;--primary-ink:#fff;--sheet:#fff;--sheet-ink:#2a1510;--sheet-muted:#5a3a2f;--sheet-btn:#f6e9d6;--focus:#1b4fae}[data-theme=night]{--table:#0c0a09;--table-2:#000;--ink:#fff;--muted:#ece2d8;--seat:#1c1816;--seat-edge:#8a7c72;--card:#fff;--card-edge:transparent;--card-shadow:0 0 0 1px #000;--red:#c8101c;--black:#000;--blue:#0d4fd6;--green:#00792f;--back:#ff6f4f;--back-2:#f0553a;--back-ink:#0c0a09;--sun:#ffd23f;--hint:#ffd23f;--turn:#ffd23f;--turn-ink:#000;--btn:#221d1a;--btn-ink:#fff;--btn-edge:#8a7c72;--primary:#ffd23f;--primary-ink:#000;--sheet:#1b1715;--sheet-ink:#fff;--sheet-muted:#ece2d8;--sheet-btn:#332b27;--focus:#38d1ff}