@font-face{font-family:'Smile Moon';src:url('/fonts/smile-moon.otf') format('opentype');font-display:swap;font-weight:100 900}
:root{--paper:#f1ead7;--sheet:#fffcf0;--ink:#292720;--red:#bd4935;--blue:#47718c;--yellow:#e8bf54;--sage:#849875;--muted:#706b5b;--line:#d8cfb8;--mono:'Courier New',monospace;--hand:'Smile Moon','Comic Sans MS',cursive;--screen-height:100dvh}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{color:var(--ink);background:#ddd5c0;font-family:var(--hand);font-size:18px;line-height:1.25}body:after{content:'';position:fixed;inset:0;background:url('/art/paper.svg');opacity:.5;pointer-events:none;z-index:80;mix-blend-mode:multiply}#app{height:var(--screen-height);padding:18px 25px}button,input,textarea,select{font:inherit;color:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}a{color:var(--blue);text-underline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px dashed var(--blue);outline-offset:3px}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400;line-height:1.05}h1{font-size:64px}h2{font-size:38px}h3{font-size:27px}small{font-family:var(--mono);font-size:11px;line-height:1.3;color:var(--muted)}.row{display:flex;gap:18px;align-items:center}.full{width:100%}.desk{position:relative;height:100%;max-width:1450px;margin:auto;background:repeating-linear-gradient(0deg,transparent 0 31px,#8dada225 31px 32px),var(--paper);border:1px solid #c2b9a2;box-shadow:3px 5px 0 #b4aa953d;overflow:hidden}.desk:before{content:'';position:absolute;left:47px;top:0;bottom:0;border-left:1px solid #c26b5b45;pointer-events:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;border:2px solid var(--ink);border-radius:3px 6px 2px 4px;padding:11px 22px;min-height:46px;background:var(--sheet);font-family:var(--hand);font-size:23px;line-height:1.1;box-shadow:3px 4px 0 var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}.btn.red{background:var(--red);color:var(--sheet)}.btn.yellow{background:var(--yellow)}.btn.small{font-size:21px;padding:9px 20px;min-height:40px}.btn:hover:not(:disabled){transform:translate(-1px,-2px) rotate(-1deg);box-shadow:5px 6px 0 var(--ink)}.btn:active:not(:disabled){transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}.text-button{font-family:var(--hand);border:0;background:none;text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:1px;text-underline-offset:5px;color:var(--ink);padding:6px 2px;font-size:18px}.wordmark{width:100%;height:auto;display:block;overflow:visible}.logo-face{opacity:0}.doodle{width:100px;height:112px;overflow:visible;flex-shrink:0}.sticker{filter:drop-shadow(2px 3px 0 #29272022) drop-shadow(0 0 1px #fff);animation:idle-wiggle 6s ease-in-out infinite}.tape{position:absolute;top:-13px;left:calc(50% - 48px);width:96px;height:27px;background:#cfbc889e;clip-path:polygon(2% 6%,99% 0,97% 19%,100% 31%,98% 54%,100% 96%,3% 100%,0 80%,4% 63%,0 43%);transform:rotate(-4deg);z-index:2}.tape:after{content:'';position:absolute;inset:2px 5px;background:repeating-linear-gradient(93deg,transparent 0 3px,#f5edce33 3px 5px)}.paper-note{background:var(--sheet);position:relative;box-shadow:3px 5px 0 #83745b22}.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--red);font-weight:bold}.new-phase .prompt-stage{animation:paper-arrive .4s both}.new-phase .option{animation:paper-arrive .4s both;animation-delay:calc(var(--order)*.035s)}
/* The front cover: a notebook assembled on somebody's bedroom floor. */
.home{padding:25px 48px 20px 65px;display:flex;flex-direction:column}.binding{position:absolute;left:0;top:0;bottom:0;width:18px;background-color:#302e28;background-image:radial-gradient(ellipse at 40% 10%,#ece8dc 0 1px,transparent 2px),radial-gradient(ellipse at 80% 50%,#ece8dc 0 2px,transparent 3px);background-size:9px 13px,12px 19px}.home-top{display:flex;justify-content:space-between;align-items:center;min-height:36px}.tape-label{font-family:var(--mono);font-size:12px;background:var(--ink);color:var(--sheet);padding:7px 12px;transform:rotate(-2deg);box-shadow:3px 2px 0 #d9c7a4}.edition{font-family:var(--mono);font-size:12px}.edition span{font-size:25px;color:var(--red);vertical-align:middle;margin:0 12px}.home-main{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;flex:1;min-height:0;align-items:center}.home-story{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding:35px 0 15px 8px}.margin-note{font-size:20px;transform:rotate(-6deg);position:absolute;top:16px;left:12px;line-height:1.1;color:var(--blue)}.margin-note .doodle{width:68px;height:75px;position:absolute;left:153px;top:0;transform:rotate(100deg)}.home-logo{width:min(510px,100%);margin:24px 0 0;transform:rotate(-3deg)}.crossout-note{font-size:29px;position:relative;width:max-content;transform:rotate(-3deg);margin:5px 0 2px 10px;color:#77715e}.crossout-note svg{position:absolute;inset:0;width:100%;height:100%;stroke:var(--red);stroke-width:4;fill:none;overflow:visible}.home-tagline{font-size:clamp(30px,3.4vw,46px);margin-left:8px;transform:rotate(-2deg);width:max-content;max-width:100%;background:linear-gradient(transparent 70%,#e8bf5477 70% 96%,transparent 96%)}.home-description{font-size:20px;margin:19px 0 0 10px;line-height:1.35;max-width:390px}.home-doodles{position:relative;height:106px;max-width:490px;margin-top:6px}.home-doodles .flower{position:absolute;width:85px;height:95px;left:-8px;top:12px;transform:rotate(-16deg)}.home-doodles .worm{position:absolute;width:142px;height:150px;left:88px;top:-14px;transform:rotate(7deg);animation-delay:-2s}.pencil-note{position:absolute;left:267px;top:39px;font-size:16px;transform:rotate(-8deg);color:var(--blue)}.rule-note{display:flex;align-items:center;gap:16px;transform:rotate(2deg);padding:13px 17px 11px;max-width:470px;margin-top:8px;background:#eadcbd}.rule-note:before{content:'';position:absolute;left:1px;right:1px;bottom:-6px;height:8px;background:linear-gradient(135deg,#eadcbd 25%,transparent 25%) -5px 0,linear-gradient(225deg,#eadcbd 25%,transparent 25%) -5px 0;background-size:10px 10px}.note-number{font-size:20px;line-height:1.1;transform:rotate(-2deg);color:var(--red);white-space:nowrap}.rule-note p{font-size:14px;line-height:1.5}.join-area{position:relative;width:100%;max-width:385px;justify-self:center;margin-top:18px}.join-sheet{padding:27px 30px 23px;background:var(--sheet);box-shadow:6px 8px 0 #bdb39e66;transform:rotate(1.8deg);position:relative;border:1px solid #d7cfbc;border-radius:0 0 14px 1px}.join-sheet:after{content:'';position:absolute;bottom:0;right:0;border:10px solid transparent;border-right-color:var(--paper);border-bottom-color:var(--paper)}.join-sheet h2{font-size:44px;margin:0 0 19px;transform:rotate(-2deg)}label{display:block;font-family:var(--mono);font-size:12px;font-weight:bold;margin:9px 0 7px}input,textarea,select{width:100%;background:#faf7ea;border:1.5px solid #918675;border-radius:2px;padding:10px 12px;font-size:20px;line-height:1.2;outline-offset:2px}input::placeholder,textarea::placeholder{color:#827c6d;opacity:1}input{min-height:42px}textarea{resize:none;min-height:80px;max-height:100px;background:repeating-linear-gradient(0deg,transparent 0 26px,#8dada225 26px 27px),#fffdf4;line-height:27px}.code-input{font-family:var(--mono);font-size:28px;letter-spacing:8px;font-weight:bold;line-height:1.2;text-transform:uppercase;background:#f0e8d5;border-style:dashed;min-height:53px}.join-sheet #name{font-size:17px}.character-pick{display:flex;align-items:center;gap:6px;width:100%;background:transparent;border:0;margin:12px 0 8px;padding:0;text-align:left}.character-pick .avatar{width:57px;height:72px}.character-pick>span:nth-child(2){font-size:20px;flex:1}.character-pick small{display:block;font-size:9px;margin-top:4px}.edit-arrow{font-size:35px;color:var(--red)}.join-sheet .btn{font-size:25px;min-height:46px}.or-line{display:flex;gap:12px;align-items:center;font-size:16px;margin:13px 0}.or-line:before,.or-line:after{content:'';height:1px;background:#cfc5b2;flex:1}.host-hint{display:block;text-align:center;margin-top:10px;font-size:9px}.join-arrow{position:absolute;font-size:20px;color:var(--red);top:-42px;right:5px;transform:rotate(5deg);z-index:2}.join-arrow .doodle{position:absolute;right:-65px;top:-5px;width:55px;height:65px;transform:rotate(158deg)}.home-star{position:absolute;width:85px;height:96px;right:-37px;top:73px;transform:rotate(13deg);pointer-events:none}.home-pencil{position:absolute;width:80px;height:100px;right:-47px;bottom:-27px;transform:rotate(26deg);pointer-events:none}.home-footer{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:8px}.tiny-smile{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px}.tiny-smile .doodle{width:32px;height:36px}.home-footer .text-button{font-size:17px}.page-number{position:absolute;right:14px;bottom:5px;font:8px var(--mono);color:#88816e}
/* Shared game surfaces */
.shell{display:flex;flex-direction:column;padding:0 40px 0 64px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:69px;flex-shrink:0;border-bottom:1px dashed #b8ae9680}.logo{width:96px;color:var(--ink);text-decoration:none;flex-shrink:0;transform:rotate(-3deg)}.top-scribble{font-size:21px;transform:rotate(-2deg);color:var(--muted)}.room-tag{font:12px var(--mono);white-space:nowrap}.room-tag b{font-size:21px;letter-spacing:3px;color:var(--red);margin-left:5px}.sound-button{border:1px dashed var(--ink);background:#e8bf5470;font:13px var(--mono);padding:8px;transform:rotate(3deg)}.stagebar{display:flex;justify-content:space-between;align-items:center;height:94px;flex-shrink:0}.round-progress{display:flex;align-items:center;gap:9px}.round-progress>span{font:15px var(--mono);border:1px solid #a49b88;width:26px;height:28px;display:grid;place-items:center;transform:rotate(-4deg)}.round-progress>span:nth-child(2){transform:rotate(4deg)}.round-progress>span.current{background:var(--red);color:var(--sheet);border-color:var(--red);box-shadow:2px 2px 0 var(--ink)}.round-progress b{font-size:18px;font-weight:400;margin-left:10px}.stage-note{font:12px var(--mono)}.countdown{width:202px;min-height:75px;background:var(--yellow);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);position:relative;display:flex;align-items:center;justify-content:space-around;gap:10px;padding:3px 13px 11px;transform:rotate(2deg)}.clock-note{font-size:17px;line-height:1}.timer{font-family:var(--hand);font-size:56px;line-height:1.05;min-width:118px;text-align:right;font-variant-numeric:tabular-nums}.countdown-track{position:absolute;left:0;right:0;bottom:0;height:7px;background:#29272028}.countdown-fill{height:100%;background:var(--ink);transition:width .2s linear}.countdown.urgent{background:var(--red);color:#fff6df;animation:urgent .38s steps(2,end) infinite}.countdown.urgent .countdown-fill{background:#fff6df}.countdown.is-paused{background:#d1caba;animation:none}.stage-content{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;position:relative}.prompt-stage{text-align:center;flex-shrink:0;max-width:1080px;margin:0 auto;width:100%}.prompt-stage .eyebrow{margin-bottom:11px}.prompt-stage h2{font-size:clamp(29px,3.05vw,45px);line-height:1.13;text-wrap:balance;overflow-wrap:anywhere}.prompt-stage>p:not(.eyebrow){font-size:19px;margin-top:13px}.stage-instruction{text-align:center;font-size:19px;color:var(--muted);flex-shrink:0}.host-illustration{display:flex;justify-content:center;align-items:center;gap:45px;flex:1;min-height:55px;max-height:210px}.host-illustration .doodle{height:95%;max-height:175px;width:auto;transform:rotate(-10deg);animation:idle-wiggle 5s ease-in-out infinite}.host-illustration .doodle:nth-child(2){transform:rotate(13deg);animation-delay:-2s}.host-controls{min-height:62px;flex-shrink:0;border-top:1px dashed #b8ae9680;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px}.host-controls>span{font:11px var(--mono);color:var(--muted);max-width:60%}.host-controls .text-button{font-size:16px}.connection{display:inline-flex;align-items:center;gap:6px;font:10px var(--mono);white-space:nowrap}.connection i{height:6px;width:6px;border-radius:50%;background:#60734b}.connection.offline{color:var(--red)}.connection.offline i{background:var(--red)}.avatar{display:inline-block;width:54px;height:68px;flex-shrink:0;position:relative}.character-art{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(1px 1px 0 #29272017)}.status-grid{display:flex;justify-content:center;align-items:end;gap:18px;flex-wrap:nowrap;min-height:70px;flex-shrink:0;margin:5px auto;width:100%}.status-chip{display:flex;flex-direction:column;align-items:center;position:relative;min-width:50px;max-width:106px;opacity:.65;transition:opacity .2s}.status-chip .avatar{height:58px;width:50px}.status-chip>span:not(.avatar){font:11px var(--mono);max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-chip>b{position:absolute;right:0;top:0;background:var(--sheet);border:1px solid var(--ink);border-radius:50%;width:22px;height:22px;text-align:center;font-size:19px}.status-chip.done{opacity:1}.status-chip.done>b{background:var(--sage);color:white;transform:rotate(10deg)}.status-chip.done .character-art{animation:small-bob 1.2s ease-in-out infinite alternate}.progress-note{text-align:center;font:11px var(--mono);color:var(--muted)}
/* Lobby wall */
.lobby-grid{display:grid;grid-template-columns:330px 1fr;gap:50px;align-items:center;height:100%;padding:34px 5px 16px}.lobby-invite{padding:26px 27px;transform:rotate(-3deg);text-align:center}.lobby-invite h1{font-size:65px;line-height:.95;margin:17px 0 14px}.bigcode{font-family:var(--mono);font-size:53px;line-height:1.3;letter-spacing:7px;color:var(--red);background:#e8bf5466;border:2px dashed var(--red);padding:6px 0;margin:18px -8px}.lobby-invite>p:not(.eyebrow){font-size:18px;margin:10px 0}.network-url{font:14px var(--mono);display:block;overflow-wrap:anywhere;margin:7px 0 10px}.lobby-links{display:flex;justify-content:center;gap:18px}.lobby-links .text-button{font-size:16px}.lobby-invite .smallnote{font:10px var(--mono)!important;margin:18px 0 0!important}.invite-arrow{position:absolute;right:-55px;bottom:38px;width:85px;height:95px;transform:rotate(90deg)}.lobby-cast{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:0;gap:20px}.cast-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.cast-heading h2{font-size:32px;transform:rotate(-2deg)}.cast-heading>span{font:12px var(--mono);white-space:nowrap}.player-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 14px;align-content:center;flex:1;max-height:390px}.player-polaroid,.empty-polaroid{position:relative;padding:8px 6px;background:var(--sheet);box-shadow:3px 4px 0 #b9ad994d;transform:rotate(var(--tilt,-3deg));display:flex;align-items:center;flex-direction:column;min-width:0;justify-content:center}.player-polaroid .tape{width:52px;height:16px;left:calc(50% - 26px);top:-8px}.player-polaroid .avatar{width:100%;max-width:120px;height:110px}.player-polaroid strong{font-weight:400;font-size:19px;max-width:100%;overflow-wrap:anywhere;text-align:center;line-height:1.1;margin-top:3px}.remove-player{position:absolute;right:-7px;top:-7px;width:24px;height:24px;border:1px solid var(--ink);border-radius:50%;background:var(--paper);opacity:0;font-size:21px;line-height:1}.player-polaroid:hover .remove-player,.remove-player:focus-visible{opacity:1}.empty-polaroid{border:1px dashed #a39982;background:none;box-shadow:none;opacity:.4;min-height:150px}.empty-polaroid:nth-child(even){transform:rotate(4deg)}.empty-polaroid .doodle{width:70px;height:78px}.empty-polaroid span{font-size:14px}.lobby-start{display:flex;flex-direction:column;gap:12px;align-items:center}.lobby-start>span{font-size:17px;color:var(--muted);text-align:center}.lobby-start .btn{min-width:70%;transform:rotate(-1deg)}
/* Ballots are scraps; their arrangement never signals the correct answer. */
.answer-board{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:17px 22px;flex:1;min-height:0;padding:5px 7px}.host .options.count-7,.host .options.count-8,.host .options.count-9,.host .options.count-10{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px}.option{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;gap:8px;background:var(--sheet);border:1px solid #b8ad955c;border-radius:0;text-align:left;padding:15px 18px;box-shadow:3px 4px 0 #8a7b5e30;transform:rotate(var(--tilt));transition:transform .15s,box-shadow .15s;font:inherit;overflow-wrap:anywhere}.option:before{content:'';position:absolute;top:-7px;left:calc(50% - 28px);width:56px;height:17px;background:#bcaf83aa;transform:rotate(-4deg)}.option.scrap-0{background:#edcd6a;border:0;box-shadow:3px 4px 0 #bd9d4660}.option.scrap-1{background:repeating-linear-gradient(0deg,transparent 0 24px,#8dada233 24px 25px),#fffdf2;border-left:3px solid #b6645455}.option.scrap-2{background:#d8e0c9}.option.scrap-3{background:#eac0a5;clip-path:polygon(0 0,100% 1%,99% 90%,90% 90%,87% 100%,80% 91%,1% 92%);padding-bottom:24px}.option-title{display:flex;align-items:center;gap:12px;font-size:clamp(20px,2vw,28px);line-height:1.13}.option-title>span:nth-child(2){min-width:0}.letter{font:16px var(--mono);font-weight:bold;flex-shrink:0;width:28px;height:30px;border:1.5px solid currentColor;transform:rotate(-5deg);display:grid;place-items:center;background:#ffffff33}.option.selected{box-shadow:0 0 0 3px var(--blue),4px 6px 0 #29272055;transform:rotate(0deg) scale(1.015);z-index:2}.option.owned{opacity:.5}.option-meta{font:11px var(--mono);color:#574f40;line-height:1.25}.vote-thumb{position:absolute;right:-7px;top:-18px;width:49px;height:55px;transform:rotate(12deg);animation:thumb-pop .25s both}.truth-stamp{font:14px var(--mono);font-weight:bold;color:#3b6647;border:2px solid #3b6647;padding:3px 6px;transform:rotate(-9deg);margin-left:auto}.option.truth{outline:3px solid #607c55;outline-offset:2px}.voters{display:flex;align-items:center;gap:9px;min-height:25px;flex-wrap:wrap}.voter{display:inline-flex;align-items:center;gap:0;font:9px var(--mono)}.voter .avatar{height:34px;width:29px;transform:rotate(-8deg)}.voter>span:last-child{max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.voters>small{font-size:10px}.drawing-art{display:block;width:100%;min-height:0;flex:1;aspect-ratio:4/3;background:white;object-fit:contain}.options.drawings{grid-template-columns:repeat(3,minmax(0,1fr))}.options.drawings.count-2{grid-template-columns:repeat(2,minmax(0,1fr))}.option:has(.drawing-art){background:#fffdf2!important;clip-path:none;border:0;box-shadow:4px 5px 0 #8a7b5e33;justify-content:flex-start;padding:11px 12px;gap:5px}.option:has(.drawing-art):before{width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:1px 2px 1px #29272060;left:calc(50% - 6px);top:-5px}.options.drawings .option-title{font-size:15px;min-height:24px}.options.drawings .letter{font-size:12px;width:21px;height:23px}.pager{display:flex;justify-content:center;align-items:center;gap:23px;flex-shrink:0;height:33px;font:12px var(--mono)}.pager button{border:1px solid var(--ink);background:var(--sheet);width:47px;height:32px;font-size:23px;line-height:1;box-shadow:2px 2px 0 #29272040}.reveal-summary{text-align:center;font-size:20px;flex-shrink:0}.reveal-summary strong{font-weight:400;color:var(--red);font-size:25px;margin-left:5px;text-decoration:underline;text-decoration-style:wavy;overflow-wrap:anywhere}.reveal-layout{display:flex;gap:25px;flex:1;min-height:0}.reveal-layout>.answer-board{flex:2.6}.reveal-layout>.score-sheet{flex:1;min-width:235px;max-width:290px}.score-sheet{background:var(--sheet);box-shadow:3px 4px 0 #b4a89450;padding:17px 18px;transform:rotate(1deg);display:flex;flex-direction:column;min-height:0}.score-sheet h3{font-size:27px;color:var(--blue);margin-bottom:8px;border-bottom:2px solid #4d7c9d4d;padding-bottom:8px}.leaderboard{display:flex;flex-direction:column;flex:1;min-height:0}.score-row{display:flex;align-items:center;gap:8px;border-bottom:1px dashed #c2b49c;min-height:0;flex:1;position:relative}.score-row .rank{font:13px var(--mono);color:var(--muted);width:15px}.score-row .avatar{width:38px;height:47px;max-height:100%}.score-row .name{flex:1;font-size:19px;overflow-wrap:anywhere;min-width:0;line-height:1.05}.score-row .score{font: bold 17px var(--mono)}.delta{position:absolute;right:0;top:0;font:11px var(--mono);color:#3b6647;animation:points-pop .8s both}.new-phase .score-row{animation:score-swoop .65s both;animation-delay:calc(var(--order)*.05s)}.host.phase-reveal .prompt-stage h2{font-size:30px}.host.phase-reveal .prompt-stage .eyebrow{margin-bottom:5px}.host.phase-reveal .option-title{font-size:20px}.host.phase-reveal .options{gap:13px 16px}.host.phase-reveal .options.drawings{grid-template-columns:repeat(2,minmax(0,1fr))}.host.phase-reveal .options.drawings.count-5,.host.phase-reveal .options.drawings.count-6,.host.phase-reveal .options.drawings.count-7{grid-template-columns:repeat(3,minmax(0,1fr))}.host.phase-reveal .options.drawings .option-title{font-size:13px}.host.phase-reveal .voter>span:last-child{display:none}.host.phase-reveal .voter .avatar{height:28px;width:24px}.host.phase-reveal .option-meta{font-size:10px}
/* A player's page is a fixed-height controller. Long ballots use page buttons. */
body[data-view=phone] #app{padding:10px} .phone{max-width:580px;padding:0 19px 0 29px}.phone:before{left:17px}.phone .topbar{min-height:54px;gap:8px}.phone .logo{width:64px}.identity{display:flex;align-items:center;gap:3px;min-width:0;max-width:50%;font-size:15px}.identity b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.identity .avatar{width:34px;height:43px}.phone .room-tag{font-size:0}.phone .room-tag b{font-size:14px;letter-spacing:2px;margin:0}.phone .topbar .row{gap:0}.phone .stagebar{height:65px}.phone .round-progress{gap:5px}.phone .round-progress>span{width:20px;height:22px;font-size:11px}.phone .round-progress b{font-size:15px;margin-left:4px}.phone .countdown{min-height:47px;width:98px;gap:0;padding:0 8px 7px;border-width:1.5px;box-shadow:2px 2px 0 var(--ink)}.phone .clock-note{display:none}.phone .timer{font-size:35px;min-width:75px}.phone .countdown-track{height:5px}.phone .stage-content{gap:10px}.phone .prompt-stage{text-align:left;margin:3px 0 0}.phone .prompt-stage h2{font-size:27px;line-height:1.1;overflow-wrap:anywhere;text-wrap:pretty}.phone .prompt-stage .eyebrow{font-size:9px;letter-spacing:.8px;margin-bottom:8px}.phone .prompt-stage>p:not(.eyebrow){font-size:16px;line-height:1.15;margin-top:10px}.assignment{font-size:16px;line-height:1.2;color:var(--blue);margin:0}.phone .btn{font-size:22px;min-height:43px;padding:10px 14px;flex-shrink:0}.phone #submission{display:flex;flex-direction:column;gap:5px;min-height:0;flex:1;max-height:360px;padding:0 3px}.phone #submission label{margin:5px 0 1px;font-size:10px}.phone #submission textarea{flex:1;min-height:62px;max-height:150px;font-size:20px;padding:10px}.phone #submission input{min-height:41px;font-size:18px}.phone #submission .btn{margin-top:auto;padding-top:11px}.phone .skip{font-size:15px;align-self:flex-start;flex-shrink:0}.phone-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;flex-shrink:0;border-top:1px dashed #b8ae9680;margin-top:10px}.phone-footer>span{font:9px var(--mono);color:var(--muted);text-align:right;max-width:140px}.role-trigger{display:flex;align-items:center;gap:5px;text-align:left;border:0;padding:0;background:none;min-height:44px;font-size:17px}.role-trigger .doodle{width:37px;height:40px;transform:rotate(-7deg)}.role-trigger small{display:block;font-size:8px;margin-top:2px}.role-trigger.used{opacity:.65}.phone .options{gap:13px;grid-template-columns:repeat(2,minmax(0,1fr));padding:5px}.phone .options.count-1,.phone .options.count-2:not(.drawings){grid-template-columns:1fr}.phone .option{padding:14px 12px;gap:7px}.phone .option-title{font-size:20px;line-height:1.12;gap:8px;overflow-wrap:anywhere}.phone .letter{font-size:12px;width:24px;height:25px}.phone .option-meta{font-size:9px}.phone .scrap-3{padding-bottom:21px}.phone .answer-board{gap:7px}.phone .options.drawings{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);max-height:350px}.phone .options.drawings .option-title{font-size:14px}.phone .options.drawings .option{padding:10px 7px}.phone #lock-vote{margin:0 3px 3px;width:calc(100% - 6px)}.phone .reveal-summary{font-size:16px;text-align:left}.phone .reveal-summary strong{font-size:22px}.result-tabs{display:flex;gap:12px;height:34px;flex-shrink:0}.result-tabs button{flex:1;border:1px solid var(--ink);background:var(--sheet);font-size:18px}.result-tabs button.active{background:var(--yellow);box-shadow:2px 2px 0 var(--ink);transform:rotate(-1deg)}.phone .reveal-layout{display:flex;gap:0;flex:1;min-height:0}.phone .reveal-layout>.answer-board,.phone .reveal-layout>.score-sheet{width:100%;max-width:none;min-width:0;flex:1}.phone .voter{font-size:9px}.phone .voter .avatar{width:27px;height:31px}.phone .voters{gap:5px;flex-wrap:wrap}.phone .voters>small{font-size:9px}.phone .truth-stamp{font-size:11px;padding:2px 4px}.phone .score-sheet{padding:14px 18px}.phone .score-sheet h3{font-size:25px}.phone .score-row .name{font-size:21px}.phone .score-row .avatar{width:45px;height:57px}.phone .score-row .score{font-size:20px}.phone .delta{font-size:12px;top:8px}.phone-lobby{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:14px;min-height:0}.phone-lobby .lobby-self{width:190px;height:230px;max-height:32vh}.phone-lobby h1{font-size:34px}.phone-lobby>p:last-child{font-size:16px;text-align:center;color:var(--muted)}.mini-cast{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 9px;max-width:100%;margin-top:5px}.mini-cast>span{display:flex;flex-direction:column;align-items:center;max-width:45px}.mini-cast .avatar{height:43px;width:38px}.mini-cast small{font-size:8px;max-width:45px;overflow:hidden;text-overflow:ellipsis}.waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;flex:1;min-height:0;text-align:center;margin:auto;width:100%;padding:8px 0}.waiting-doodle{width:140px;height:156px;max-height:24vh;animation:idle-wiggle 3.8s ease-in-out infinite}.waiting h3{font-size:32px}.waiting p{font-size:20px;max-width:530px;color:var(--muted)}.waiting .roast{font:12px var(--mono);max-width:480px;margin-top:8px;padding:9px 15px;background:#e8bf5455;transform:rotate(-2deg);line-height:1.4}.phone .waiting{gap:12px}.phone .waiting h3{font-size:28px}.phone .waiting p{font-size:17px}.phone .waiting .roast{font-size:10px;max-width:290px}.notice{padding:10px 13px;background:#e8bf5499;border-left:3px solid var(--red);font-size:16px;line-height:1.2;flex-shrink:0}.phone .notice{font-size:14px}
/* The drawing page */
.drawing-assignment{background:#eadcbd;padding:8px 12px;font-size:16px;line-height:1.15;flex-shrink:0;transform:rotate(-.5deg)}.drawing-assignment.informed{background:#d8e0c9;border:1px dashed #617550}.drawing-assignment small{display:block;font-size:9px;margin-bottom:3px}.drawing-assignment strong{font-size:23px;font-weight:400;overflow-wrap:anywhere}.canvas-wrap{background:white;border:1.5px solid #a59b85;box-shadow:3px 4px 0 #ab9c7d40;line-height:0;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;max-height:340px}.canvas-wrap canvas{display:block;touch-action:none;cursor:crosshair;width:100%;height:100%;object-fit:contain;aspect-ratio:4/3}.draw-tools{display:flex;gap:7px;align-items:center;justify-content:space-between;flex-shrink:0;height:39px}.swatches{display:flex;gap:8px}.swatch{width:25px;height:25px;border:1px solid #29272080;background:var(--swatch);border-radius:40% 45% 42% 47%;padding:0}.swatch.active{outline:2px dashed var(--ink);outline-offset:3px}.draw-tools select{width:57px;padding:4px 2px;font-size:14px;height:31px}.draw-tools .text-button{font-size:15px}.draw-tools #undo{font-size:25px;padding:0 4px}.drawing-submit{display:flex;justify-content:space-between;align-items:center;gap:7px;flex-shrink:0}.drawing-submit small{font-size:9px}.drawing-submit .btn{min-width:55%}.phone.phase-draw .stage-content{gap:8px}.phone.phase-draw .prompt-stage h2{font-size:23px}.phone.phase-draw .prompt-stage .eyebrow{display:none}.phone.phase-draw .phone-footer{min-height:37px}.phone.phase-draw .phone-footer>span{font-size:8px;max-width:none}
/* Final tableau */
.winner-stage{position:relative;text-align:center;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.winner-portraits{display:flex;justify-content:center;flex:1;min-height:0;max-height:270px;width:75%}.winner-avatar{height:100%;width:auto;min-width:0;max-width:220px;flex:1;animation:winner-dance .8s ease-in-out infinite alternate}.winner-stage h1{font-size:57px;color:var(--red);max-width:100%;overflow-wrap:anywhere}.winner-stage p{font-size:21px}.winner-star{position:absolute;width:85px;height:95px;top:35%}.winner-star.one{left:9%;transform:rotate(-12deg)}.winner-star.two{right:9%;transform:rotate(17deg)}.host.phase-finished .stage-content{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:1fr auto;gap:15px 50px;padding:12px 15px}.host.phase-finished .winner-stage{grid-row:1 / 3}.host.phase-finished .again{justify-self:center;min-width:80%}.host.phase-finished .score-sheet{width:100%}.phone.phase-finished .winner-stage{flex:1;max-height:43%;gap:3px}.phone.phase-finished .winner-portraits{max-height:150px;min-height:55px}.phone.phase-finished .winner-stage h1{font-size:35px}.phone.phase-finished .winner-stage p{font-size:15px}.phone.phase-finished .winner-star{width:42px;height:47px}.phone.phase-finished .score-sheet{flex:1;min-height:150px}.phone.phase-finished .score-sheet h3{display:none}.phone.phase-finished .score-row .avatar{height:37px;width:30px}.phone.phase-finished .score-row .name{font-size:18px}.phone.phase-finished .score-row .score{font-size:17px}.phone.phase-finished .progress-note{font-size:9px}
/* Character wardrobe, powers, and sound live on their own sheets. */
.modal-backdrop{position:fixed;inset:0;background:#302a2075;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}.modal-sheet{position:relative;background:repeating-linear-gradient(0deg,transparent 0 31px,#8dada222 31px 32px),var(--sheet);border:2px solid var(--ink);box-shadow:7px 8px 0 #29272070;padding:27px 30px 24px;width:min(760px,100%);max-height:calc(var(--screen-height) - 48px);display:flex;flex-direction:column;gap:14px;animation:paper-arrive .22s both;min-height:0}.modal-sheet>h2{font-size:35px;padding-right:25px;flex-shrink:0}.modal-close{position:absolute;right:9px;top:6px;border:0;background:none;font:32px var(--hand);width:35px;height:35px;z-index:1}.character-editor{display:flex;min-height:0;gap:18px}.character-preview{width:32%;min-width:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#eddfbd80;border:1px dashed #b4a789;padding:10px;transform:rotate(-2deg)}.character-preview>.character-art{height:270px;max-height:40vh;width:100%}.character-preview .text-button{font-size:17px}.character-controls{flex:1;min-width:0;display:flex;flex-direction:column;gap:15px}.part-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex-shrink:0}.part-tabs button{border:1px dashed #9b907b;background:var(--paper);font-size:17px;padding:5px 2px}.part-tabs button.active{background:var(--yellow);border:1px solid var(--ink);transform:rotate(-3deg)}.part-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;min-height:0;flex:1;align-content:start}.part-option{background:#f1ead7;border:1px solid #c8bda5;display:flex;flex-direction:column;align-items:center;padding:4px 2px;min-width:0;position:relative}.part-option.active{border:2px solid var(--red);background:#efddc5;transform:rotate(-2deg)}.part-option>.character-art{width:100%;height:68px}.part-option>span:last-child{font:9px var(--mono);margin-top:3px}.color-dot{width:42px;height:42px;border:2px solid var(--ink);border-radius:42% 49% 38% 48%;margin:10px 0 8px}.character-controls .btn{font-size:19px}.role-reveal{display:flex;align-items:center;flex-direction:column;gap:13px;min-height:0;text-align:center}.modal-role{width:380px}.role-art{position:relative;height:200px;width:180px;flex-shrink:1;min-height:70px}.role-art>.character-art{width:100%;height:100%}.role-emblem{position:absolute;right:-28px;bottom:0;width:85px;height:95px;transform:rotate(12deg)}.secret-stamp{color:var(--red);border:2px solid var(--red);padding:4px 8px;font:11px var(--mono);transform:rotate(-4deg)}.role-description{font-size:23px;line-height:1.2}.role-reveal>p:not(.role-description):not(.secret-stamp):not(.notice){font-size:16px;color:var(--muted)}.role-reveal select{font-size:19px;padding:8px}.role-reveal label{margin:0}.role-reveal .btn{font-size:22px}.modal-audio,.modal-rules{width:480px}.audio-settings{text-align:center}.audio-settings>.doodle{width:90px;height:100px}.audio-settings p{font-size:19px;margin:10px 0 18px}.audio-settings label{text-align:left;margin-top:18px}.audio-settings input{accent-color:var(--red);padding:0;min-height:27px}.audio-settings .smallnote{font:11px var(--mono);margin-bottom:0}.rules-sheet{display:flex;flex-direction:column;gap:16px}.rules-sheet p{font-size:18px;line-height:1.3}.rules-sheet b{font-weight:400;color:var(--red);font-size:23px}.rules-sheet .btn{font-size:19px}
.pause-overlay{position:absolute;inset:70px 0 63px;background:#eee4ccc9;backdrop-filter:blur(5px);z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.pause-overlay span{font-size:62px;transform:rotate(-6deg);background:var(--yellow);padding:15px 30px}.phone .pause-overlay{inset:55px 0 0}.phone .pause-overlay span{font-size:39px}.phone .pause-overlay p{font-size:20px}#toast{position:fixed;left:50%;bottom:25px;z-index:150;background:var(--ink);color:var(--sheet);padding:14px 20px;width:max-content;max-width:calc(100% - 32px);font-size:18px;transform:translate(-50%,160px) rotate(-1deg);transition:transform .2s;box-shadow:3px 4px 0 #29272040;pointer-events:none}#toast.visible{transform:translate(-50%,0) rotate(-1deg)}.error-page{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:30px}.error-page h1{font-size:45px}.error-page .logo{width:170px}
/* Dots become eyes; circle and smile draw on, then the page comes through. */
.transition{position:fixed;inset:0;z-index:85;pointer-events:none;overflow:hidden;display:none;background:#edc75f}.transition.running{display:flex;align-items:center;justify-content:center;animation:curtain-out 1.15s both}.transition-logo{width:min(650px,76vw);animation:face-zoom 1.15s both}.transition .logo-letter{animation:letters-away 1.15s both}.transition .logo-face{opacity:1}.transition .face-circle,.transition .face-smile{stroke-dasharray:1;stroke-dashoffset:1;animation:draw-face .65s ease .08s forwards}.transition .face-smile{animation-delay:.22s}.transition.finale{background:#e9bf57;animation-duration:1.7s}.transition.finale .transition-logo{animation-duration:1.7s}.transition.finale .logo-letter{animation-duration:1.7s}.transition strong{position:absolute;bottom:23%;font-size:clamp(26px,4vw,55px);font-weight:400;transform:rotate(-4deg);background:var(--sheet);padding:9px 25px;z-index:3}.flames{position:absolute;left:-5%;right:-5%;bottom:-14%;display:flex;align-items:flex-end;justify-content:center;height:60%}.flame{height:100%;width:15%;margin:0 -2%;animation:fire-dance .3s steps(2,end) infinite alternate}.flame:nth-child(even){height:78%;animation-delay:-.2s}.flame:nth-child(3n){height:115%;animation-delay:-.1s}#celebration{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}#celebration i{position:absolute;left:var(--x);top:-40px;width:9px;height:17px;background:var(--color);transform:rotate(var(--r));animation:confetti-fall 2.3s cubic-bezier(.1,.6,.3,1) var(--delay) both}#celebration i:nth-child(3n){border-radius:50%;width:13px;height:13px}#celebration i:nth-child(4n){background:none;border:2px solid var(--color);width:18px;height:18px}
@keyframes idle-wiggle{0%,75%,100%{translate:0 0;rotate:0deg}80%{translate:0 -3px;rotate:-3deg}88%{translate:0 1px;rotate:3deg}95%{rotate:-1deg}}
@keyframes small-bob{from{translate:0 0;rotate:-2deg}to{translate:0 -4px;rotate:3deg}}
@keyframes paper-arrive{from{opacity:0;translate:0 12px;rotate:-3deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes score-swoop{from{opacity:0;translate:80px 15px;rotate:4deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes points-pop{0%{scale:.2;opacity:0}60%{scale:1.5;opacity:1}100%{scale:1;opacity:1}}
@keyframes thumb-pop{from{scale:.1;rotate:-30deg}80%{scale:1.3}to{scale:1;rotate:0deg}}
@keyframes urgent{0%{translate:0 0;rotate:0deg}50%{translate:2px -1px;rotate:-2deg}100%{translate:-1px 1px;rotate:1deg}}
@keyframes winner-dance{from{rotate:-5deg;translate:0 0}to{rotate:5deg;translate:0 -6px}}
@keyframes letters-away{0%{opacity:1}30%,100%{opacity:0}}
@keyframes draw-face{to{stroke-dashoffset:0}}
@keyframes face-zoom{0%{scale:.8;translate:0 0}55%{scale:1;translate:-8% 0}85%,100%{scale:7;translate:-50% 40%}}
@keyframes curtain-out{0%{opacity:0}12%,78%{opacity:1}100%{opacity:0}}
@keyframes fire-dance{from{translate:0 15px;rotate:-4deg}to{translate:0 -5px;rotate:4deg}}
@keyframes confetti-fall{0%{translate:0 -30px;rotate:0deg;opacity:1}90%{opacity:1}100%{translate:60px 100vh;rotate:650deg;opacity:0}}
@media(min-width:1600px){.home-logo{width:590px}.home-main{gap:100px}.home-story{padding-left:40px}.margin-note{left:45px;top:6%}.join-area{max-width:440px}.join-sheet{padding:35px 35px 27px}.join-sheet input{min-height:49px}.home-description{font-size:24px}.home-doodles{height:140px}.home-doodles .flower{width:105px;height:117px}.home-doodles .worm{width:170px;height:180px}.rule-note{padding:20px;max-width:500px}.home-footer{padding-top:20px}.lobby-grid{grid-template-columns:380px 1fr}.lobby-invite h1{font-size:82px}.bigcode{font-size:66px}.player-polaroid .avatar{height:145px;max-width:145px}.player-wall{max-height:470px}.host .stagebar{height:113px}.timer{font-size:68px}.countdown{width:250px;height:91px}.status-chip .avatar{height:85px;width:68px}.status-grid{min-height:100px}.host-illustration{max-height:300px}}
@media(max-width:1100px){#app{padding:12px 15px}.home{padding:20px 35px 14px 45px}.home-main{gap:25px;grid-template-columns:1.05fr 1fr}.home-logo{width:100%;margin-top:30px}.home-story{padding-left:0}.home-tagline{font-size:33px}.home-description{font-size:19px}.margin-note{top:12px;font-size:17px}.rule-note{gap:10px;padding:10px}.rule-note p{font-size:12px}.note-number{font-size:17px}.pencil-note{left:217px;font-size:14px}.home-doodles .worm{left:71px;width:130px}.home-doodles .flower{width:75px}.join-sheet{padding:24px 24px 20px}.home-star{right:-25px;width:65px}.home-pencil{right:-27px;width:60px}.shell{padding-left:45px;padding-right:26px}.desk:before{left:31px}.lobby-grid{grid-template-columns:280px 1fr;gap:27px}.lobby-invite{padding:23px 20px}.lobby-invite h1{font-size:54px}.bigcode{font-size:46px}.lobby-cast{gap:15px}.cast-heading h2{font-size:27px}.player-wall{gap:18px 12px}.player-polaroid .avatar{height:90px}.player-polaroid strong{font-size:16px}.empty-polaroid{min-height:126px}.lobby-start>span{font-size:15px}.lobby-start .btn{font-size:21px}.invite-arrow{display:none}.top-scribble{font-size:18px}.reveal-layout{gap:17px}.reveal-layout>.score-sheet{min-width:210px}.score-sheet{padding:13px}.host .option-title{font-size:22px}.host.phase-reveal .option-title{font-size:18px}}
@media(max-height:760px) and (min-width:681px){.home{padding-top:18px;padding-bottom:10px}.home-main{gap:45px}.home-story{padding-top:20px}.margin-note{top:3px;font-size:17px}.home-logo{max-width:435px;margin-top:28px}.home-description{font-size:18px;margin-top:12px}.home-tagline{font-size:34px}.crossout-note{font-size:23px}.home-doodles{height:82px;margin-top:0}.home-doodles .flower{width:65px;height:73px}.home-doodles .worm{width:110px;height:124px;left:79px;top:-10px}.pencil-note{top:30px;left:215px;font-size:15px}.rule-note{padding:9px 14px;margin-top:3px}.join-sheet h2{font-size:36px;margin-bottom:11px}.join-sheet{padding:20px 25px 17px}.join-sheet .code-input{min-height:44px;font-size:24px}.join-sheet input{min-height:38px;padding:7px 10px}.join-sheet .character-pick{margin:7px 0 5px}.join-sheet .character-pick .avatar{height:55px;width:44px}.join-sheet .btn{min-height:41px;font-size:22px;padding:8px 16px}.join-sheet .or-line{margin:10px 0;font-size:14px}.join-sheet label{margin-top:8px;margin-bottom:5px}.home-footer{min-height:29px;margin:4px 0 0}.join-area{max-width:350px}.join-arrow{top:-31px;font-size:17px}.topbar{min-height:56px}.stagebar{height:78px}.countdown{min-height:60px;width:172px}.timer{font-size:44px;min-width:95px}.clock-note{font-size:14px}.host-controls{min-height:50px;margin-top:10px}.host .prompt-stage h2{font-size:33px}.host .prompt-stage .eyebrow{margin-bottom:7px}.host .stage-content{gap:9px}.host-illustration{max-height:150px}.status-grid{min-height:63px;margin:0 auto}.status-chip .avatar{height:45px;width:42px}.status-chip>span:not(.avatar){font-size:10px}.lobby-grid{padding:22px 0 5px}.lobby-invite h1{font-size:50px;margin:12px 0}.bigcode{margin:12px -7px;font-size:46px}.lobby-invite{padding:22px}.lobby-invite>p:not(.eyebrow){font-size:16px;margin:6px 0}.player-wall{max-height:320px}.player-polaroid .avatar{height:90px}.lobby-start{gap:8px}.lobby-start .btn{min-height:42px}.host.phase-reveal .option{padding:10px 12px;gap:5px}.host.phase-reveal .prompt-stage h2{font-size:27px}.host.phase-reveal .score-row .avatar{height:35px;width:31px}.host.phase-reveal .score-row .name{font-size:17px}.host.phase-reveal .score-row .score{font-size:15px}.host.phase-reveal .score-sheet h3{font-size:23px}.host.phase-reveal .option-title{font-size:17px}.host.phase-reveal .voters{min-height:20px}.host.phase-reveal .voter .avatar{height:24px;width:22px}.host.phase-reveal .option-meta{font-size:9px}.host.phase-reveal .truth-stamp{font-size:10px}.host.phase-finished .winner-portraits{max-height:195px}.host.phase-finished .winner-stage h1{font-size:47px}}
@media(max-width:680px){body{font-size:17px}#app{padding:8px}.home{padding:15px 20px 9px 29px}.home:before{left:18px}.binding{width:9px}.home-top{min-height:28px}.tape-label{font-size:8px;padding:5px 7px}.edition{font-size:8px}.edition span{font-size:17px;margin:0 4px}.home-main{display:flex;flex-direction:column;gap:0;justify-content:center;min-height:0}.home-story{flex:none;display:block;height:143px;min-height:100px;width:100%;padding:0;position:relative}.margin-note,.home-description,.crossout-note,.rule-note,.pencil-note{display:none}.home-logo{width:222px;max-width:65%;margin:0 auto;position:relative;z-index:1}.home-tagline{font-size:22px;margin:-1px auto 0;width:max-content;transform:rotate(-3deg)}.home-doodles{position:absolute;inset:0;height:100%;width:100%;margin:0;pointer-events:none}.home-doodles .flower{width:46px;height:52px;left:0;top:36px}.home-doodles .worm{width:63px;height:74px;left:auto;right:-5px;top:52px}.join-area{width:100%;max-width:350px;margin:10px 0 0}.join-sheet{padding:18px 23px 15px;transform:rotate(.8deg)}.join-sheet h2{font-size:31px;margin:0 0 12px}.join-sheet label{font-size:10px;margin:8px 0 5px}.join-sheet input{min-height:39px;padding:7px 10px}.join-sheet .code-input{min-height:45px;font-size:23px}.join-sheet #name{font-size:16px}.character-pick{margin:5px 0 4px}.character-pick .avatar{width:45px;height:57px}.character-pick>span:nth-child(2){font-size:18px}.character-pick small{font-size:8px;margin-top:3px}.edit-arrow{font-size:27px}.join-sheet .btn{min-height:40px;font-size:21px;padding:8px 12px}.or-line{margin:9px 0;font-size:13px}.host-hint{font-size:8px;margin-top:9px}.join-arrow{display:none}.home-star{width:48px;height:54px;right:-16px;top:38px}.home-pencil{width:52px;height:63px;right:-22px;bottom:-15px}.home-footer{min-height:31px;gap:7px;margin-top:10px}.tiny-smile{font-size:0;gap:0}.tiny-smile .doodle{width:25px;height:29px}.home-footer .text-button{font-size:15px}.page-number{font-size:6px;bottom:2px}.modal-backdrop{padding:15px}.modal-sheet{max-height:calc(var(--screen-height) - 30px);padding:20px 18px 16px;gap:12px}.modal-sheet>h2{font-size:28px}.character-editor{flex-direction:column;gap:9px;min-height:0}.character-preview{width:100%;min-width:0;flex-direction:row;gap:20px;height:168px;flex-shrink:1;min-height:88px;padding:2px 15px;transform:rotate(-1deg)}.character-preview>.character-art{height:100%;max-height:170px;width:145px}.character-preview .text-button{font-size:16px;width:94px;line-height:1.3}.character-controls{gap:10px}.part-tabs{grid-template-columns:repeat(7,1fr);gap:3px}.part-tabs button{font-size:13px;padding:6px 0}.part-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.part-option>.character-art{height:56px}.part-option>span:last-child{font-size:8px}.character-controls .btn{font-size:18px;min-height:42px;padding:9px 4px}.color-dot{width:32px;height:32px;margin:9px 0}.modal-role{width:360px}.role-art{height:175px;width:155px}.role-emblem{height:78px;width:70px;right:-20px}.role-description{font-size:22px}.role-reveal{gap:11px}.modal-audio .doodle{width:70px;height:80px}.audio-settings p{font-size:17px}.rules-sheet{gap:12px}.rules-sheet p{font-size:16px}.rules-sheet b{font-size:21px}.rules-sheet .btn{font-size:17px}.shell.host{padding:0 16px 0 27px}.host:before{left:16px}.host .top-scribble{display:none}.host .topbar{min-height:55px;gap:8px}.host .logo{width:65px}.host .topbar .row{gap:10px}.host .room-tag{font-size:9px}.host .room-tag b{font-size:17px;letter-spacing:2px}.host .sound-button{font-size:11px;padding:5px}.host .stagebar{height:67px}.host .round-progress b{font-size:14px}.host .round-progress>span{width:19px;height:22px;font-size:11px}.host .round-progress{gap:5px}.host .countdown{min-height:48px;width:104px;padding:0 8px 7px}.host .clock-note{display:none}.host .timer{font-size:36px;min-width:78px}.host .prompt-stage h2{font-size:26px}.host .stage-instruction{font-size:16px}.host .status-grid{gap:3px;flex-wrap:wrap;min-height:55px}.host .status-chip{max-width:65px}.host .status-chip .avatar{height:41px;width:35px}.host .status-chip>span:not(.avatar){font-size:8px;max-width:62px}.host .status-chip>b{width:16px;height:17px;font-size:13px}.host-controls>span{font-size:8px;max-width:45%}.host-controls .text-button{font-size:14px}.host-controls .row{gap:10px}.host-controls .btn{font-size:17px;padding:7px 12px}.host .lobby-grid{grid-template-columns:1fr;gap:17px;padding:15px 0;min-height:0;display:flex;flex-direction:column}.host .lobby-invite{padding:9px 15px;width:100%;display:grid;grid-template-columns:1fr 1.3fr;gap:3px 10px;transform:rotate(-1deg);align-items:center}.lobby-invite .eyebrow{font-size:8px}.host .lobby-invite h1{font-size:29px;grid-column:1;grid-row:2 / 4;margin:0}.host .bigcode{font-size:36px;grid-column:2;grid-row:1 / 3;margin:4px 0;padding:3px;letter-spacing:4px}.host .lobby-invite>p:not(.eyebrow){display:none}.host .network-url{grid-column:2;font-size:9px;margin:0}.host .lobby-links{grid-column:1 / 3;gap:30px;margin-top:4px}.host .lobby-links .text-button{font-size:13px}.host .lobby-cast{gap:13px;width:100%;flex:1;min-height:0}.host .cast-heading h2{font-size:24px}.host .cast-heading>span{font-size:9px}.host .player-wall{gap:14px 10px;max-height:none}.host .player-polaroid,.host .empty-polaroid{min-height:0;padding:6px 2px}.host .player-polaroid .avatar{height:80px;max-height:15vh;max-width:85px}.host .player-polaroid strong{font-size:13px}.host .empty-polaroid .doodle{width:43px;height:50px}.host .empty-polaroid span{font-size:10px}.host .lobby-start>span{font-size:13px}.host .lobby-start .btn{font-size:20px;width:100%}.host .options{gap:12px 8px;padding:3px}.host .option{padding:10px 8px;gap:5px}.host .option-title{font-size:16px;gap:6px}.host .letter{font-size:10px;width:20px;height:22px}.host .options.count-7,.host .options.count-8,.host .options.count-9{grid-template-columns:repeat(2,minmax(0,1fr))}.host .reveal-layout{gap:10px}.host .reveal-layout>.score-sheet{display:none}.host.phase-reveal .option-title{font-size:15px}.host.phase-reveal .option-meta{font-size:8px}.host.phase-reveal .reveal-summary{font-size:16px}.host.phase-reveal .reveal-summary strong{font-size:20px}.host.phase-finished .stage-content{display:flex;gap:10px;padding:0}.host.phase-finished .winner-stage{flex:1;max-height:45%;min-height:170px}.host.phase-finished .winner-portraits{max-height:150px}.host.phase-finished .winner-stage h1{font-size:36px}.host.phase-finished .winner-stage p{font-size:16px}.host.phase-finished .score-sheet{flex:1;min-height:150px}.host.phase-finished .score-sheet h3{display:none}.host.phase-finished .score-row .avatar{width:25px;height:30px}.host.phase-finished .score-row .name{font-size:16px}.host.phase-finished .score-row .score{font-size:14px}.host.phase-finished .again{font-size:20px;min-height:40px}.transition strong{font-size:23px;width:83%;text-align:center;padding:8px 13px;bottom:22%}}
@media(max-height:710px) and (max-width:680px){.home{padding-top:9px;padding-bottom:4px}.home-top{min-height:23px}.home-story{height:116px;min-height:85px}.home-logo{width:175px;margin-top:0}.home-tagline{font-size:19px;margin-top:-1px}.home-doodles .flower{top:22px;height:46px;width:41px}.home-doodles .worm{top:33px;width:54px;height:63px}.join-area{margin:5px 0 0;max-width:330px}.join-sheet{padding:13px 19px 12px}.join-sheet h2{font-size:27px;margin-bottom:6px}.join-sheet .code-input{font-size:21px;min-height:39px}.join-sheet input{min-height:34px;padding:6px 9px}.join-sheet label{font-size:9px;margin:6px 0 3px}.character-pick .avatar{height:43px;width:37px}.character-pick>span:nth-child(2){font-size:17px}.character-pick small{font-size:7px;margin-top:2px}.join-sheet .btn{font-size:20px;min-height:36px;padding:7px 10px}.join-sheet .or-line{margin:7px 0;font-size:12px}.host-hint{margin-top:6px;font-size:7px}.home-footer{min-height:25px;margin-top:5px}.home-footer .text-button{font-size:13px}.home-star{top:28px;width:41px;height:45px}.home-pencil{width:45px;height:51px;right:-17px;bottom:-15px}.phone .topbar{min-height:47px}.phone .stagebar{height:56px}.phone .countdown{min-height:40px}.phone .timer{font-size:29px}.phone .stage-content{gap:7px}.phone .prompt-stage h2{font-size:23px}.phone .prompt-stage .eyebrow{font-size:8px;margin-bottom:6px}.phone .assignment{font-size:14px}.phone #submission textarea{min-height:53px;max-height:112px;font-size:18px;padding:6px 10px}.phone #submission input{font-size:16px;min-height:35px;padding:7px 9px}.phone #submission{gap:3px;max-height:275px}.phone #submission label{font-size:9px;margin-top:4px}.phone .btn{font-size:19px;min-height:39px;padding:8px 12px}.phone .skip{font-size:13px;padding:4px 0}.phone-footer{min-height:48px;margin-top:7px}.phone-footer>span{font-size:8px;max-width:110px}.role-trigger{font-size:15px}.role-trigger .doodle{width:30px;height:34px}.role-trigger small{font-size:7px}.phone .option-title{font-size:18px}.phone .option{padding:11px;gap:5px}.phone .options{gap:12px}.phone .reveal-summary{font-size:14px}.phone .reveal-summary strong{font-size:19px}.phone .voters{min-height:20px;gap:3px}.phone .voter .avatar{width:22px;height:25px}.phone .voter>span:last-child{max-width:50px;font-size:8px}.phone .option-meta{font-size:8px}.phone .result-tabs{height:29px}.phone .result-tabs button{font-size:16px}.phone .pager{height:30px}.phone .pager button{height:29px}.phone-lobby{gap:11px}.phone-lobby .lobby-self{height:180px;width:150px;max-height:28vh}.phone-lobby h1{font-size:30px}.phone-lobby>p:last-child{font-size:14px}.mini-cast .avatar{height:34px;width:30px}.phone .waiting{gap:10px}.phone .waiting-doodle{max-height:20vh;width:100px}.phone .waiting h3{font-size:25px}.phone .waiting p{font-size:15px}.phone .waiting .roast{font-size:9px;padding:8px 10px;margin-top:3px}.phone.phase-draw .prompt-stage h2{font-size:21px}.phone.phase-draw .stage-content{gap:6px}.drawing-assignment{font-size:14px;padding:6px 9px}.drawing-assignment strong{font-size:20px}.draw-tools{height:34px;gap:5px}.swatches{gap:7px}.swatch{width:22px;height:22px}.phone.phase-draw .phone-footer{min-height:29px;margin-top:5px}.phone .drawing-submit .btn{min-height:35px;font-size:18px}.modal-sheet{padding:17px 15px 13px;gap:9px}.modal-sheet>h2{font-size:25px}.character-preview{height:120px;min-height:70px;padding:0 10px}.character-preview>.character-art{width:112px}.character-controls{gap:8px}.part-option>.character-art{height:43px}.part-option>span:last-child{font-size:7px}.part-tabs button{font-size:12px;padding:5px 0}.character-controls .btn{font-size:17px;min-height:36px;padding:7px}.part-options{gap:5px}.color-dot{width:28px;height:28px;margin:5px 0}.role-art{height:145px;width:128px}.role-reveal{gap:8px}.role-description{font-size:20px}.role-reveal .btn{font-size:20px;padding:9px}.role-reveal>p:not(.role-description):not(.secret-stamp):not(.notice){font-size:14px}.rules-sheet{gap:10px}.rules-sheet p{font-size:14px}.rules-sheet b{font-size:19px}.rules-sheet .btn{font-size:15px;padding:9px}.phone.phase-finished .score-row .avatar{height:27px;width:25px}.phone.phase-finished .score-row .name{font-size:16px}.phone.phase-finished .score-row .score{font-size:14px}.phone.phase-finished .winner-stage h1{font-size:29px}.phone.phase-finished .winner-stage p{font-size:13px}}
@media(max-width:360px){.phone{padding-left:24px;padding-right:14px}.phone .round-progress b{font-size:13px;margin-left:1px}.phone .round-progress{gap:4px}.phone .countdown{width:87px}.phone .prompt-stage h2{font-size:22px}.phone .option-title{font-size:17px}.phone .topbar .identity{font-size:13px}.phone .room-tag b{font-size:12px}.draw-tools{gap:3px}.swatches{gap:6px}.swatch{width:20px;height:20px}.draw-tools .text-button{font-size:13px}.draw-tools select{width:47px;font-size:12px}.phone .drawing-submit small{font-size:8px}.part-tabs button{font-size:11px}.part-option>.character-art{height:39px}.home{padding-left:25px;padding-right:17px}.tape-label{font-size:7px}.edition{font-size:7px}.home-story{height:105px}.home-logo{width:163px}.home-tagline{font-size:17px}.join-sheet{padding:13px 17px 10px}.join-sheet #name{font-size:14px}.character-pick small{font-size:6px}}
@media(max-height:580px) and (min-width:681px){.home-story{padding-top:10px}.home-logo{width:290px;margin-top:27px}.home-tagline{font-size:27px}.crossout-note{font-size:20px}.home-description{font-size:15px;margin-top:7px}.home-doodles{height:58px}.home-doodles .flower{width:44px;height:49px}.home-doodles .worm{width:77px;height:89px;left:55px;top:-13px}.pencil-note{left:157px;top:17px;font-size:12px}.rule-note{padding:5px 9px;max-width:355px}.rule-note p{font-size:10px}.note-number{font-size:14px}.join-sheet h2{font-size:29px;margin-bottom:7px}.join-sheet{padding:14px 21px 12px}.join-sheet input{min-height:31px;font-size:15px!important}.join-sheet .code-input{min-height:34px;font-size:20px!important}.join-sheet label{font-size:9px;margin:5px 0 3px}.join-sheet .character-pick .avatar{height:40px;width:32px}.character-pick>span:nth-child(2){font-size:16px}.character-pick small{font-size:7px}.join-sheet .btn{font-size:19px;min-height:33px;padding:6px}.join-sheet .or-line{margin:6px 0;font-size:12px}.host-hint{font-size:7px;margin-top:6px}.home-top{min-height:25px}.home-footer{min-height:24px}.tiny-smile{font-size:8px}.home-footer .text-button{font-size:13px}.margin-note{font-size:14px;top:0}.join-arrow{font-size:15px;top:-26px}.join-area{max-width:320px}.home-star{height:67px;width:60px}.home-pencil{height:68px;width:59px}}
/* Keyboard opens over the notebook; compact the writing UI instead of hiding the action. */
.keyboard-open .phone .topbar{display:none}.keyboard-open .phone .stagebar{height:40px}.keyboard-open .phone .round-progress{display:none}.keyboard-open .phone .stagebar{justify-content:flex-end}.keyboard-open .phone .countdown{min-height:31px;height:31px;transform:none}.keyboard-open .phone .timer{font-size:23px}.keyboard-open .phone .prompt-stage h2{font-size:18px}.keyboard-open .phone .prompt-stage .eyebrow,.keyboard-open .phone .assignment,.keyboard-open .phone .phone-footer,.keyboard-open .phone .skip,.keyboard-open .phone .prompt-stage>p:not(.eyebrow){display:none}.keyboard-open .phone .stage-content{gap:5px;padding-bottom:8px}.keyboard-open .phone #submission textarea{min-height:42px;max-height:70px;padding:5px 8px;line-height:22px;font-size:17px}.keyboard-open .phone #submission input{min-height:31px;padding:4px 8px;font-size:16px}.keyboard-open .phone #submission label{font-size:8px;margin:1px 0}.keyboard-open .phone #submission .btn{min-height:33px;font-size:18px;padding:6px;margin-top:5px}.keyboard-open .home-story,.keyboard-open .home-top,.keyboard-open .home-footer,.keyboard-open .join-sheet h2,.keyboard-open .character-pick,.keyboard-open .join-sheet .or-line,.keyboard-open #create-room,.keyboard-open .host-hint,.keyboard-open .home-star,.keyboard-open .home-pencil{display:none}.keyboard-open .join-area{margin:0}.keyboard-open .join-sheet{padding:13px 18px}.keyboard-open .home{padding-top:8px;padding-bottom:8px}.keyboard-open .home-main{justify-content:center}.keyboard-open .join-sheet .btn{margin-top:8px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.transition{display:none!important}}

.phone .long-prompt h2{font-size:22px}.phone .options.count-1 .option-title{font-size:24px}.phone .options.count-1 .option{justify-content:center;padding:20px}.phone.phase-reveal .options.count-1 .option{justify-content:center}.phone.phase-draw .long-prompt h2{font-size:20px}
@media(max-height:710px) and (max-width:680px){.phone .long-prompt h2{font-size:20px}.phone .options.count-1 .option-title{font-size:22px}.phone .options.count-1 .option{padding:18px}.phone.phase-draw .long-prompt h2{font-size:19px}}