:root{--paper:#fbf3dc;--ink:#2b2a27;--hand:"Architects Daughter", "Comic Sans MS", cursive}*{box-sizing:border-box}html,body,#root{background:var(--paper);height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}.viewport{background:var(--paper);width:100vw;height:100dvh;position:relative}.stage{transform-origin:50%;font-family:var(--hand);color:var(--ink);text-transform:uppercase;-webkit-text-stroke:.6px var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:absolute;top:50%;left:50%}.screen{animation:.35s fade;position:absolute;inset:0}@keyframes fade{0%{opacity:0}}.grid,.art,.ring{pointer-events:none;position:absolute;top:0;left:0}.art{position:absolute}.box{isolation:isolate;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:flex;position:absolute}.box:before,.box:after{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0}.box:before{background:var(--bg);border:4px solid var(--ink);filter:url(#rough)}.box:after{border:2px solid var(--ink);opacity:.7;filter:url(#rough2);transform:translate(3px,-3px)}button.box{transition:transform 80ms}button.box:hover{transform:rotate(-.6deg)scale(1.02)}button.box:active{transform:translate(2px,2px)}.dashed{border:4px dashed var(--ink);filter:url(#rough);opacity:.85;pointer-events:none;border-radius:4px;position:absolute}.ground{border-top:3px solid var(--ink);filter:url(#rough2);height:0;position:absolute}.corner svg{filter:url(#rough2)}.question{text-align:center;letter-spacing:3px;word-spacing:10px;-webkit-text-stroke:1.4px var(--ink);margin:0;font-size:46px;font-weight:400;position:absolute;left:0;right:0}.key{display:inline-block;position:relative}.key-ring{top:50%;left:50%;transform:translate(-50%,-48%)rotate(-4deg)}.btn{letter-spacing:2px;-webkit-text-stroke:1px var(--ink);gap:18px;font-size:26px}.btn.small{font-size:22px}.btn.big{letter-spacing:4px;font-size:40px}.note{font-size:26px;animation:1.8s forwards pop;position:absolute;transform:rotate(-4deg)}@keyframes pop{0%{opacity:0;transform:rotate(-4deg)translateY(10px)}15%,75%{opacity:1;transform:rotate(-4deg)}to{opacity:0}}.title{text-align:center;font-family:"Permanent Marker", var(--hand);letter-spacing:4px;-webkit-text-stroke:0;margin:0;font-size:104px;font-weight:400;position:absolute;top:120px;left:0;right:0}.arrow{background:var(--ink);clip-path:polygon(0 50%,100% 0,100% 100%);filter:url(#rough2);border:0;width:38px;height:40px;padding:0;position:absolute}.arrow:after{content:"";clip-path:polygon(14% 50%,90% 12%,90% 88%);background:#b9e8e6;position:absolute;inset:0}.arrow.right{transform:scaleX(-1)}.arrow.right:after{background:#ecb596}.arrow:hover{transform:scale(1.12)}.arrow.right:hover{transform:scaleX(-1)scale(1.12)}.avatar-box img{object-fit:contain}.name-bar{letter-spacing:2px;-webkit-text-stroke:1px var(--ink);justify-content:flex-start;padding-left:12px;font-size:20px}.bang{letter-spacing:0;font-size:40px}.rules{flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:24px 26px;font-size:22px}.rules p{margin:0 0 10px}.rules .faint{text-transform:none;-webkit-text-stroke:0;opacity:.75;font-size:19px}.timer{letter-spacing:2px;-webkit-text-stroke:1.4px var(--ink);font-size:44px}.timer.hurry{animation:.5s infinite shake}@keyframes shake{25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}}.words{word-spacing:14px;letter-spacing:1px;white-space:nowrap;padding:0 20px;font-size:27px;overflow:hidden}.display{letter-spacing:4px;-webkit-text-stroke:1px var(--ink);font-size:68px}.pad{justify-content:flex-start;align-items:flex-start}.key-btn{-webkit-text-stroke:1.5px var(--ink);isolation:isolate;background:0 0;border:0;width:117px;height:112px;font-size:64px;position:absolute}.key-btn:before{content:"";z-index:-1;border:3px solid var(--ink);filter:url(#rough2);position:absolute;inset:0}.key-btn:hover:before{background:#ffffff38}.key-btn:active{transform:translate(1px,2px)}.key-btn.low{height:52px;font-size:22px}.key-btn.low:before{background:#d2ad93}.key-btn.low:hover:before{background:#dcbba3}.key-btn.zero{font-size:34px}.answer{letter-spacing:4px;-webkit-text-stroke:3px var(--ink);font-size:86px}.cell{flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:26px 40px}.cell:after{display:none}.cell-name{letter-spacing:2px;-webkit-text-stroke:1.2px var(--ink);font-size:40px}.cell-guess{-webkit-text-stroke:1.2px var(--ink);margin-top:22px;font-size:40px}.badge{justify-content:center;align-items:center;width:160px;height:144px;display:flex;position:absolute}.badge .ring{position:absolute;top:0;left:0}.badge span{text-align:center;-webkit-text-stroke:1px var(--ink);font-size:30px;line-height:1.05;transform:rotate(-8deg)}.cell.lb{padding:22px 30px}.cell.lb .cell-name{font-size:32px}.cell.lb .cell-guess{margin-top:14px;font-size:30px}.podium{-webkit-text-stroke:1px var(--ink);align-items:flex-start;padding-top:18px;font-size:40px}.podium.low{align-items:center;padding-top:0;font-size:30px}.field input{min-width:0;font:inherit;color:inherit;text-transform:uppercase;letter-spacing:inherit;-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:none;flex:1;margin-left:10px}.field input::placeholder{color:var(--ink);opacity:.35}button.box:disabled{cursor:not-allowed;opacity:.5}button.box:disabled:hover{transform:none}.error{text-align:center;color:#b3401f;-webkit-text-stroke:.6px #b3401f;font-size:24px;position:absolute;left:0;right:0}.loading{justify-content:center;align-items:center;font-size:40px;display:flex}.offline{color:#b3401f;font-size:26px;animation:.8s infinite shake;position:absolute;top:40px;left:40px}.toast{text-align:center;pointer-events:none;top:160px;left:0;right:0}.room-code{letter-spacing:8px;-webkit-text-stroke:1.6px var(--ink);gap:24px;font-size:60px}.faint-label{letter-spacing:3px;opacity:.7;-webkit-text-stroke:.6px var(--ink);font-size:26px}.label{letter-spacing:2px;-webkit-text-stroke:1px var(--ink);font-size:26px;position:absolute}.label.watching{font-size:22px}.pick{letter-spacing:1px;flex-direction:column;gap:10px;font-size:20px}.pick img{object-fit:contain}button.pick.taken:disabled{opacity:.35}.pick.mine{transform:rotate(-2deg)}.seat{justify-content:flex-start;gap:24px;padding:0 30px}.seat:after{display:none}.seat.empty{opacity:.45;justify-content:center;font-size:24px}.seat-face{justify-content:center;width:100px;font-size:60px;display:flex}.seat-name{letter-spacing:2px;-webkit-text-stroke:1.2px var(--ink);text-transform:none;font-size:36px}.seat-tags{letter-spacing:2px;opacity:.7;margin-top:8px;font-size:20px}.kick{opacity:.6;background:0 0;border:0;width:44px;height:44px;font-size:36px;line-height:1;position:absolute;top:10px;right:14px}.kick:hover{opacity:1;color:#b3401f}.settings,.status{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:18px;padding:26px 30px;font-size:24px}.settings p,.status p{margin:0}.settings .faint,.status .faint{text-transform:none;-webkit-text-stroke:0;opacity:.75;font-size:19px}.setting{align-items:center;gap:14px;display:flex}.setting>span{width:120px;font-size:22px}.opt{text-transform:uppercase;isolation:isolate;background:0 0;border:0;width:96px;height:52px;font-size:22px;position:relative}.opt:before{content:"";z-index:-1;border:3px solid var(--ink);filter:url(#rough2);background:#e9e2cf;position:absolute;inset:0}.opt.on:before{background:#faba96;border-width:4px}.opt:disabled{cursor:default}.opt:not(:disabled):hover:before{background:#f3d4bc}.pad.off .key-btn{cursor:default;opacity:.45}.key-btn:disabled:active{transform:none}.lock{font-size:34px}.locked-row{text-transform:none;opacity:.4;align-items:center;gap:14px;font-size:26px;display:flex;position:absolute}.locked-row.done{opacity:1}.locked-face{justify-content:center;width:50px;display:flex}.source{text-align:center;text-transform:none;-webkit-text-stroke:0;opacity:.75;font-size:20px;position:absolute}.source a{color:inherit}.cell-name{text-transform:none;align-items:center;gap:12px;display:flex}.cell.me:before{border-width:7px}.cell-face{position:absolute;top:50%;right:30px;transform:translateY(-50%)}.portrait .title{font-size:66px;top:54px}.portrait .question{letter-spacing:1px;word-spacing:4px;padding:0 30px;font-size:34px;line-height:1.5}.portrait .room-code{letter-spacing:5px;gap:16px;font-size:46px}.portrait .label{font-size:24px}.portrait .pick{gap:4px;font-size:15px}.portrait .seat{gap:12px;padding:0 14px}.portrait .seat-face{width:60px;font-size:40px}.portrait .seat-name{font-size:26px}.portrait .seat-tags{font-size:16px}.portrait .kick{top:2px;right:4px}.portrait .settings{gap:10px;padding:18px 24px}.portrait .settings .faint{display:none}.portrait .opt{width:104px;height:44px}.portrait .setting>span{width:110px}.portrait .opt:after{content:"";position:absolute;inset:-10px -3px}.portrait .kick{width:66px;height:66px;top:-8px;right:-6px}.portrait .status{gap:6px;padding:14px 18px;font-size:20px}.portrait .status .faint{font-size:17px}.portrait .label.watching{font-size:15px}.portrait .timer{font-size:32px}.portrait .words{word-spacing:8px;font-size:20px}.portrait .display{font-size:50px}.portrait .locked-row{white-space:nowrap;gap:6px;font-size:18px}.portrait .locked-face{width:32px}.portrait .lock{text-align:center;font-size:25px;line-height:1.2}.portrait .answer{font-size:64px}.portrait .source{font-size:18px}.portrait .cell{flex-direction:row;align-items:center;gap:24px;padding:0 24px}.portrait .cell-name{font-size:26px}.portrait .cell-guess{margin-top:0;font-size:28px}.portrait .badge{transform:scale(.5)}.portrait .badge span{font-size:32px}.portrait .cell.lb .cell-name{font-size:26px}.portrait .cell.lb .cell-guess{margin-top:0;font-size:24px}.portrait .rules{padding:18px 22px;font-size:22px}.portrait .rules .faint{font-size:18px;line-height:1.35}.howto{z-index:10;background:#fbf3dce0;animation:.25s fade;position:absolute;inset:0}.howto-panel{flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:36px 52px}.howto-panel h2{font-family:"Permanent Marker", var(--hand);-webkit-text-stroke:0;margin:0 0 22px;font-size:48px;font-weight:400}.howto-panel ol{margin:0;padding:0;list-style:none}.howto-panel li{align-items:center;gap:26px;margin-bottom:22px;display:flex}.howto-face{flex:none;justify-content:center;width:64px;display:flex}.howto-panel b{letter-spacing:1px;-webkit-text-stroke:1px var(--ink);font-size:28px;font-weight:400;display:block}.howto-panel .faint{text-transform:none;-webkit-text-stroke:0;opacity:.8;margin-top:4px;font-size:22px;line-height:1.3;display:block}.portrait .howto-panel{padding:22px 24px}.portrait .howto-panel h2{margin-bottom:12px;font-size:36px}.portrait .howto-panel li{gap:14px;margin-bottom:12px}.portrait .howto-panel b{font-size:24px}.portrait .howto-panel .faint{font-size:18px}.credit{letter-spacing:3px;-webkit-text-stroke:1.4px var(--ink);font-size:30px}.portrait .credit{letter-spacing:2px;font-size:24px}.howto .credit{font-size:28px}.portrait .howto .credit{font-size:22px}.portrait .btn.again{font-size:28px}