@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{--ink:#20291f;--muted:#727b6c;--paper:#f7f5ed;--lime:#dbf17e;--green:#275b3d;--orange:#f3a66f;--line:#dedfd3;--white:#fffefa}*{box-sizing:border-box}html{min-height:100%;background:var(--paper)}body{margin:0;color:var(--ink);font-family:'DM Sans',sans-serif;font-size:15px}.page{max-width:1280px;min-height:100vh;margin:auto;padding:0 48px;display:flex;flex-direction:column}.topbar{height:91px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{color:var(--ink);font-family:'Space Grotesk',sans-serif;font-size:27px;letter-spacing:-1.8px;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:9px}.brand-icon{font-size:34px;line-height:1;color:#386c47}.brand-dot{color:#ed9465;margin-left:-9px}.top-note,footer,.eyebrow,.label,.tag,.smallcaps{text-transform:uppercase;letter-spacing:1.6px;font-size:10px;font-weight:700}.top-note{color:#87907c}main{flex:1;width:100%;display:flex;align-items:center;justify-content:center}.home{width:100%;display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center;padding:68px 30px 80px}.intro{max-width:610px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--green);background:#e6edcf;padding:10px 13px;border-radius:5px;letter-spacing:1.3px}.eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:#5c9252}.intro h1{font:700 clamp(60px,7.2vw,94px)/.99 'Space Grotesk',sans-serif;letter-spacing:-6px;margin:27px 0 24px}.intro h1 em{font-style:normal;color:#56845a}.intro p{font-size:17px;line-height:1.7;color:#687264;max-width:430px;margin:0}.intro-bottom{margin-top:45px;display:flex;align-items:center;gap:16px}.stack{display:flex}.stack span{width:36px;height:36px;border-radius:50%;border:3px solid var(--paper);display:grid;place-items:center;font-size:16px;margin-left:-6px;background:#f1bb96}.stack span:first-child{margin-left:0;background:#d5dfac}.intro-bottom strong{display:block;font-size:13px}.intro-bottom small{display:block;color:#91988b;font-size:12px;margin-top:3px}.card{background:var(--white);border:1px solid #e7e9df;border-radius:14px;box-shadow:0 12px 40px #3a49340c;padding:33px}.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.card-head h2{font:700 25px 'Space Grotesk',sans-serif;letter-spacing:-1px;margin:0}.card-head span{font-size:19px;color:#72a269}.label{display:block;color:#7c8575;margin:0 0 9px;letter-spacing:1.1px}input,select{font:600 15px 'DM Sans',sans-serif;width:100%;height:52px;border:1px solid #e1e5dc;border-radius:7px;background:#fbfcf8;color:var(--ink);padding:0 15px;outline:none}input:focus,select:focus{border-color:#81aa79;box-shadow:0 0 0 3px #c9e3bd66}input::placeholder{color:#aab1a4;font-weight:400}.field{margin-bottom:20px}.btn{font:700 14px 'DM Sans',sans-serif;border:0;border-radius:7px;min-height:52px;padding:0 18px;cursor:pointer;transition:transform .15s,background .15s;display:flex;justify-content:center;align-items:center;gap:10px;width:100%}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--green);color:white}.btn-primary:hover{background:#19472d}.btn-light{background:#edf3dd;color:var(--green)}.btn-light:hover{background:#e0eac7}.btn-ghost{background:transparent;color:#70806d;min-height:38px}.arrow{margin-left:auto;font-size:20px;font-weight:400}.divider{display:flex;align-items:center;gap:13px;color:#a9b0a2;font-size:11px;margin:22px 0}.divider:before,.divider:after{content:'';height:1px;flex:1;background:#edf0e9}.join-row{display:flex;gap:9px}.join-row input{text-transform:uppercase;letter-spacing:2px}.join-row button{width:auto;min-width:115px}.hint{font-size:12px;color:#969f91;line-height:1.5;margin:15px 0 0}.features{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;color:#778273;font-size:12px}.features span:before{content:'✳';color:#6d9a68;margin-right:6px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:24px 0 27px;color:#a2aa9b;font-size:9px}.game{max-width:760px;width:100%;padding:52px 0 70px}.game-top{display:flex;justify-content:space-between;align-items:start;gap:15px;margin-bottom:25px}.back{border:0;background:none;padding:0;color:#82907d;cursor:pointer;font:600 12px 'DM Sans';margin-bottom:13px}.game h1{font:700 40px/1 'Space Grotesk';letter-spacing:-2px;margin:0}.room-pill{background:#e8efdc;color:#466b44;border-radius:6px;padding:10px 12px;font-size:11px;font-weight:700;letter-spacing:1px;white-space:nowrap}.scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.player{background:#fffefa;border:1px solid #e8eadd;border-radius:10px;padding:17px 18px;display:flex;align-items:center;gap:12px}.avatar{height:38px;width:38px;flex:none;background:#e9efce;border-radius:50%;display:grid;place-items:center;font-size:17px}.player:nth-child(2) .avatar{background:#f9dfcc}.player-info{min-width:0;flex:1}.player-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-info small{color:#9aa395;font-size:11px}.score{font:700 26px 'Space Grotesk'}.board{background:var(--white);border:1px solid #e7e9df;border-radius:14px;padding:30px;box-shadow:0 12px 40px #3a49340a}.board h2{font:700 25px 'Space Grotesk';letter-spacing:-.8px;margin:8px 0}.board p{color:#7a8475;line-height:1.6;margin:8px 0 20px}.tag{display:inline-block;color:#6d8e5c;letter-spacing:1.1px}.share{display:flex;gap:10px;margin-top:18px}.share-code{flex:1;background:#f2f5e9;border:1px dashed #c9d7b7;border-radius:7px;display:flex;justify-content:center;align-items:center;font:700 24px 'Space Grotesk';letter-spacing:5px;min-height:58px}.share .btn{width:auto;min-width:135px}.timer-line{display:flex;align-items:center;justify-content:space-between;gap:12px}.timer{height:68px;width:68px;flex:none;border-radius:50%;background:var(--lime);display:grid;place-items:center;font:700 26px 'Space Grotesk'}.timer.urgent{background:#ffd0b6}.word-list{list-style:none;padding:0;margin:22px 0;display:grid;gap:8px}.word{width:100%;border:1px solid #e6eadd;border-radius:8px;background:#f9faf5;min-height:57px;padding:0 15px;display:flex;align-items:center;text-align:left;gap:12px;color:var(--ink);font:700 17px 'Space Grotesk';cursor:pointer}.word .check{height:25px;width:25px;border-radius:50%;border:1px solid #c6d3bc;display:grid;place-items:center;color:transparent}.word.done{background:#edf5db;color:#809277;text-decoration:line-through}.word.done .check{background:#79a46d;border-color:#79a46d;color:white}.word:disabled{cursor:default}.waiting-art{height:100px;width:100px;background:#eef4dd;display:grid;place-items:center;border-radius:50%;font-size:43px;margin:5px 0 22px}.steps{display:flex;gap:8px;margin:20px 0}.step{background:#f5f7ed;border-radius:8px;padding:12px;font-size:12px;line-height:1.4;flex:1;color:#66725f}.step b{display:block;color:#71966b;margin-bottom:4px}.notice{margin-top:16px;color:#9aa395;font-size:12px;line-height:1.5}.loading{color:#7c8875}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;transition:.2s;background:#253d2a;color:white;border-radius:8px;padding:12px 18px;font-size:13px;z-index:2;max-width:90%;text-align:center}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@media(max-width:860px){.page{padding:0 21px}.topbar{height:72px}.brand{font-size:24px}.top-note{font-size:9px}.home{grid-template-columns:1fr;gap:33px;padding:48px 0 45px}.intro h1{font-size:63px;letter-spacing:-4px;margin:22px 0 18px}.intro p{font-size:15px}.intro-bottom{margin-top:25px}.card{padding:25px}.features{gap:14px;margin-top:21px}.game{padding:35px 0 50px}.game h1{font-size:34px}.board{padding:23px}.player{padding:13px 11px;gap:8px}.avatar{height:34px;width:34px}.player-info strong{font-size:13px}.score{font-size:22px}footer{gap:12px;font-size:8px}.steps{gap:6px}.step{padding:9px;font-size:11px}}@media(max-width:360px){.top-note{display:none}.intro h1{font-size:54px}.join-row{flex-direction:column}.join-row button{width:100%}.share{flex-direction:column}.share .btn{width:100%}}