@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--purple:#743ee8;--ink:#302640;--muted:#91899d;--line:#eae5ef}*{box-sizing:border-box}body{margin:0;background:#f7f5fa;color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b9a0fb;outline-offset:3px}header{height:86px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;padding:0 max(5%,calc((100vw - 1400px)/2))}.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:43px;letter-spacing:-3px;color:var(--purple);text-decoration:none}.logo span{color:#f3ad33}.logo i{font-size:25px;position:relative;top:-17px;left:3px;font-style:normal}.tagline{border-left:1px solid var(--line);padding-left:28px;color:var(--muted)}header button{margin-left:auto}.quiet{background:none;border:0;color:#776a8e;font-weight:600}.quiet:hover{color:var(--purple)}main{max-width:1400px;margin:auto;padding:36px 34px 0}.intro{display:flex;align-items:center;justify-content:space-between;padding:0 8px 30px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--purple)}.eyebrow span{display:inline-block;background:#ab87fb;width:7px;height:7px;border-radius:50%;margin-right:7px}h1{font-family:'Space Grotesk',sans-serif;font-size:39px;line-height:1.12;letter-spacing:-1.7px;margin:15px 0 13px}h1 span{color:var(--purple)}.intro p{color:#857b91;margin:0}.doodle{width:245px;margin-right:90px;transform:rotate(-5deg)}.doodle svg{width:210px;height:130px}.doodle span{display:block;font-size:12px;color:#9886b4;text-align:center}.workspace{display:grid;grid-template-columns:205px minmax(0,1fr) 255px;gap:17px}.panel{background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 4px 7px #39204603}.panel-title{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #f2eef7;font-weight:700}.pill{background:#f5f2fa;border-radius:5px;padding:4px 7px;font-size:9px;font-weight:500;color:#91859f}.players{display:flex;flex-direction:column}.player{display:flex;align-items:center;gap:10px;margin:9px;padding:11px 8px;border-radius:9px}.player:first-child{background:#f5f0ff}.avatar{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#eee4ff;font-size:20px}.player strong{font-size:12px;display:block}.player small{display:block;color:#9b8daa;font-size:10px;margin-top:3px}.points{margin-left:auto;font-size:12px;font-weight:700;color:var(--purple)}.aside-bottom{margin-top:auto;padding:22px 18px;border-top:1px dashed var(--line)}.tiny{font-size:9px;font-weight:700;letter-spacing:1px;color:#a195af}.aside-bottom p{font-size:11px;line-height:1.8;color:#a297ac}.board-head{height:77px;padding:17px 23px;display:flex;justify-content:space-between;align-items:center}.word{font-weight:600;font-size:16px;margin-top:5px}.timer{display:flex;align-items:center;gap:5px;color:#7f6e9b;background:#f6f2fc;border-radius:10px;padding:10px;font-size:11px}.timer b{font-size:18px;color:var(--purple)}.canvas-wrap{position:relative;background:#fff;border-top:1px solid #f0edf5;border-bottom:1px solid #f0edf5;aspect-ratio:1000/650;background-image:radial-gradient(#e9e4f0 .7px,transparent .7px);background-size:18px 18px}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}#canvasWelcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;padding:20px}.sketch{font-size:65px;color:#b09ccf;transform:rotate(-15deg);line-height:1}#canvasWelcome h2{font-size:16px;font-weight:600;margin:20px 0 9px}#canvasWelcome p{font-size:12px;color:#a69aad;margin:0}#canvasWelcome span{font-size:10px;color:#c0b5cc;margin-top:22px}.toolbar{padding:13px 15px;display:flex;align-items:center;gap:9px}.toolbar button{background:#f8f6fa;border:1px solid transparent;border-radius:6px;height:29px;min-width:29px;color:#8b7c9a;font-size:20px}.toolbar button.selected{border-color:var(--purple);color:var(--purple)}#colors{display:flex;gap:6px}#colors button{min-width:20px;width:20px;height:20px;border-radius:50%;border:2px solid white;outline:1px solid transparent}#colors button.selected{outline-color:var(--purple)}.separator{height:24px;width:1px;background:var(--line);margin:0 4px}.toolbar select{border:0;background:#f8f6fa;font-size:10px;padding:8px;color:#82728f;border-radius:5px}.board-foot{background:#fcfbfe;border-top:1px solid #f3eff8;padding:11px 17px;font-size:10px;color:#9c8faa;display:flex;justify-content:space-between;align-items:center}.guesses{display:flex;flex-direction:column}#messages{flex:1;min-height:180px;max-height:350px;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}.empty-chat{margin:auto;text-align:center;color:#aa9eb5}.empty-chat span{font-size:30px;filter:grayscale(1);opacity:.5;display:block;margin-bottom:18px}.empty-chat strong{font-size:12px;font-weight:500}.empty-chat p{font-size:11px;line-height:1.7}#guessForm{padding:12px;border-top:1px solid var(--line)}.input-row{display:flex;gap:7px}input{min-width:0;border:1px solid #e9e2f0;background:#faf8fd;padding:11px;border-radius:8px}#guess{width:100%;font-size:11px}.input-row button{background:var(--purple);color:white;border:0;border-radius:8px;min-width:34px;font-size:21px}#guesser{width:100%;margin-bottom:8px;border:1px solid var(--line);padding:6px;border-radius:6px}.message{font-size:12px;line-height:1.5;overflow-wrap:anywhere}.message strong{color:#8769b2}.message.success{background:#eaf9ee;color:#278448;padding:9px;border-radius:8px}.message.system{color:#9a89ad;font-size:11px}.settings{margin-top:24px;border:1px solid var(--line);border-radius:14px;background:white;padding:22px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}.settings h2{font-size:18px;margin:0 0 5px}.settings p{color:#a095aa;font-size:11px;margin:0}.modes{display:flex;flex:1;gap:12px}.mode{display:flex;align-items:center;gap:12px;flex:1;border:1px solid var(--line);background:#fff;text-align:left;border-radius:10px;padding:15px}.mode>span{font-size:24px;color:#a08aae}.mode strong{font-size:12px;display:block}.mode small{display:block;font-size:10px;color:#a194ac;margin-top:4px}.mode i{margin-left:auto;font-size:12px;font-style:normal;color:#a38dbb}.mode.active{border-color:#ab88f0;background:#f9f5ff}.mode.active>span,.mode.active i{color:var(--purple)}.primary{background:var(--purple);border:0;color:white;border-radius:9px;padding:16px 23px;font-weight:600;font-size:12px;box-shadow:0 4px 0 #6030c9}.primary:hover{background:#6630d8}.primary span{margin-left:15px}#groupSettings{width:100%;padding-top:10px}#groupSettings label{display:flex;gap:15px;align-items:center}#groupSettings input{flex:1}#groupSettings small{display:block;margin-top:8px;color:#9683a9}footer{display:flex;align-items:center;gap:20px;color:#b1a6bc;font-size:10px;padding:22px 4px}footer>span:last-child{margin-left:auto}.small{font-size:25px;letter-spacing:-1.5px;color:#b5a9c4}dialog{border:1px solid var(--line);border-radius:20px;padding:32px;max-width:470px;width:90%;color:var(--ink);box-shadow:0 20px 90px #21113c40}dialog::backdrop{background:#26143d80;backdrop-filter:blur(5px)}dialog h2{font-size:27px;letter-spacing:-1px}dialog p{line-height:1.8;color:#9684a6}dialog .primary{width:100%;margin-top:12px}.choices{display:flex;gap:10px}.choices button{flex:1;border:1px solid #ccb4f5;padding:15px 5px;border-radius:10px;background:#f8f3ff;color:#794dc1}.result-word{font-size:32px;font-weight:bold;color:var(--purple)}[hidden]{display:none!important}@media(min-width:1500px){main{padding-top:45px}}@media(max-width:1100px){.workspace{grid-template-columns:155px minmax(0,1fr) 205px}.toolbar{gap:5px;padding:10px 7px}#colors{gap:2px}.settings{gap:16px}.modes{min-width:65%}.doodle{margin-right:30px}.primary{padding:15px}.word{font-size:14px}}@media(max-width:800px){header{height:70px;padding:0 22px}.tagline{display:none}main{padding:24px 16px}.intro{padding-bottom:22px}h1{font-size:30px}.intro p{font-size:12px}.doodle{display:none}.workspace{grid-template-columns:1fr}.players{order:2}.players .panel-title,.aside-bottom{display:none}#playerList{display:flex;flex-wrap:wrap}.player{flex:1;min-width:120px}.board{order:1}.guesses{order:3}#messages{min-height:120px;max-height:180px}.toolbar{justify-content:center;gap:8px;padding:13px 8px}.modes{width:100%;flex:none}.settings>.primary{width:100%}.mode{padding:12px 8px;gap:8px}.mode small{font-size:9px}.mode>span{display:none}.settings{padding:18px}footer>span:last-child{display:none}.board-head{padding:16px}.word{font-size:13px}#groupSettings label{display:block}#names{width:100%;margin-top:8px}}
.online-hub{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 26px;background:#eee5ff;border:1px solid #dfcdfc;border-radius:16px;margin-bottom:24px}.online-hub h2{font-size:20px;margin:9px 0}.online-hub p{margin:0;color:#8a71a6;font-size:12px}.hub-actions,.room-actions{display:flex;gap:10px;flex-wrap:wrap}.outline{border:1px solid #d7c5ed;background:white;border-radius:9px;padding:13px 16px;color:#755393;font-weight:600;font-size:12px}.outline:hover{background:#f9f4ff}.room-bar{padding:23px;background:white;border:1px solid #d8c1fb;border-radius:16px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}.room-bar h2{margin:5px 0 7px;font-size:23px}#connection{font-size:11px;color:#41926b}.room-controls{width:100%;display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:15px}.room-controls label{font-size:12px;color:#907ba4}.room-controls select{margin-left:9px;padding:9px;border:1px solid var(--line);border-radius:7px;background:#faf7ff;color:#674780}.room-controls .primary{margin-left:auto}#roomAccess{font-size:11px;color:#9b88ac}#onlineError{padding:12px;margin-bottom:15px;border-radius:8px;background:#fff1e5;color:#9a5827}.online-form label{display:block;font-size:12px;color:#826896;margin:16px 0 5px}.online-form input,.online-form select,.online-form textarea{display:block;width:100%;padding:12px;border:1px solid #e6daef;border-radius:8px;background:#fcfaff;font:inherit;color:var(--ink)}.online-form .outline{width:100%;margin-top:12px}.online-form p{font-size:12px}.form-error{color:#bd4c63;font-size:12px;margin-top:12px;line-height:1.5}.invite-text{font-size:11px!important;word-break:break-all;resize:none;min-height:82px}.invite-actions{display:flex;gap:8px;margin:12px 0}.invite-actions button{flex:1}.invite-actions .outline{margin:0}.invite-warning{background:#fff6e5;padding:10px;border-radius:8px;color:#9d7d46!important}.room-overlay{pointer-events:auto!important;background:#ffffffed}.room-overlay .choices{max-width:90%;margin-top:16px}.room-overlay .choices button{font-size:14px;min-width:95px}.room-overlay h2{font-size:22px!important}.room-overlay p{line-height:1.8;font-size:13px!important;max-width:380px}.room-overlay .rank{padding:8px;color:#70518b}.kick{padding:3px;border:0;background:none;color:#a995bb;font-size:13px;margin-left:3px}.playing-online .intro{padding-bottom:20px}.playing-online .intro h1{font-size:28px}.playing-online .doodle{display:none}.playing-online .toolbar.disabled{opacity:.45;pointer-events:none}.playing-online .settings{display:none}.playing-online .board-foot{min-height:40px}.online-form .toggle-line{display:flex;align-items:center;justify-content:space-between;gap:15px}.online-form .toggle-line input{width:20px;height:20px}.connection-error{color:#c57938!important}@media(max-width:800px){.online-hub{display:block;padding:20px}.online-hub h2{font-size:18px}.hub-actions{margin-top:18px}.hub-actions button{flex:1;min-width:140px}.room-controls{flex-wrap:wrap;gap:12px}.room-controls .primary{width:100%}.room-bar{padding:18px}.room-overlay h2{font-size:17px!important}.room-overlay p{font-size:11px!important}.room-overlay .choices button{min-width:70px;padding:12px 5px;font-size:12px}dialog{padding:24px}}
.icon{display:inline-block;width:20px;height:20px;vertical-align:middle;flex-shrink:0}.logo i .icon{width:24px;height:24px}.sketch .icon{width:65px;height:65px}.avatar .icon{width:22px;height:22px}.empty-chat .icon{width:32px;height:32px}.primary,.outline{display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary .icon,.outline .icon,.quiet .icon{width:16px;height:16px}.toolbar .icon{width:19px;height:19px}.kick .icon{width:13px;height:13px}.toolbar.disabled{opacity:.4;pointer-events:none}.solo-title{display:flex;gap:13px;align-items:center}.solo-title>.icon,.solo-title>span .icon{width:28px;height:28px;color:var(--purple)}.solo-controls{display:flex;gap:18px;flex:1;justify-content:center}.solo-controls label{font-size:12px;color:#8f7aa1;display:flex;align-items:center;gap:8px}.solo-controls select{padding:10px;background:#faf7ff;color:#5f4775;border:1px solid var(--line);border-radius:8px}.settings .level-note{width:100%;font-size:12px;color:#8b729e;border-top:1px solid var(--line);padding-top:14px}.room-controls{flex-wrap:wrap;gap:14px}.room-controls select{max-width:205px}.room-controls #roomAccess{flex-basis:100%;order:5}.avatar{font-family:'DM Sans',sans-serif;font-weight:700;font-size:15px}.player{min-width:0}.player>div:nth-child(2){min-width:0;overflow-wrap:anywhere}.points{flex-shrink:0}.online-form .primary{width:100%}dialog{max-height:90dvh;overflow:auto}#modal .outline{margin-top:10px}.room-overlay .rank{font-size:13px;padding:4px}.room-overlay h2{margin:12px 0 8px!important}@media(max-width:800px){.solo-controls{width:100%;justify-content:flex-start;flex-wrap:wrap}.settings .level-note{line-height:1.6}.room-controls label{display:flex;flex:1;min-width:140px;flex-direction:column;align-items:flex-start;gap:5px}.room-controls select{margin:0;width:100%;max-width:none}.room-controls #startOnline{margin:0}.online-form h2{font-size:23px}.online-form label{margin-top:11px}.online-form input,.online-form select{padding:9px}.room-overlay .sketch .icon{width:44px;height:44px}.room-overlay{padding:12px!important}.room-overlay .rank{font-size:11px;padding:2px}}