:root{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#193c2e;background:#faf8f1;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--paper:#faf8f1;--green:#245c3e;--green-soft:#e8efe2;--red:#a84439;--muted:#767c70;--line:#dedfd2;--gold:#c78b33}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:0;color:inherit;background:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{cursor:default}a{color:inherit}svg{flex-shrink:0;vertical-align:middle}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #68957a;outline-offset:4px}h1,h2,h3,p{margin:0}button{transition:background .14s,transform .14s,box-shadow .14s}button:not(:disabled):active{transform:translateY(1px)}input,select{color:#263e31;background:#fffefa;border:1px solid var(--line);border-radius:10px;padding:11px 13px;min-height:44px;min-width:0}input:focus,select:focus{outline-color:var(--green)}small{font-size:12px}.app{max-width:1344px;margin:auto;padding:0 40px;min-height:100vh;min-height:100svh}.topbar{height:83px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:18px}.brand{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:800;letter-spacing:-1px;padding:8px 0;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:31px;height:31px;color:var(--green);transform:rotate(-9deg)}.brand-mark svg{width:27px}.edition{font-size:9px;letter-spacing:1.8px;font-weight:600;color:#818779;margin-left:20px}.nav-actions{display:flex;align-items:center;gap:20px}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 0;font-size:12px;font-weight:550;color:#586e5c}.text-button:hover{color:#173f29}.icon-button{width:38px;height:38px;display:grid;place-items:center;border:1px solid #dcdfd1;border-radius:50%;background:#fffdf7}.icon-button:hover{background:#e8efe2}.icon-button svg{width:17px;height:17px}.skip-link{position:absolute;top:-100px;left:20px;z-index:999;background:var(--green);color:white;padding:14px;border-radius:8px}.skip-link:focus{top:12px}.page-heading{text-align:center;padding-top:25px;position:relative}.little-crown{color:#d09b45;display:block;margin:0 auto 1px;width:22px;height:21px;transform:rotate(-10deg)}.little-crown svg{width:22px;height:20px}.page-heading h1{font-weight:900;font-size:clamp(40px,5.2vw,69px);letter-spacing:-3px;line-height:1.05;color:#245639}.page-heading h1 b{color:#9f4034;font-weight:900}.page-heading p{font-size:14px;margin-top:11px;color:#7b7d6c;letter-spacing:.2px}.studio-heading{text-align:center;padding:32px 10px 8px}.studio-heading h1{font-size:32px;letter-spacing:-1px;line-height:1.2;margin:8px 0}.studio-heading p{color:var(--muted);font-size:14px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#7c866f;display:block}.round-hud{min-height:114px;display:grid;grid-template-columns:190px 1fr 190px;align-items:center;padding:12px 6px 0;position:relative;z-index:2}.round-pill{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:750;letter-spacing:1.7px}.round-number{display:grid;place-items:center;font-size:23px;font-weight:800;width:47px;height:48px;border:1px solid var(--line);border-radius:14px;letter-spacing:-1px;background:#f4f3e9}.round-pill small{display:block;letter-spacing:0;font-weight:400;color:#7c8576;margin-top:6px;font-size:11px}.puzzle-hud{text-align:center;min-width:0}.arena-motto{font-size:9px;letter-spacing:2.6px;color:#9a9d90}.arena-motto strong{display:block;margin-top:7px;font-size:10px;color:#657661;font-weight:650}.at-home .round-hud{margin-top:4px;min-height:77px}.timer-pill{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:27px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-1px}.timer-pill small{font-size:8px;letter-spacing:1.8px;color:#828878;font-weight:600;display:block;margin-top:1px;text-align:center}.time-low{color:#aa4435}.result-motto{font-size:13px;letter-spacing:3px;font-weight:700;color:#76826d}.category{display:inline-flex;gap:5px;align-items:center;font-size:11px;color:#6d7c5d;margin-bottom:11px}.category svg{width:15px;height:15px}.word-slots{display:flex;gap:6px;justify-content:center;max-width:100%}.letter-slot{display:grid;place-items:center;width:clamp(27px,3.5vw,44px);height:49px;background:#fffdfa;border:1px solid #dce0d1;box-shadow:0 2px 0 #e5e6db;border-radius:10px;font-size:24px;line-height:1;font-weight:800;position:relative}.letter-slot:not(.revealed):after{content:'';position:absolute;bottom:14px;width:12px;height:2px;background:#a1ab9a;border-radius:1px}.letter-slot.revealed{background:#edf2e8;border-color:#c8d8bd;color:#245e3a}.letter-slot.revealed>span{animation:letter-reveal .2s ease-out}.word-slots.lost .letter-slot{background:#f6eeea;border-color:#e4d3cd;color:#986052}.arena{height:326px;position:relative;isolation:isolate;overflow:hidden;touch-action:pan-y}.canvas-host{position:absolute;inset:0}.team-canvas{display:block;width:100%;height:100%;outline:none;touch-action:pan-y}.is-studio .team-canvas{cursor:grab;touch-action:none}.is-studio .team-canvas:active{cursor:grabbing}.studio-open .arena{height:390px}.graphics-notice{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);max-width:95%;padding:8px 12px;border:1px solid var(--line);background:#fffdf7;border-radius:8px;font-size:11px;z-index:10;box-shadow:0 2px 12px #1d3d2210}.studio-instruction{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#899382;font-size:11px;pointer-events:none}.team-strip{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:12px;padding:12px 10px 20px;border-bottom:1px solid var(--line)}.team-info{display:flex;align-items:center;gap:10px;min-width:0}.team-info b{display:block;font-size:14px;font-weight:750;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.team-info small{display:block;font-size:10px;margin-top:5px;color:#7e8775}.team-info small>span{font-weight:750}.team-emblem{width:33px;height:33px;background:#e7efdf;border:1px solid #d0dfc5;border-radius:11px;display:grid;place-items:center;flex-shrink:0}.team-emblem svg{width:19px;height:19px}.red-team{justify-content:flex-end;text-align:right;color:#994638}.red-team .team-emblem{background:#f4e5dd;border-color:#e9d3c7}.offline-label{font-size:10px;font-weight:400;font-style:normal;color:#9c9585}.energy{display:flex;gap:3px;margin-left:7px;align-self:center;flex-shrink:0}.energy i{width:5px;height:15px;background:#6e995e;border-radius:2px}.energy.red{margin-right:7px;margin-left:0}.energy.red i{background:#b36551}.energy i.empty{background:#e4e5d9}.lead-caption{text-align:center;font-size:10px;color:#788370}.balance{height:3px;width:92px;margin:10px auto 0;background:linear-gradient(90deg,#84a57c,#e7e2cd 48%,#bb7967);border-radius:3px;position:relative}.balance i{position:absolute;width:6px;height:6px;border-radius:50%;background:#d2a34e;border:1px solid #b6904b;top:-1.5px;transform:translateX(-50%);transition:left .42s ease}.game-table{padding:23px 0 0;min-height:170px;max-width:840px;margin:0 auto}.home-panel{max-width:790px;margin:auto}.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mode-card{border-radius:14px;min-height:85px;display:flex;align-items:center;gap:13px;text-align:left;padding:16px 18px;border:1px solid #24583c;box-shadow:0 3px 0 #163d27;background:#285c3e;color:#fffdf2}.mode-card>b{font-weight:700}.mode-card>span:nth-child(2){flex:1}.mode-card b{font-size:17px;letter-spacing:-.25px;display:block}.mode-card small{display:block;font-size:11px;color:#c8dbc5;margin-top:6px;font-weight:400;line-height:1.3}.mode-symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#ffffff10}.mode-card:hover:not(:disabled){background:#1b4b30;box-shadow:0 4px 0 #153e26;transform:translateY(-1px)}.mode-card.friend{background:#fffcf5;color:#394d37;border-color:#d9dccb;box-shadow:0 3px 0 #e0e0d0}.mode-card.friend .mode-symbol{background:#edf0e3;color:#7b896e}.mode-card.friend small{color:#8a8f7f}.mode-card.friend:hover:not(:disabled){background:#eff2e6;border-color:#c3cdb7;box-shadow:0 4px 0 #d7ddcd}.mode-card:disabled{opacity:.65}.home-options{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:17px}.difficulty{display:flex;align-items:center;gap:2px}.difficulty>span{font-size:10px;color:#828976;margin-right:9px}.difficulty button{border-radius:7px;padding:7px 10px;min-height:30px;font-size:10px;color:#7a8570;border:1px solid transparent}.difficulty button.selected{color:#365837;background:#e8eddf;border-color:#d6decb;font-weight:650}.difficulty button:hover{background:#eef0e5}.jev-button{display:flex;align-items:center;gap:4px;font-size:11px;padding:8px 0;color:#7c836f}.jev-button b{color:#37543b}.home-under{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#9a9e8e;margin-top:12px;min-height:27px;gap:8px}.resume-link{font-size:11px}.letter-feedback-row{text-align:center;margin:0 0 18px;min-height:18px}.letter-feedback{font-size:12px;color:#6b7d5e}.miss-feedback{color:#977a69}.letter-keyboard{max-width:672px;margin:0 auto;user-select:none}.key-row{display:flex;justify-content:center;gap:7px;margin-bottom:9px}.letter-key{width:53px;height:47px;position:relative;border-radius:9px;background:#fffef9;border:1px solid #dce0d1;box-shadow:0 3px 0 #e0e2d4;font-size:16px;font-weight:600;color:#3d5038}.letter-key:hover:not(:disabled){border-color:#92ad82;background:#eef3e8;transform:translateY(-1px)}.letter-key:not(:disabled):active{box-shadow:0 0 0 transparent;transform:translateY(2px)}.letter-key:disabled:not(.hit):not(.miss){opacity:.55}.letter-key.hit{background:#e0edd5;border-color:#b2ce9c;box-shadow:0 2px 0 #c1d6af;color:#397034}.letter-key.hit svg{position:absolute;bottom:3px;right:4px;width:9px;height:9px;stroke:#5e8e48;stroke-width:2;fill:none}.letter-key.miss{color:#aab09d;background:#f0f0e5;border-color:#e5e7dc;box-shadow:0 1px 0 #e5e7dc;text-decoration:line-through}.keyboard-foot{display:flex;align-items:center;justify-content:center;gap:20px;padding-top:9px;font-size:10px;color:#8e9783}.keyboard-foot>span{display:flex;align-items:center;gap:5px}.keyboard-foot .text-button{font-size:10px;font-weight:400;color:#8b947d}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:43px;border-radius:9px;padding:12px 18px;font-size:12px;font-weight:650;border:1px solid transparent}.primary{background:#285e3e;color:#fffdf4;box-shadow:0 2px 0 #153e26;border-color:#275c3b}.primary:hover:not(:disabled){background:#1e4e31;box-shadow:0 3px 0 #153e26}.secondary{background:#fffdf7;border-color:var(--line);color:#66765e;box-shadow:0 2px 0 #e5e7da}.secondary:hover:not(:disabled){background:#eef1e5}.primary:disabled,.secondary:disabled{opacity:.6}.secondary.green{color:#347041}.secondary.red{color:#a24f40}.full-width{width:100%}.waiting-panel{text-align:center;max-width:600px;margin:0 auto}.waiting-heading h2,.join-panel h2{font-size:25px;letter-spacing:-.6px;line-height:1.2;margin:8px 0 9px}.waiting-heading p,.join-panel p{font-size:12px;color:#7c8473;line-height:1.6}.lobby-seats{display:flex;justify-content:center;align-items:center;gap:38px;margin:20px 0}.lobby-seats>div{display:flex;align-items:center;flex-direction:column;min-width:100px}.seat-avatar{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:19px;font-weight:800;margin-bottom:9px}.seat-avatar.green{background:#e4eed9;color:#416d3c}.seat-avatar.red{background:#f4e0d7;color:#a75946}.lobby-seats b{font-size:13px;max-width:180px;overflow:hidden;text-overflow:ellipsis}.lobby-seats small{font-size:10px;color:#8a917e;margin-top:5px}.versus{font-size:11px;color:#a1a593}.invite-link{display:flex;gap:8px;max-width:470px;margin:0 auto 15px}.invite-link input{flex:1;font-size:12px;background:#f2f3e9;min-width:0}.invite-link .secondary{font-size:11px;white-space:nowrap;padding:10px 13px}.start-actions{display:flex;gap:17px;align-items:center;justify-content:center}.fine-print{font-size:10px;color:#999f8a;margin:16px 0 0}.join-panel{text-align:center;padding:3px 0 10px}.join-panel .primary{margin-top:20px}.result-panel{text-align:center;padding:0 0 4px}.result-panel h2{font-size:32px;line-height:1.1;letter-spacing:-1px;margin:9px 0}.result-panel.won h2{color:#285e3e}.result-detail{font-size:12px;color:#818975;line-height:1.5;margin-bottom:19px}.result-panel .word-slots{gap:5px}.result-panel .letter-slot{height:44px;width:37px;font-size:22px}.result-numbers{display:flex;justify-content:center;gap:34px;margin:21px 0;color:#8a927e;font-size:10px}.result-numbers b{display:block;color:#4c6245;font-size:19px;font-variant-numeric:tabular-nums;font-weight:650;margin-bottom:4px}.result-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.result-actions .text-button{margin-left:7px}.round-history{font-size:11px;color:#7a856c;max-width:560px;margin:24px auto 0}.round-history summary{cursor:pointer;padding:8px}.round-history>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;text-align:left}.round-history p{border:1px solid #e1e4d6;background:#f6f6ed;border-radius:10px;padding:11px}.round-history p>b{display:block;margin-bottom:8px;font-size:12px}.round-history p>span{display:flex;gap:4px;flex-wrap:wrap}.round-history i{font-style:normal;border-radius:4px;padding:3px 4px;font-size:11px;color:#6d825e;background:#e1ecd7}.round-history i.miss{color:#a07768;background:#eee5dc}.round-history i small{font-size:8px;margin-left:3px}.rematch-nudge{font-size:12px;color:#709257;margin:10px 0}.notice{display:flex;align-items:center;gap:9px;color:#946442;background:#f8eddf;border:1px solid #e5d1b6;max-width:840px;padding:12px 14px;border-radius:10px;font-size:12px;line-height:1.5;margin:19px auto 0}.notice>span{flex:1}.notice>button{padding:5px;display:grid;place-items:center}footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;margin-top:25px;padding:13px 1px 17px;color:#969b8a;gap:15px}footer .text-button{font-size:10px;font-weight:400;color:#8b937c}.render-label{font-size:9px;display:flex;align-items:center;gap:10px}.render-label i{display:block;width:3px;height:3px;border-radius:50%;background:#b1b5a4}.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#faf8f130;pointer-events:none}.countdown>b{font-size:85px;line-height:1;color:#245938;letter-spacing:-5px;text-shadow:0 3px 0 #fffaf4;animation:count-in .24s ease-out}.countdown small{font-size:12px;color:#687d58;background:#fffdf2dd;border:1px solid #e5e9d9;padding:6px 12px;border-radius:20px;margin-top:9px}.arena-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#faf8f1b8;z-index:4}.arena-overlay>div{text-align:center;border:1px solid var(--line);background:#fffdf6f5;padding:20px 26px;border-radius:17px;box-shadow:0 8px 30px #1d3d2110}.arena-overlay h2{font-size:21px;letter-spacing:-.4px;margin:11px 0 7px}.arena-overlay p{font-size:12px;color:#839171;margin-bottom:18px}.reconnect-banner{position:absolute;top:6px;left:50%;transform:translateX(-50%);max-width:94%;width:max-content;display:flex;align-items:center;gap:8px;background:#fff6e7f0;border:1px solid #ebd6af;color:#8c7349;font-size:11px;line-height:1.5;padding:9px 13px;border-radius:9px;z-index:6}.reconnect-banner button{font-size:11px;text-decoration:underline;padding:2px;white-space:nowrap}.connection-dot{background:#c39c53;width:5px;height:5px;border-radius:50%;flex-shrink:0}.studio-panel{padding:15px 0;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;border-top:1px solid var(--line)}.studio-panel h2{font-size:21px;letter-spacing:-.5px;margin-bottom:5px}.studio-panel p{font-size:11px;color:#859276}.pose-controls{display:flex;border:1px solid #d7dfca;border-radius:9px;overflow:hidden;background:#f2f5e9}.pose-controls button{padding:10px 12px;font-size:11px}.pose-controls .selected{background:#dce8cf;color:#416038}.tug-controls{display:flex;gap:6px}.tug-controls .secondary{font-size:11px;min-height:36px;padding:8px 12px}.model-export{flex-basis:100%;font-size:10px;color:#89917c;text-align:center}.model-export summary{cursor:pointer;margin:0 0 9px}.model-export .text-button{margin:0 15px;font-size:11px}.modal-shade{position:fixed;inset:0;background:#17302165;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;backdrop-filter:blur(4px)}.dialog{background:#faf9f2;border:1px solid #dee4d6;border-radius:20px;padding:25px;width:100%;max-width:450px;max-height:calc(100vh - 48px);max-height:calc(100svh - 48px);overflow-y:auto;box-shadow:0 20px 75px #142b2440;animation:dialog-in .15s ease-out}.dialog-head{display:flex;align-items:flex-start;gap:20px;justify-content:space-between;margin-bottom:22px}.dialog-head h2{font-size:22px;line-height:1.2;letter-spacing:-.65px;font-weight:750;max-width:290px}.dialog-head .icon-button{width:29px;height:29px;flex-shrink:0}.dialog-note{font-size:11px;line-height:1.7;color:#879078;margin:16px 0}.dialog-note+.primary{margin-top:5px}.setting{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600;margin:0 0 18px}.setting small{font-weight:400;color:#89917d;font-size:10px;line-height:1.6}.setting input,.setting select{font-size:13px}.toggle-setting{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-top:1px solid var(--line);font-size:12px;font-weight:600}.toggle-setting small{display:block;font-weight:400;font-size:10px;color:#90987f;margin-top:5px;line-height:1.5}.toggle-setting input{accent-color:#346e45;width:17px;height:17px;min-height:0;flex-shrink:0}.how-steps{display:flex;flex-direction:column;gap:20px}.how-steps>div{display:flex;gap:14px;font-size:12px;line-height:1.7;color:#88937b}.how-steps>div>b{display:grid;place-items:center;align-self:flex-start;background:#e7efd9;border:1px solid #d9e2c8;border-radius:9px;width:33px;height:34px;font-size:12px;color:#6c895b;flex-shrink:0}.how-steps strong{display:block;color:#38563c;font-size:13px;margin-bottom:3px}.online-warning{font-size:11px;line-height:1.6;background:#f6ebd9;color:#947347;padding:11px;border-radius:7px;margin-bottom:15px}.history-list{display:flex;flex-direction:column}.history-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:13px 0;font-size:12px}.history-row>span:first-child{flex:1}.history-row b{display:block;letter-spacing:1px}.history-row small{font-size:10px;display:block;color:#999f8b;margin-top:5px}.history-row .outcome{font-size:10px;color:#99786a}.history-row .victory{color:#507a45}.empty-history{font-size:12px;line-height:1.8;color:#8b927f;padding:20px 0}.challenge-error{font-size:12px;color:#a15341}.fatal{max-width:440px;margin:18vh auto;padding:26px;text-align:center}.fatal h1{font-size:27px;margin-bottom:12px}.fatal p{font-size:14px;line-height:1.7;color:#74866b;margin:12px 0 22px}.fatal a{display:inline-block;padding:12px 22px;border:1px solid #cdd8c4;border-radius:9px;font-size:13px;text-decoration:none}.boot-splash{height:70vh;display:grid;place-items:center;text-align:center;color:#54714b;font:600 20px ui-sans-serif,sans-serif}.boot-splash small{font-size:12px;font-weight:400;display:block;margin-top:9px;color:#8a9982}.boot-splash i{display:block;width:24px;height:24px;margin:16px auto;border:2px solid #dce5d1;border-top-color:#5c8752;border-radius:50%;animation:spin 1s linear infinite}.boot-splash .boot-link{font-size:12px;display:none;margin:15px 0}.stopped-motion .boot-splash i{animation:none}@keyframes spin{to{transform:rotate(360deg)}}@keyframes letter-reveal{from{opacity:0;transform:translateY(6px) scale(.85)}to{opacity:1;transform:none}}@keyframes count-in{from{opacity:.3;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes dialog-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.app{max-width:1400px}.arena{height:355px}.page-heading{padding-top:32px}.game-table{padding-top:28px}}
@media(max-width:1000px){.app{padding:0 25px}.edition{display:none}.nav-actions{gap:15px}.arena{height:290px}.round-hud{grid-template-columns:150px 1fr 150px}.energy{margin-left:2px;gap:2px}.energy i{width:4px;height:13px}.team-info{gap:7px}.team-info b{max-width:120px}.team-strip{padding:9px 0 17px}.round-pill small{max-width:115px;line-height:1.35}.at-home .page-heading{padding-top:20px}.game-table{padding-top:21px}}
@media(max-width:700px){.app{padding:0 18px}.topbar{height:68px}.brand{font-size:21px}.nav-actions{gap:10px}.nav-actions .text-button{font-size:11px}.help-button{display:none}.icon-button{width:33px;height:33px}.page-heading{padding-top:20px}.page-heading h1{font-size:46px;letter-spacing:-2px}.page-heading p{font-size:12px;margin-top:9px}.round-hud{grid-template-columns:106px 1fr 85px;min-height:125px;padding-top:13px}.at-home .round-hud{min-height:77px}.round-number{width:36px;height:38px;font-size:19px;border-radius:10px}.round-pill{font-size:8px;letter-spacing:1.2px;gap:7px}.round-pill small{font-size:9px;line-height:1.3;max-width:100px}.timer-pill{font-size:23px;gap:6px}.timer-pill>svg{width:18px}.timer-pill small{font-size:7px;letter-spacing:1px}.arena-motto{font-size:7px;letter-spacing:1.8px}.arena-motto strong{font-size:8px;letter-spacing:1.3px}.in-match .round-hud{grid-template-columns:1fr 1fr;align-items:start;padding-top:20px;row-gap:14px}.in-match .puzzle-hud{grid-row:2;grid-column:1/-1;padding-bottom:0}.in-match .timer-pill{justify-self:end}.in-match .round-pill{margin-top:0}.in-match .puzzle-hud .category{margin-bottom:9px}.letter-slot{width:33px;height:41px;font-size:21px;border-radius:8px}.word-slots{gap:5px}.arena{height:245px}.in-match .arena{height:227px}.team-strip{grid-template-columns:1fr 1fr;gap:8px;padding:6px 1px 15px}.lead-caption{grid-column:1/-1;grid-row:2;font-size:9px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:7px}.balance{margin:0;width:65px}.team-info b{font-size:12px;max-width:105px}.team-info small{font-size:9px;line-height:1.4;margin-top:3px}.team-emblem{width:29px;height:29px;border-radius:9px}.team-emblem svg{width:16px;height:16px}.energy{display:none}.game-table{padding-top:20px}.mode-cards{gap:10px}.mode-card{min-height:79px;gap:9px;padding:13px 12px;border-radius:12px}.mode-symbol{width:30px;height:34px;background:none!important}.mode-card b{font-size:14px}.mode-card small{font-size:10px;margin-top:5px}.mode-card>svg{display:none}.home-options{margin-top:15px;flex-wrap:wrap;gap:9px}.difficulty>span{font-size:9px;margin-right:5px}.difficulty button{font-size:10px;padding:7px 8px}.home-under{font-size:9px;flex-wrap:wrap;margin-top:5px}.home-under .text-button{font-size:10px}.key-row{gap:5px;margin-bottom:8px}.letter-key{height:43px;width:45px;min-width:0;border-radius:7px;font-size:14px}.letter-feedback{font-size:11px;line-height:1.5}.letter-feedback-row{margin-bottom:14px;min-height:17px}.keyboard-foot{font-size:9px;gap:14px;flex-wrap:wrap;padding-top:8px}.keyboard-foot>span:first-child{display:none}.keyboard-foot .text-button{font-size:10px}.reconnect-banner{font-size:10px;top:8px}.countdown>b{font-size:65px}.studio-heading h1{font-size:25px}.studio-heading p{font-size:12px}.studio-open .arena{height:330px}.studio-panel{gap:14px;text-align:center;padding:19px 0}.studio-panel>div:first-child{flex-basis:100%}.studio-panel h2{font-size:20px}.studio-panel p{font-size:11px}.model-export{margin-top:5px}footer{margin-top:22px;padding:10px 0 15px;gap:6px;align-items:flex-start}.render-label{font-size:8px;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:190px;line-height:1.6;padding-top:10px}footer .text-button{font-size:9px;white-space:nowrap}.result-panel h2{font-size:28px}.result-detail{font-size:11px}.result-actions{gap:8px}.result-actions .primary,.result-actions .secondary{padding:11px 14px}.result-numbers{gap:30px}.waiting-heading h2,.join-panel h2{font-size:23px}.modal-shade{padding:15px}.dialog{padding:22px;max-height:calc(100vh - 30px);max-height:calc(100svh - 30px);border-radius:17px}.dialog-head h2{font-size:21px}.online-warning{font-size:10px}.notice{font-size:11px;margin-top:16px;padding:10px 11px}.fine-print{font-size:9px;line-height:1.5}.lobby-seats{gap:28px}}
@media(max-width:430px){.app{padding:0 12px}.nav-actions{gap:8px}.topbar{height:61px}.brand{font-size:19px;gap:4px}.brand-mark{width:26px}.studio-toggle{font-size:10px!important}.mode-card{padding:12px 10px;gap:7px;min-height:93px;align-items:flex-start}.mode-symbol{display:none}.mode-card b{font-size:14px;line-height:1.3}.mode-card small{font-size:10px;line-height:1.5}.home-options{gap:5px}.round-pill small{max-width:95px}.team-info b{max-width:104px}.arena{height:226px}.in-match .arena{height:207px}.letter-key{height:44px;width:calc((100vw - 74px)/10);font-size:13px}.word-slots{gap:4px}.letter-slot{width:clamp(24px,8.2vw,33px);height:39px;font-size:19px}.key-row{gap:5px}.round-hud{grid-template-columns:103px 1fr 81px}.arena-motto{letter-spacing:.8px}.arena-motto strong{letter-spacing:.5px}.letter-feedback{font-size:10px}.keyboard-foot{gap:12px}.result-numbers{gap:25px}.result-panel .letter-slot{width:28px;height:37px;font-size:19px}.result-actions .text-button{flex-basis:100%}.studio-open .arena{height:280px}.invite-link{flex-wrap:wrap}.invite-link input{width:100%}.invite-link button{flex:1}.dialog-head h2{font-size:20px}.difficulty>span{margin-right:3px}.difficulty button{padding:7px}.render-label{max-width:135px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.reduced-motion *,.reduced-motion *:before,.reduced-motion *:after{animation:none!important;transition:none!important}
.history-summary{display:flex;align-items:center;gap:12px;border:1px solid #dce4d0;background:#edf2e4;padding:15px;border-radius:12px;margin-bottom:10px}.history-summary>b{font-size:30px;font-weight:800;color:#41663c}.history-summary span{font-size:11px;line-height:1.4;color:#8a9478}.history-list{max-height:360px;overflow-y:auto;margin-bottom:20px}.history-list>div{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.history-result{width:28px;height:29px;border-radius:8px;font-weight:700;font-size:12px;display:grid;place-items:center;background:#efe4db;color:#a47c68}.history-result.win{background:#e1ecd3;color:#5c8344}.history-list>div>span:nth-child(2){flex:1;font-size:12px}.history-list b{letter-spacing:1px;display:block}.history-list small{display:block;font-size:10px;color:#939b85;margin-top:4px}.history-list time{font-size:10px;color:#9fa590}.dialog>p:not([class]){font-size:13px;line-height:1.75;color:#86927a;margin-bottom:22px}

:root{--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-out:cubic-bezier(.22,1,.36,1);--glow-green:#7fb36a55;--glow-red:#d0675555}

.page-heading h1{display:flex;align-items:baseline;justify-content:center;gap:.18em}
.page-heading h1 i{font-style:italic;font-weight:700;font-size:.42em;letter-spacing:0;color:var(--gold);transform:translateY(-.35em)}
.page-heading h1 span,.page-heading h1 b{display:inline-block;animation:title-in .7s var(--ease-spring) both}
.page-heading h1 b{animation-delay:.12s}
.page-heading h1 i{animation:fade-up .6s var(--ease-out) .25s both}
.little-crown{animation:crown-bob 3.2s ease-in-out infinite}

.arena{background:radial-gradient(120% 90% at 50% 30%,#fffef6 0%,#f7f4e7 55%,#f1eedf 100%);border-radius:18px}
.arena:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 70px #e6dfc8}

.letter-slot{transition:background .25s,border-color .25s,box-shadow .25s,transform .25s var(--ease-spring);perspective:300px}
.letter-slot.revealed{box-shadow:0 2px 0 #c8d8bd,0 0 0 4px #e3eedb00}
.letter-slot.revealed>span{display:inline-block;animation:slot-flip .5s var(--ease-spring) both}
.letter-slot.revealed:has(>span){animation:slot-glow .9s var(--ease-out)}
.word-slots.complete:not(.lost) .letter-slot{animation:slot-wave .8s var(--ease-spring) both}
.word-slots.complete .letter-slot:nth-child(2){animation-delay:.05s}
.word-slots.complete .letter-slot:nth-child(3){animation-delay:.1s}
.word-slots.complete .letter-slot:nth-child(4){animation-delay:.15s}
.word-slots.complete .letter-slot:nth-child(5){animation-delay:.2s}
.word-slots.complete .letter-slot:nth-child(6){animation-delay:.25s}
.word-slots.complete .letter-slot:nth-child(7){animation-delay:.3s}
.word-slots.complete .letter-slot:nth-child(n+8){animation-delay:.35s}

.letter-key{transition:background .14s,border-color .14s,box-shadow .14s,transform .18s var(--ease-spring),color .14s}
.letter-key:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 0 #d6dccb,0 8px 18px #2d4b2a14}
.letter-key:not(:disabled):active{transform:translateY(3px) scale(.97);box-shadow:0 0 0 transparent}
.letter-key.hit{animation:key-hit .55s var(--ease-spring)}
.letter-key.miss{animation:key-miss .42s ease-out}

.letter-feedback>span{display:inline-block;animation:fade-up .32s var(--ease-out)}
.letter-feedback.miss-feedback{color:#a5503f}

.timer-pill{transition:color .3s}
.timer-pill.time-low>span{animation:heartbeat 1s ease-in-out infinite}
.timer-pill.time-critical{color:#b23a2c}
.timer-pill.time-critical>svg{animation:wobble .5s ease-in-out infinite}

.energy i{transition:background .3s,transform .3s var(--ease-spring)}
.energy i.empty{transform:scaleY(.6)}

.team-info small>span{display:inline-block;animation:count-pop .5s var(--ease-spring)}
.balance i{transition:left .6s var(--ease-spring);box-shadow:0 0 0 3px #d2a34e33}

.countdown>b{animation:count-slam .5s var(--ease-spring);text-shadow:0 4px 0 #fffaf4,0 10px 30px #24593833}
.countdown small{animation:fade-up .4s var(--ease-out)}

.result-panel{animation:panel-in .5s var(--ease-out) both;position:relative}
.result-panel.won .eyebrow{color:#b8862f}
.confetti{position:absolute;inset:-30px 0 auto;height:0;pointer-events:none}
.confetti i{position:absolute;top:0;width:8px;height:12px;border-radius:2px;opacity:0;animation:confetti-fall 1.8s var(--ease-out) forwards}
.confetti i:nth-child(3n){background:#5f9a55}.confetti i:nth-child(3n+1){background:#e2b04a}.confetti i:nth-child(3n+2){background:#cf6a54}


@keyframes title-in{from{opacity:0;transform:translateY(18px) scale(.92)}}
@keyframes fade-up{from{opacity:0;transform:translateY(6px)}}
@keyframes crown-bob{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-3px)}}
@keyframes slot-flip{0%{opacity:0;transform:rotateX(-90deg) scale(.7)}60%{opacity:1}100%{transform:none}}
@keyframes slot-glow{0%{box-shadow:0 2px 0 #c8d8bd,0 0 0 0 var(--glow-green);transform:translateY(-3px)}100%{box-shadow:0 2px 0 #c8d8bd,0 0 0 10px #7fb36a00}}
@keyframes slot-wave{0%{transform:none}40%{transform:translateY(-9px)}100%{transform:none}}
@keyframes key-hit{0%{transform:scale(.9)}50%{transform:scale(1.12);box-shadow:0 0 0 6px var(--glow-green)}100%{transform:none}}
@keyframes key-miss{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.08)}30%{transform:scale(1)}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes count-pop{0%{transform:scale(1.6);color:#2f7a45}100%{transform:none}}
@keyframes count-slam{0%{opacity:0;transform:scale(1.9)}60%{opacity:1;transform:scale(.94)}100%{transform:none}}
@keyframes panel-in{from{opacity:0;transform:translateY(14px)}}
@keyframes confetti-fall{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),160px) rotate(var(--spin))}}

@media(prefers-reduced-motion:reduce){.confetti{display:none}}
.reduced-motion .confetti{display:none}

.arena-callouts{position:absolute;inset:0;pointer-events:none;z-index:3}
.callout{position:absolute;top:30%;padding:7px 14px;border-radius:999px;font-size:15px;font-weight:800;letter-spacing:-.3px;white-space:nowrap;box-shadow:0 6px 18px #1d3d2122;animation:callout-rise 1.35s var(--ease-out) forwards}
.callout.you{left:24%}
.callout.rival{right:24%}
.callout.hit{background:#2f6b45;color:#fffdf2}
.callout.rival.hit{background:#b4493b}
.callout.miss{background:#fffdf6;color:#a5503f;border:1px solid #ecd6cc;animation-name:callout-shake}
.callout.rival.miss{color:#4f7a52;border-color:#d4e2cc}
@keyframes callout-rise{0%{opacity:0;transform:translateY(14px) scale(.6)}18%{opacity:1;transform:translateY(0) scale(1.08)}30%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}
@keyframes callout-shake{0%{opacity:0;transform:scale(.7)}15%{opacity:1;transform:scale(1.05) translateX(-5px)}25%{transform:translateX(5px)}35%{transform:translateX(-3px)}45%{transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
@media(max-width:700px){.callout{font-size:12px;padding:5px 10px;top:22%}.callout.you{left:8%}.callout.rival{right:8%}}
.reduced-motion .arena-callouts{display:none}@media(prefers-reduced-motion:reduce){.arena-callouts{display:none}}

.primary,.secondary,.mode-card{position:relative;overflow:hidden;isolation:isolate;transition:transform .28s var(--ease-spring),box-shadow .2s,background .2s,border-color .2s}
.primary:after,.mode-card.solo:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,#ffffff2e 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s var(--ease-out)}
.primary:hover:not(:disabled):after,.mode-card.solo:hover:not(:disabled):after{transform:translateX(120%)}
.primary:hover:not(:disabled),.secondary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 0 #153e26,0 10px 22px #1b3f2a22}
.secondary:hover:not(:disabled){box-shadow:0 4px 0 #dfe2d4,0 10px 22px #1b3f2a12}
.primary:not(:disabled):active,.secondary:not(:disabled):active,.mode-card:not(:disabled):active{transform:translateY(2px) scale(.97);box-shadow:0 0 0 transparent;transition-duration:.06s}
.primary svg,.secondary svg,.mode-card>svg,.text-button svg{transition:transform .3s var(--ease-spring)}
.primary:hover:not(:disabled)>svg:last-child,.mode-card:hover:not(:disabled)>svg:last-child,.resume-link:hover svg{transform:translateX(4px)}
.result-actions .primary:hover:not(:disabled)>svg{transform:rotate(-180deg)}

.mode-card:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 7px 0 #153e26,0 16px 30px #24402a26}
.mode-card.friend:hover:not(:disabled){box-shadow:0 7px 0 #d7ddcd,0 16px 30px #24402a14}
.mode-symbol{transition:transform .35s var(--ease-spring)}
.mode-card:hover:not(:disabled) .mode-symbol{transform:rotate(-8deg) scale(1.12)}
.mode-card.solo:not(:disabled){animation:invite-glow 2.8s ease-in-out 1.2s infinite}

.icon-button{transition:transform .25s var(--ease-spring),background .15s,border-color .15s}
.icon-button:hover{transform:scale(1.08);border-color:#b9c8ad}
.icon-button:active{transform:scale(.9);transition-duration:.06s}
.icon-button svg{transition:transform .45s var(--ease-spring)}
.settings-button:hover svg{transform:rotate(75deg)}
.sound-button[aria-pressed=true] svg{animation:sound-wiggle .5s var(--ease-spring)}
.dialog-head .icon-button:hover svg{transform:rotate(90deg)}

.text-button{position:relative}
.text-button:after{content:'';position:absolute;left:50%;right:50%;bottom:4px;height:1.5px;border-radius:1px;background:currentColor;opacity:.55;transition:left .25s var(--ease-out),right .25s var(--ease-out)}
.text-button:hover:after{left:0;right:0}
.text-button:active{transform:scale(.96)}

.difficulty button,.pose-controls button{transition:background .2s,color .2s,transform .25s var(--ease-spring)}
.difficulty button:active,.pose-controls button:active{transform:scale(.92)}
.difficulty button.selected,.pose-controls .selected{animation:pill-pop .4s var(--ease-spring)}

.modal-shade{animation:shade-in .2s ease-out}
.dialog{animation:dialog-spring .38s var(--ease-spring)}

.toggle-setting input[type=checkbox]{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:12px;background:#d9ddcf;position:relative;cursor:pointer;transition:background .25s;margin:0}
.toggle-setting input[type=checkbox]:before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000002e;transition:transform .3s var(--ease-spring)}
.toggle-setting input[type=checkbox]:checked{background:#346e45}
.toggle-setting input[type=checkbox]:checked:before{transform:translateX(16px)}
.toggle-setting input[type=checkbox]:active:before{width:22px}
.toggle-setting input[type=checkbox]:checked:active:before{transform:translateX(12px)}

@keyframes invite-glow{0%,100%{box-shadow:0 3px 0 #163d27,0 0 0 0 #3a7d5244}50%{box-shadow:0 3px 0 #163d27,0 0 0 8px #3a7d5200}}
@keyframes sound-wiggle{0%{transform:scale(.7) rotate(-15deg)}60%{transform:scale(1.2) rotate(8deg)}100%{transform:none}}
@keyframes pill-pop{0%{transform:scale(.85)}100%{transform:none}}
@keyframes shade-in{from{opacity:0}}
@keyframes dialog-spring{from{opacity:0;transform:translateY(16px) scale(.94)}}
.mode-card.solo:hover{animation:none}
.made-by{font-size:10px;color:#8b937c;text-decoration:none;padding:8px 0;position:relative;transition:color .2s}
.made-by b{font-weight:700;color:#4d6a4a}
.made-by:after{content:'';position:absolute;left:50%;right:50%;bottom:4px;height:1.5px;background:currentColor;opacity:.55;transition:left .25s var(--ease-out),right .25s var(--ease-out)}
.made-by:hover{color:#173f29}
.made-by:hover:after{left:0;right:0}
@media(max-width:700px){footer{flex-wrap:wrap}.made-by{order:3;flex-basis:100%;text-align:center;padding-top:4px}}
.share-fallback{display:flex;flex-direction:column;gap:6px;max-width:420px;margin:14px auto 0;font-size:11px;color:#8a927e;text-align:left}
.share-fallback textarea{font:inherit;font-size:12px;color:#263e31;background:#fffefa;border:1px solid var(--line);border-radius:10px;padding:10px;resize:none}

@font-face{font-family:Fredoka;src:url(/fonts/fredoka-latin-wght.woff2) format('woff2');font-weight:300 700;font-display:swap}
:root{
  --ink:#2c3a2b;--muted:#7d826f;
  --cream:#fffaf0;--cream-2:#f4ecd8;--edge:#e6d8b5;--edge-dark:#d6c296;
  --leaf:#2b6643;--leaf-hi:#3a7d55;--leaf-glow:#478e62;--leaf-dark:#1f4f33;--leaf-deep:#153a25;
  --berry:#a3402f;--berry-hi:#b8523f;--berry-dark:#80301f;--berry-deep:#5f2318;
  --sun:#f6bf3a;--sun-hi:#ffd86a;--sun-dark:#cf8d16;
  --game-font:Fredoka,ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
}
:root{min-height:100%;background:#f1e8d2 radial-gradient(120% 900px at 50% -10%,#fffdf4 0%,#f8f2e2 55%,#f1e8d2 100%) no-repeat}
body{background:transparent}
.app,.app button,.app input,.app select,.dialog,.modal-shade{font-family:var(--game-font)}
.app{color:var(--ink);max-width:1180px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Top bar */
.topbar{height:76px;border-bottom:0}
.brand{gap:10px;font-size:24px;font-weight:700;letter-spacing:-.3px;color:var(--leaf-deep)}
.brand-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(var(--sun-hi),var(--sun));border:2px solid var(--sun-dark);box-shadow:0 3px 0 var(--sun-dark);color:#fff;transform:rotate(-6deg)}
.brand-mark svg{width:24px}
.brand-word i{font-style:normal;font-size:.62em;color:var(--sun-dark);margin:0 1px}
.nav-actions{gap:10px}
.icon-button{width:44px;height:44px;border-radius:14px;background:linear-gradient(#fffefa,var(--cream-2));border:2px solid var(--edge);box-shadow:0 4px 0 var(--edge-dark);color:var(--leaf-dark)}
.icon-button:hover{background:linear-gradient(#fff,#f7f0de);border-color:var(--edge);transform:translateY(-2px);box-shadow:0 6px 0 var(--edge-dark)}
.icon-button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge-dark)}
.icon-button svg{width:20px;height:20px}
.icon-button.is-on,.icon-button[aria-pressed=true].sound-button{background:linear-gradient(var(--leaf-hi),var(--leaf));border-color:var(--leaf-dark);box-shadow:0 4px 0 var(--leaf-deep);color:#fff}
.help-icon span{font-size:21px;font-weight:700;line-height:1}

/* Home logo */
.page-heading{padding-top:6px}
.page-heading h1{font-weight:700;font-size:clamp(52px,8vw,104px);letter-spacing:-1px;line-height:1;gap:.12em}
.page-heading h1 span{color:var(--leaf);text-shadow:0 5px 0 var(--leaf-deep),0 14px 28px #153a2533}
.page-heading h1 b{color:var(--berry);font-weight:700;text-shadow:0 5px 0 var(--berry-deep),0 14px 28px #5f231833}
.page-heading h1 i{font-style:normal;font-weight:700;color:var(--sun);text-shadow:0 3px 0 var(--sun-dark);transform:translateY(-.5em) rotate(-8deg)}
.page-heading p{font-size:17px;color:var(--muted);margin-top:14px}
.little-crown{width:34px;height:30px;color:var(--sun)}
.little-crown svg{width:34px;height:30px}

/* Arena */
.arena{margin-top:14px;height:380px;border-radius:28px;border:3px solid #efe4c7;box-shadow:0 8px 0 #e2d3ae,0 22px 44px #4a3c1a1f}
.in-match .arena{height:370px}
.studio-open .arena{height:420px}
.studio-heading{padding:14px 0 0}
.studio-heading h1{font-size:34px;font-weight:700;color:var(--leaf-deep)}

/* In-arena HUD */
.match-hud{position:absolute;top:14px;left:14px;right:14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:10px;pointer-events:none;z-index:3}
.team-badge{display:inline-flex;align-items:center;gap:9px;padding:6px 16px 6px 6px;border-radius:20px;color:#fff;justify-self:start;max-width:100%}
.team-badge.green{background:linear-gradient(var(--leaf-hi),var(--leaf));border:2px solid var(--leaf-dark);box-shadow:0 4px 0 var(--leaf-deep)}
.team-badge.red{justify-self:end;padding:6px 6px 6px 16px;background:linear-gradient(var(--berry-hi),var(--berry));border:2px solid var(--berry-dark);box-shadow:0 4px 0 var(--berry-deep)}
.badge-emblem{width:38px;height:38px;border-radius:13px;background:#fffdf5;display:grid;place-items:center;flex-shrink:0}
.green .badge-emblem{color:var(--leaf)}.red .badge-emblem{color:var(--berry)}
.badge-emblem svg{width:22px;height:22px}
.badge-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.red .badge-body{align-items:flex-end}
.badge-body b{font-size:15px;font-weight:600;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;text-shadow:0 1px 0 #0002}
.hearts{display:flex;gap:2px}
.heart{width:15px;height:15px;color:#ff8c7a;filter:drop-shadow(0 1px 0 #0003);transition:transform .3s var(--ease-spring),color .3s}
.green .heart{color:#ffb4a6}.red .heart{color:#ffe1a3}
.heart.empty{color:#ffffff40;filter:none;transform:scale(.8)}
.offline-label{font-size:11px;opacity:.8}
.match-hud .timer-pill{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 18px 8px;border-radius:20px;background:linear-gradient(#fffefa,var(--cream-2));border:2px solid var(--edge);box-shadow:0 4px 0 var(--edge-dark);color:var(--ink)}
.round-tag{font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.timer-value{display:flex;align-items:center;gap:6px;font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0;line-height:1.05}
.timer-value svg{color:var(--leaf)}
.match-hud .timer-pill small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.match-hud .timer-pill.time-low{background:linear-gradient(#fff4ec,#ffe2d6);border-color:#f0b9a5;box-shadow:0 4px 0 #e39b84;color:var(--berry-dark)}
.match-hud .timer-pill.time-low .timer-value svg{color:var(--berry)}
.timer-pill.time-low>span{animation:none}
.timer-pill.time-low .timer-value{animation:heartbeat 1s ease-in-out infinite}

/* Countdown + overlays */
.countdown{background:#fffaf026;z-index:5}
.countdown>b{font-size:140px;font-weight:700;color:var(--sun);letter-spacing:0;text-shadow:0 7px 0 var(--sun-dark),0 18px 40px #4a3c1a40}
.countdown small{font-size:16px;font-weight:600;color:var(--leaf-deep);background:var(--cream);border:2px solid var(--edge);box-shadow:0 3px 0 var(--edge-dark);padding:7px 16px;border-radius:999px;margin-top:14px}
.arena-overlay{background:#fffaf0a8;backdrop-filter:blur(3px);z-index:6}
.arena-overlay>div{background:var(--cream);border:3px solid var(--edge);box-shadow:0 7px 0 var(--edge-dark),0 20px 40px #4a3c1a26;border-radius:24px;padding:24px 30px}
.arena-overlay h2{font-size:28px;font-weight:700;margin:0 0 16px;color:var(--leaf-deep)}
.callout{font-family:var(--game-font);font-size:19px;font-weight:700;padding:8px 18px;border:2px solid #0000001a}
.callout.hit{box-shadow:0 4px 0 var(--leaf-deep),0 10px 22px #0002;background:linear-gradient(var(--leaf-hi),var(--leaf))}
.callout.rival.hit{box-shadow:0 4px 0 var(--berry-deep),0 10px 22px #0002;background:linear-gradient(var(--berry-hi),var(--berry))}
.callout.miss{box-shadow:0 4px 0 var(--edge-dark);border-color:var(--edge)}
.callout.you{left:20%}.callout.rival{right:20%}
.callout{top:38%}

/* Puzzle */
.game-table{padding-top:26px;max-width:760px}
.puzzle{text-align:center;margin-bottom:22px}
.category{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--leaf-dark);background:var(--cream);border:2px solid var(--edge);box-shadow:0 3px 0 var(--edge-dark);padding:5px 14px;border-radius:999px;margin-bottom:16px}
.category svg{width:16px;height:16px;color:var(--leaf)}
.word-slots{gap:8px}
.letter-slot{width:clamp(40px,5.2vw,58px);height:clamp(48px,6.2vw,66px);border-radius:14px;font-size:clamp(24px,3vw,34px);font-weight:700;color:#3b2f1d;background:linear-gradient(#efe6cf,#f4ecd9);border:2px solid #e3d5b2;box-shadow:inset 0 3px 0 #0000000d,0 2px 0 #e9dcbc}
.letter-slot:not(.revealed):after{bottom:12px;width:16px;height:3px;background:#d4c59f;border-radius:2px}
.letter-slot.revealed{background:linear-gradient(#ffffff,#e4efdc);border-color:#a9c69a;color:var(--leaf);box-shadow:0 5px 0 #86a978}
.word-slots.lost .letter-slot{background:linear-gradient(#fff,#f7e3dc);border-color:#dfb2a5;color:var(--berry);box-shadow:0 5px 0 #c98f80}
.result-panel .letter-slot{width:clamp(36px,4.6vw,52px);height:clamp(44px,5.6vw,60px);font-size:clamp(22px,2.6vw,30px)}

/* Keyboard */
.letter-keyboard{max-width:640px}
.key-row{gap:7px;margin-bottom:10px}
.letter-key{width:56px;height:56px;border-radius:14px;font-size:21px;font-weight:700;color:var(--ink);background:linear-gradient(#fffefa,var(--cream-2));border:2px solid var(--edge);box-shadow:0 5px 0 var(--edge-dark)}
.letter-key:hover:not(:disabled){transform:translateY(-2px);background:linear-gradient(#fff,#f8f1df);border-color:var(--edge);box-shadow:0 7px 0 var(--edge-dark)}
.letter-key:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge-dark)}
.letter-key.hit{color:#fff;background:linear-gradient(var(--leaf-hi),var(--leaf));border-color:var(--leaf-dark);box-shadow:0 5px 0 var(--leaf-deep);text-shadow:0 1px 0 #0002}
.letter-key.hit svg{stroke:#fff;width:11px;height:11px;bottom:4px;right:5px}
.letter-key.miss{color:#b8af97;background:#e9e2d0;border-color:#ddd3bb;box-shadow:0 1px 0 #d3c8ad;transform:translateY(4px);text-decoration:none}
.letter-key.miss:after{content:'';position:absolute;left:30%;right:30%;top:50%;height:3px;border-radius:2px;background:#c9bea2;transform:rotate(-20deg)}
.letter-key:disabled:not(.hit):not(.miss){opacity:.6}
.keyboard-foot{gap:12px;padding-top:14px}
.chip-button{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--leaf-dark);background:linear-gradient(#fffefa,var(--cream-2));border:2px solid var(--edge);box-shadow:0 3px 0 var(--edge-dark)}
.chip-button:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--edge-dark)}
.chip-button:active{transform:translateY(3px);box-shadow:0 0 0 var(--edge-dark)}
.thinking{font-size:14px;color:var(--muted)}

/* Buttons */
.primary,.secondary{border-radius:16px;min-height:50px;padding:12px 22px;font-size:17px;font-weight:600;gap:10px}
.primary{color:#fff;background:linear-gradient(var(--leaf-hi),var(--leaf));border:2px solid var(--leaf-dark);box-shadow:0 5px 0 var(--leaf-deep),inset 0 2px 0 #ffffff40;text-shadow:0 1px 0 #0002}
.primary:hover:not(:disabled){background:linear-gradient(var(--leaf-glow),var(--leaf-hi));transform:translateY(-2px);box-shadow:0 7px 0 var(--leaf-deep),inset 0 2px 0 #ffffff40}
.secondary{color:var(--ink);background:linear-gradient(#fffefa,var(--cream-2));border:2px solid var(--edge);box-shadow:0 5px 0 var(--edge-dark),inset 0 2px 0 #fff}
.secondary:hover:not(:disabled){background:linear-gradient(#fff,#f8f1df);transform:translateY(-2px);box-shadow:0 7px 0 var(--edge-dark),inset 0 2px 0 #fff}
.primary:not(:disabled):active,.secondary:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge-dark)}
.primary:not(:disabled):active{box-shadow:0 1px 0 var(--leaf-deep)}
.primary.big,.secondary.big{min-height:58px;font-size:19px;padding:14px 28px;border-radius:18px}
.secondary.green{color:var(--leaf-dark)}.secondary.red{color:var(--berry-dark)}

/* Home */
.home-panel{max-width:640px}
.mode-cards{gap:16px}
.mode-card{min-height:96px;border-radius:22px;padding:18px 22px;gap:14px;align-items:center;text-align:left}
.mode-card b{font-size:23px;font-weight:700;letter-spacing:0}
.mode-card small{font-size:14px;margin-top:2px;opacity:.85}
.mode-card.solo{color:#fff;background:linear-gradient(var(--leaf-hi),var(--leaf));border:2px solid var(--leaf-dark);box-shadow:0 7px 0 var(--leaf-deep),inset 0 2px 0 #ffffff40;text-shadow:0 1px 0 #0002}
.mode-card.solo small{color:#d3e6d6}
.mode-card.friend{color:var(--ink);background:linear-gradient(#fffefa,var(--cream-2));border:2px solid var(--edge);box-shadow:0 7px 0 var(--edge-dark),inset 0 2px 0 #fff}
.mode-card.friend small{color:var(--muted)}
.mode-card.solo:hover:not(:disabled){background:linear-gradient(var(--leaf-glow),var(--leaf-hi));transform:translateY(-3px);box-shadow:0 10px 0 var(--leaf-deep),inset 0 2px 0 #ffffff40}
.mode-card.friend:hover:not(:disabled){background:linear-gradient(#fff,#f8f1df);border-color:var(--edge);transform:translateY(-3px);box-shadow:0 10px 0 var(--edge-dark),inset 0 2px 0 #fff}
.mode-card.solo:not(:disabled):active{transform:translateY(5px);box-shadow:0 2px 0 var(--leaf-deep)}
.mode-card.friend:not(:disabled):active{transform:translateY(5px);box-shadow:0 2px 0 var(--edge-dark)}
.mode-card>svg{display:block;flex-shrink:0;width:30px;height:30px}
.mode-card.solo:not(:disabled){animation:none}
.home-options{justify-content:center;margin-top:22px}
.difficulty{gap:2px;background:#ece2c8;border-radius:999px;padding:4px;box-shadow:inset 0 2px 0 #0000000f}
.difficulty button{border-radius:999px;padding:8px 20px;min-height:38px;font-size:15px;font-weight:600;color:var(--muted);border:2px solid transparent}
.difficulty button:hover{background:#f6efdc}
.difficulty button.selected{color:var(--leaf-deep);background:#fffdf6;border-color:var(--edge);box-shadow:0 3px 0 var(--edge-dark);font-weight:700}
.resume-link{display:flex;margin:18px auto 0;min-height:44px;font-size:15px;padding:8px 18px}

/* Lobby */
.waiting-panel h2,.join-panel h2{font-size:32px;font-weight:700;color:var(--leaf-deep);margin-bottom:6px}
.lobby-seats{gap:30px;margin:18px 0 22px}
.seat-avatar{width:68px;height:68px;border-radius:22px;font-size:30px;font-weight:700;margin-bottom:8px;color:#fff;border:2px solid #0000001a}
.seat-avatar.green{background:linear-gradient(var(--leaf-hi),var(--leaf));box-shadow:0 5px 0 var(--leaf-deep);color:#fff}
.seat-avatar.red{background:linear-gradient(var(--berry-hi),var(--berry));box-shadow:0 5px 0 var(--berry-deep);color:#fff}
.lobby-seats b{font-size:17px}
.lobby-seats small{font-size:13px}
.lobby-seats small.is-ready{color:var(--leaf);font-weight:700}
.versus{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(var(--sun-hi),var(--sun));border:2px solid var(--sun-dark);box-shadow:0 4px 0 var(--sun-dark)}
.invite-link input{font-size:14px;border-radius:14px;border:2px solid var(--edge);background:#fffdf6}
.invite-link .secondary{font-size:15px;min-height:46px}
.join-panel .primary{margin-top:16px}

/* Result */
.result-panel{padding:0 0 6px}
.result-banner{display:inline-flex;align-items:center;gap:10px;padding:10px 30px 12px;border-radius:16px;font-size:30px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;transform:rotate(-2deg);animation:banner-pop .6s var(--ease-spring) both}
.result-banner svg{width:30px;height:26px}
.result-panel.win .result-banner{color:#6b4300;background:linear-gradient(var(--sun-hi),var(--sun));border:2px solid var(--sun-dark);box-shadow:0 6px 0 var(--sun-dark),0 16px 30px #cf8d1640}
.result-panel.win .result-banner svg{color:#fff}
.result-panel.loss .result-banner{color:#fff;background:linear-gradient(var(--berry-hi),var(--berry));border:2px solid var(--berry-dark);box-shadow:0 6px 0 var(--berry-deep);text-shadow:0 1px 0 #0003}
.result-panel.draw .result-banner,.result-panel.void .result-banner{color:var(--ink);background:linear-gradient(#fffefa,var(--cream-2));border:2px solid var(--edge);box-shadow:0 6px 0 var(--edge-dark)}
.result-panel h2{font-size:20px;font-weight:600;letter-spacing:0;margin:18px 0 4px;color:var(--ink)}
.result-detail{font-size:15px;color:var(--muted);margin-bottom:18px}
.result-actions{gap:12px;margin-top:26px}
.result-actions .home-button{width:58px;height:58px;border-radius:18px}
.rematch-nudge{font-size:15px;font-weight:600;color:var(--leaf)}

/* Dialogs */
.modal-shade{background:#2c3a2b66}
.dialog{background:var(--cream);border:3px solid var(--edge);border-radius:28px;box-shadow:0 8px 0 var(--edge-dark),0 30px 70px #1f2b1f40;padding:26px}
.dialog-head h2{font-size:28px;font-weight:700;letter-spacing:0;color:var(--leaf-deep)}
.dialog-head .icon-button{width:38px;height:38px;border-radius:12px}
.how-steps>div{font-size:15px;color:var(--muted);align-items:center}
.how-steps>div>b{width:42px;height:42px;border-radius:14px;font-size:20px;color:#fff;background:linear-gradient(var(--sun-hi),var(--sun));border:2px solid var(--sun-dark);box-shadow:0 3px 0 var(--sun-dark)}
.how-steps strong{font-size:17px;color:var(--ink);font-weight:600}
.how-steps+.primary{margin-top:24px}
.setting{font-size:15px}
.setting input,.setting select{font-size:15px;border-radius:14px;border:2px solid var(--edge);background:#fffdf6}
.setting small{font-size:12px}
.toggle-setting{font-size:15px;border-top:2px dashed var(--edge)}
.toggle-setting small{font-size:12px}
.toggle-setting input[type=checkbox]{width:52px;height:30px;border-radius:999px;background:#e1d6bb;box-shadow:inset 0 2px 0 #0000001a}
.toggle-setting input[type=checkbox]:before{top:4px;left:4px;width:22px;height:22px;box-shadow:0 2px 0 #0000002a}
.toggle-setting input[type=checkbox]:checked{background:var(--leaf)}
.toggle-setting input[type=checkbox]:checked:before{transform:translateX(22px)}
.toggle-setting input[type=checkbox]:checked:active:before{transform:translateX(18px)}
.history-summary b{font-size:34px;color:var(--sun-dark)}
.history-list>div{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:2px dashed var(--edge);font-size:15px}
.history-list>div>span:nth-child(2){flex:1}
.history-list small{display:block;font-size:12px;color:var(--muted)}
.history-result{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;font-weight:700;color:#fff;background:#c9bea2;box-shadow:0 3px 0 #b0a37f}
.history-result.win{background:var(--sun);box-shadow:0 3px 0 var(--sun-dark)}
.online-warning{font-size:13px}

/* Footer, notices */
footer{justify-content:center;border-top:0;margin-top:30px;padding:10px 0 22px}
.made-by{font-size:13px}
.notice{border-radius:16px;border:2px solid #e9cfa8;box-shadow:0 4px 0 #dcb98a;font-size:14px}
.studio-panel{border-top:0;padding:20px 0}
.pose-controls{border:2px solid var(--edge);border-radius:999px;background:#ece2c8;padding:4px;gap:2px}
.pose-controls button{border-radius:999px;font-size:15px;font-weight:600;padding:8px 18px;color:var(--muted)}
.pose-controls .selected{background:#fffdf6;color:var(--leaf-deep);box-shadow:0 3px 0 var(--edge-dark)}
.tug-controls{gap:10px}
.tug-controls .secondary{font-size:15px;min-height:46px}

@keyframes banner-pop{0%{opacity:0;transform:scale(.5) rotate(-12deg)}100%{opacity:1;transform:rotate(-2deg)}}

@media(max-width:700px){
  .topbar{height:64px}
  .brand{font-size:19px;gap:8px}
  .brand-mark{width:34px;height:34px;border-radius:11px}
  .brand-mark svg{width:20px}
  .nav-actions{gap:6px}
  .icon-button{width:38px;height:38px;border-radius:12px}
  .icon-button svg{width:18px;height:18px}
  .help-button{display:grid}
  .page-heading h1{font-size:54px}
  .page-heading p{font-size:14px}
  .arena{height:230px;border-radius:22px;margin-top:10px}
  .in-match .arena{height:240px}
  .at-home .brand-word{display:none}
  .match-hud{top:8px;left:8px;right:8px;gap:6px}
  .team-badge{padding:4px 10px 4px 4px;gap:6px;border-radius:15px}
  .team-badge.red{padding:4px 4px 4px 10px}
  .badge-emblem{width:28px;height:28px;border-radius:10px}
  .badge-emblem svg{width:16px;height:16px}
  .badge-body b{font-size:12px;max-width:70px}
  .heart{width:10px;height:10px}
  .match-hud .timer-pill{padding:4px 12px 6px;border-radius:15px}
  .round-tag{font-size:9px}
  .timer-value{font-size:20px}
  .timer-value svg{display:none}
  .countdown>b{font-size:96px}
  .callout{font-size:14px;padding:6px 12px;top:42%}
  .callout.you{left:6%}.callout.rival{right:6%}
  .game-table{padding-top:18px}
  .puzzle{margin-bottom:16px}
  .category{font-size:13px;margin-bottom:12px}
  .word-slots{gap:5px}
  .letter-slot{width:min(40px,calc((100vw - 72px)/10));height:48px;font-size:24px;border-radius:10px}
  .key-row{gap:5px;margin-bottom:8px}
  .letter-key{width:calc((100vw - 70px)/10);height:52px;font-size:19px;border-radius:11px}
  .mode-card{min-height:84px;padding:14px;gap:10px;align-items:center}
  .mode-card b{font-size:18px}
  .mode-card small{font-size:12px}
  .mode-card>svg{display:none}
  .difficulty button{padding:7px 14px;font-size:14px}
  .result-banner{font-size:24px;padding:8px 22px 10px}
  .result-actions .primary.big,.result-actions .secondary.big{min-height:52px;font-size:16px;padding:12px 18px}
  .result-actions{flex-wrap:nowrap;gap:8px}
  .result-actions .primary.big,.result-actions .secondary.big{font-size:15px;padding:10px 14px;gap:6px;white-space:nowrap}
  .result-actions .home-button{width:52px;height:52px;flex-shrink:0}
  .dialog{border-radius:22px;padding:20px}
  .dialog-head h2{font-size:24px}
}
.word-meaning{max-width:440px;margin:16px auto 0;padding:10px 16px;border-radius:16px;background:var(--cream);border:2px solid var(--edge);box-shadow:0 3px 0 var(--edge-dark);font-size:15px;line-height:1.45;color:var(--muted);animation:fade-up .5s var(--ease-out) .25s both}
.word-meaning b{display:block;font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--leaf-dark);margin-bottom:2px}
@media(max-width:700px){.word-meaning{font-size:14px;margin-top:12px}}