@font-face{font-family:Atkinson Hyperlegible Next;src:url(/games/sunroom-mahjong/play/fonts/atkinson-hyperlegible-next.woff2)format("woff2");font-weight:200 800;font-display:swap}@font-face{font-family:Caprasimo;src:url(/games/sunroom-mahjong/play/fonts/caprasimo.woff2)format("woff2");font-weight:400;font-display:swap}:root{--font-ui:"Atkinson Hyperlegible Next", system-ui, sans-serif;--font-title:"Caprasimo", Georgia, 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) 40%, 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}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;border-radius:16px;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--small{min-height:52px;padding:8px 16px;font-size:18px}.btn:active,.tool:active,.icon-btn:active{transform:scale(.97)}.icon-btn{background:var(--btn);width:56px;height:56px;color:var(--btn-ink);border:0;border-radius:14px;place-items:center;padding:0;display:grid}.icon-btn svg{width:28px;height:28px}.home{height:100%;padding:calc(var(--safe-top) + 24px) 20px calc(var(--safe-bottom) + 20px);flex-direction:column;justify-content:space-between;display:flex;position:relative}.home__settings{top:calc(var(--safe-top) + 14px);position:absolute;right:16px}.home__brand{text-align:center;justify-items:center;gap:6px;margin-top:6vh;display:grid}.home__sun{width:112px;height:112px;fill:var(--sun);animation:1.2s cubic-bezier(.2,.7,.3,1) both sunrise}.home__sun svg{width:100%;height:100%;animation:60s linear infinite spin}.logo{font:400 clamp(40px, 15vw, 60px)/1 var(--font-title);letter-spacing:-.01em;margin:0}.logo span{font:700 20px/1 var(--font-ui);letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:6px;display:block}.home__tag{text-wrap:balance;color:var(--muted);margin:10px 0 0;font-size:clamp(16px,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}.bar{grid-template-columns:56px 1fr auto;align-items:center;gap:10px;padding:8px 10px 4px;display:grid}.bar h2{text-align:center;font-size:24px}.bar>span:last-child:empty{width:56px}.bar__title{line-height:1.15;display:grid}.bar__deal{font-size:18px;font-weight:700}.bar__sub,.bar__count{color:var(--muted);font-size:16px}.bar__count{font-variant-numeric:tabular-nums;color:var(--ink);justify-items:end;font-weight:600;line-height:1.2;display:grid}.caption{text-align:center;height:48px;color:var(--hint);place-items:center;margin:0;padding:0 14px;font-size:17px;font-weight:700;line-height:22px;display:grid;overflow:hidden}.board-wrap{flex:1;min-height:0;position:relative}.tools{padding:8px 10px calc(var(--safe-bottom) + 10px);grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.tool{border:2px solid var(--btn-edge);background:var(--btn);min-height:66px;color:var(--btn-ink);border-radius:16px;justify-items:center;gap:2px;padding:8px 4px;font-size:16px;font-weight:700;display:grid}.tool svg{width:28px;height:28px}.tool--hint{position:relative}.tool__note{background:var(--sheet);color:var(--sheet-ink);white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:14px;font-weight:700;line-height:18px;position:absolute;top:-10px;right:-2px;box-shadow:0 1px 4px #00000040}.tool__note[hidden]{display:none}.stuck{background:var(--sheet);color:var(--sheet-ink);text-align:center;border-radius:16px;gap:8px;margin:0 10px;padding:12px 14px;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);color:var(--sheet-ink)}.board{isolation:isolate;position:absolute;inset:0}.stage{position:absolute}.tile{width:var(--tw);height:var(--th);border-radius:calc(var(--tw) * .13);touch-action:manipulation;background:0 0;border:0;padding:0;transition:translate .15s;position:absolute;top:0;left:0}.tile:focus-visible{outline:4px solid var(--hint);outline-offset:3px}.tile__face{--face-bg:var(--tile);border-radius:inherit;background:var(--face-bg);box-shadow:inset 0 0 0 1px var(--tile-line), var(--ext);place-items:center;transition:transform .2s ease-in;display:grid;position:absolute;inset:0}.tile__face svg{width:100%;height:100%}.tile--gone{visibility:hidden;pointer-events:none}.tile--gone.tile--leaving{visibility:visible;animation:.3s ease-in forwards leave}.tile--blocked .tile__face{--face-bg:var(--tile-blocked)}.tile--sel{translate:0 calc(var(--d) * -.6);z-index:9000!important}.tile--sel .tile__face{--face-bg:var(--select-face);box-shadow:inset 0 0 0 calc(var(--tw) * .075) var(--select), var(--ext)}.tile--hint{z-index:9001!important}.tile--hint .tile__face{box-shadow:inset 0 0 0 calc(var(--tw) * .075) var(--hint), var(--ext);animation:.9s ease-in-out 3 glow}.tile--nope .tile__face{animation:.4s nope}.tile--in{animation:drop .45s cubic-bezier(.2, .7, .3, 1) var(--delay) both}.tile--flip .tile__face{transform:scaleX(0)}.stage--xl .f-num{letter-spacing:-.04em}.f-num{font-family:var(--font-ui);fill:currentColor;font-weight:800}.f-dots{color:var(--dots);fill:currentColor}.f-bamboo{color:var(--bamboo);fill:currentColor}.f-stars{color:var(--stars);fill:currentColor}.f-wind{color:var(--sym-ink);fill:currentColor}.f-red{color:var(--stars);fill:currentColor}.f-green{color:var(--bamboo);fill:currentColor}.f-white{color:var(--dots)}.f-cut{fill:var(--face-bg,var(--tile))}.f-vein{stroke:var(--face-bg,var(--tile))}.f-rose{fill:var(--rose)}.f-marigold{fill:var(--marigold)}.f-violet{fill:var(--violet)}.f-cornflower{fill:var(--cornflower)}.f-heart{fill:var(--heart);stroke:var(--sym-ink);stroke-width:2.5px}.f-stem{stroke:var(--stem)}.f-frame{stroke:var(--frame)}.f-spring{color:var(--bamboo);fill:currentColor}.f-summer{fill:var(--marigold)}.f-autumn{fill:var(--stars)}.f-winter{color:var(--dots)}.burst{width:180px;height:180px;fill:var(--sun);margin:-90px 0 0 -90px;animation:1s cubic-bezier(.2,.7,.3,1) both sunrise;position:absolute;top:50%;left:50%}.burst svg{width:100%;height:100%;animation:20s linear infinite spin}@keyframes leave{to{opacity:0;translate:0 -30%;scale:.75}}@keyframes drop{0%{opacity:0;translate:0 -48px}}@keyframes nope{20%,60%{transform:translate(-7%)}40%,80%{transform:translate(7%)}}@keyframes glow{50%{--face-bg:var(--tile);filter:brightness(1.08);box-shadow:inset 0 0 0 calc(var(--tw) * .12) var(--hint), var(--ext)}}.sheet{z-index:1000;background:#00000080;place-items:center;padding:20px;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:24px 20px 16px;animation:.25s cubic-bezier(.2,.7,.3,1) rise;display:grid;overflow:auto;box-shadow:0 20px 60px #0006}.sheet__card h2{font:400 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-variant-numeric:tabular-nums;font-size:26px;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}.howto ol{gap:6px;margin:0;padding-left:24px;font-size:19px;display:grid}.howto{gap:14px;display:grid}.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__badges{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.won__badges span{background:var(--sun);color:#1f2a24;border-radius:99px;padding:4px 12px;font-size:16px;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);align-content:start;gap:12px;display:grid;overflow-y:auto}.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{background:var(--btn);border-radius:14px;padding:12px 14px;display:grid}.statset dt{color:var(--muted);font-size:16px}.statset dd{font-variant-numeric:tabular-nums;margin:0;font-size:28px;font-weight:800}.statset dd small{color:var(--muted);font-size:17px;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}.toggle small{color:var(--muted);font-size:16px;font-weight:500;display:block}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle i{background:#7f7f7f73;border-radius:99px;width:60px;height:36px;transition:background .2s;position:relative}.toggle i:after{content:"";background:#fff;border-radius:50%;width:28px;height:28px;transition:transform .2s;position:absolute;top:4px;left:4px;box-shadow:0 1px 3px #0000004d}.toggle input:checked+i{background:var(--primary)}.toggle input:checked+i:after{transform:translate(24px)}.toggle input:focus-visible+i{outline:3px solid var(--hint)}.choice{background:var(--btn);border-radius:16px;grid-auto-columns:1fr;grid-auto-flow:column;gap:6px;padding:6px;display:grid}.choice__opt{background:0 0;border:0;border-radius:12px;min-height:54px;font-size:19px;font-weight:700}.choice__opt--on{background:var(--primary);color:var(--primary-ink)}.note{color:var(--muted);margin:0;font-size:17px}.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)}.look__sw{grid-row:span 2;display:flex}.look__sw i{border:1px solid #7f7f7f66;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{color:var(--muted);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){.tile,.tile__face{transition-duration:10ms!important}.tile--in,.tile--leaving{animation-duration:10ms!important}.home__sun svg{animation:none}}.label{margin:4px 0 -4px;font-weight:700}.sheet__levels{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.sheet__levels .btn{padding:10px 6px}.sheet__levels .btn__sub{font-size:15px}.stuck__btns .btn{justify-content:center;align-items:center;gap:8px;display:flex}.stuck__btns svg{width:24px;height:24px}.guide{grid-template-columns:repeat(4,1fr);justify-items:center;gap:10px 6px;display:grid}.guide figure{justify-items:center;gap:6px;margin:0;display:grid}.guide figcaption{font-size:16px;font-weight:700}.mini{--face-bg:var(--tile);background:var(--tile);width:46px;height:59px;box-shadow:inset 0 0 0 1px var(--tile-line), 2px 2px 0 var(--side), 4px 4px 0 var(--side-2);border-radius:8px;display:block}.mini svg{width:100%;height:100%}:root,[data-theme=teak]{--table:#3d2a1f;--table-2:#2c1e16;--ink:#fbf1e3;--muted:#e4d3bf;--tile:#fbf6ea;--tile-blocked:#cfc4ae;--tile-line:#3c280a59;--side:#2f8a6a;--side-2:#1d5f48;--tile-shadow:#0f080499;--dots:#1b46a6;--bamboo:#0e5e31;--stars:#a3121c;--sym-ink:#1b1b1b;--rose:#a8124f;--marigold:#9c4705;--violet:#6a2c9e;--cornflower:#1b46a6;--heart:#e9a90e;--stem:#2f6b37;--frame:#9c6a00;--select:#ff7a1a;--select-face:#ffe38c;--hint:#74e3c6;--sun:#f5c04a;--btn:#ffffff1a;--btn-ink:#fbf1e3;--btn-edge:#ffffff3d;--primary:#f5c04a;--primary-ink:#2a1c12;--sheet:#fbf6ea;--sheet-ink:#2a1c12;--sheet-muted:#5a4a3c;--sheet-btn:#ebe3d2}[data-theme=morning]{--table:#f3e5cc;--table-2:#ead6b4;--ink:#2a2017;--muted:#5b4a39;--tile:#fff;--tile-blocked:#ddd3c2;--tile-line:#3c2d1959;--side:#c98a2e;--side-2:#9a6516;--tile-shadow:#46321459;--dots:#1a42a0;--bamboo:#0d5a2f;--stars:#a3121c;--sym-ink:#161616;--rose:#a8124f;--marigold:#9c4705;--violet:#6a2c9e;--cornflower:#1a42a0;--heart:#e9a90e;--stem:#2f6b37;--frame:#8d5f00;--select:#d9480f;--select-face:#ffe38c;--hint:#0a5f6e;--sun:#e0a128;--btn:#fff9;--btn-ink:#2a2017;--btn-edge:#2a201733;--primary:#3d2a1f;--primary-ink:#fff;--sheet:#fff;--sheet-ink:#2a2017;--sheet-muted:#5b4a39;--sheet-btn:#f1e8d8}[data-theme=midnight]{--table:#0b0b0c;--table-2:#050506;--ink:#fff;--muted:#d2d2d2;--tile:#fff;--tile-blocked:#d6d6d6;--tile-line:#000;--side:#f2c230;--side-2:#b88f0f;--tile-shadow:#000c;--dots:#0030c4;--bamboo:#005a24;--stars:#b0000f;--sym-ink:#000;--rose:#b0004f;--marigold:#9a4200;--violet:#6000a8;--cornflower:#0030c4;--heart:#e9a90e;--stem:#005a24;--frame:#7a5300;--select:#ff6a00;--select-face:#ffe14d;--hint:#38d1ff;--sun:#f2c230;--btn:#232427;--btn-ink:#fff;--btn-edge:#5a5d63;--primary:#f2c230;--primary-ink:#0b0b0c;--sheet:#1c1d20;--sheet-ink:#fff;--sheet-muted:#d2d2d2;--sheet-btn:#34363b}