*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;min-height:100%;background:#04090f;font-family:Plus Jakarta Sans,sans-serif;color:#e2e8f0;-webkit-tap-highlight-color:transparent;user-select:none;overflow-x:hidden}#wb-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}#wb-bg .orb1{position:absolute;top:-10%;left:-5%;width:600px;height:600px;background:radial-gradient(circle,rgba(168,85,247,.14) 0%,transparent 65%);border-radius:50%;filter:blur(70px);animation:float 9s ease-in-out infinite}#wb-bg .orb2{position:absolute;top:20%;right:-5%;width:450px;height:450px;background:radial-gradient(circle,rgba(0,212,255,.12) 0%,transparent 65%);border-radius:50%;filter:blur(65px);animation:float 11s ease-in-out infinite reverse}#wb-bg .orb3{position:absolute;bottom:-5%;left:35%;width:380px;height:380px;background:radial-gradient(circle,rgba(0,255,136,.08) 0%,transparent 65%);border-radius:50%;filter:blur(60px);animation:float 13s ease-in-out infinite}#wb-bg .grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(0,212,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.04) 1px,transparent 1px);background-size:55px 55px;mask-image:radial-gradient(ellipse 90% 90% at 50% 40%,black,transparent)}@keyframes float{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-28px) scale(1.03)}}#wb-wrapper{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;max-width:680px;margin:0 auto;padding:0 1rem 2rem}#wb-back{position:fixed;top:.5rem;left:.75rem;z-index:50;background:#04090fcc;border:1px solid rgba(0,212,255,.18);border-radius:7px;padding:.3rem .7rem;color:#7dd3fc;font-size:.72rem;font-family:JetBrains Mono,monospace;cursor:pointer;transition:color .15s,border-color .15s;text-decoration:none}#wb-back:hover{color:#00d4ff;border-color:#00d4ff66}#wb-music-btn{position:fixed;top:.5rem;left:6.5rem;z-index:50;background:#00d4ff26;border:1.5px solid rgba(0,212,255,.55);border-radius:8px;padding:.35rem .7rem;font-size:.75rem;font-family:JetBrains Mono,monospace;color:#e0f2fe;font-weight:700;cursor:pointer;transition:color .15s,border-color .15s,box-shadow .2s;line-height:1;box-shadow:0 0 10px #00d4ff59}#wb-music-btn:hover{color:#fff;border-color:#00d4ff;box-shadow:0 0 16px #00d4ff99}#wb-hud{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0 .5rem;margin-top:3rem;border-bottom:1px solid rgba(0,212,255,.1);gap:.5rem}.hud-cell{display:flex;flex-direction:column;align-items:center;min-width:60px}.hud-lbl{font-size:.52rem;font-weight:800;letter-spacing:.1em;color:#475569;text-transform:uppercase;font-family:JetBrains Mono,monospace}.hud-val{font-size:1.25rem;font-weight:900;line-height:1.1;font-family:JetBrains Mono,monospace}#hud-score{color:#f59e0b}#hud-combo{color:#00d4ff}#hud-level{color:#c084fc}#hud-lives{display:flex;gap:3px;align-items:center}.life-heart{font-size:1.1rem;transition:transform .2s,opacity .3s}.life-heart.lost{opacity:.2;transform:scale(.8)}#wb-timer-wrap{width:100%;height:4px;background:#ffffff0f;border-radius:2px;margin:.5rem 0;overflow:hidden}#wb-timer-bar{height:100%;border-radius:2px;background:linear-gradient(90deg,#00d4ff,#a855f7);transition:width .4s linear}#wb-timer-bar.danger{background:linear-gradient(90deg,#ef4444,#f97316)}#wb-challenge{margin-top:1.25rem;background:#0a1020d9;border:1px solid rgba(0,212,255,.12);border-radius:1.25rem;padding:1.25rem 1.5rem;text-align:center;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}#wb-challenge:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#a855f70d,#00d4ff0a);pointer-events:none}#wb-category-tag{font-size:.58rem;font-weight:800;color:#00d4ff;letter-spacing:.15em;font-family:JetBrains Mono,monospace;text-transform:uppercase;margin-bottom:.4rem;opacity:.7}#wb-pt-label{font-size:.72rem;color:#64748b;margin-bottom:.3rem;font-weight:700}#wb-pt-word{font-size:2rem;font-weight:900;color:#e2e8f0;font-family:Plus Jakarta Sans,sans-serif;letter-spacing:-.01em;line-height:1.1}#wb-pt-example{font-size:.75rem;color:#475569;margin-top:.4rem;font-style:italic}#wb-emoji-display{font-size:2.5rem;margin-bottom:.2rem;line-height:1}#wb-answer-zone{margin-top:1rem;min-height:60px;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;justify-content:center;padding:.75rem 1rem;background:#00d4ff0a;border:2px dashed rgba(0,212,255,.18);border-radius:1rem;transition:border-color .2s,background .2s;position:relative}#wb-answer-zone.dragover{border-color:#00d4ff80;background:#00d4ff14}#wb-answer-placeholder{font-size:.78rem;color:#334155;font-style:italic;pointer-events:none;position:absolute}#wb-answer-zone.correct{border-color:#0f89;background:#00ff8814}#wb-answer-zone.wrong{border-color:#ef444480;background:#ef444412;animation:shake .35s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.wb-block{padding:.5rem .95rem;border-radius:.7rem;font-family:JetBrains Mono,monospace;font-weight:800;font-size:1.05rem;cursor:pointer;border:1.5px solid rgba(168,85,247,.3);background:#a855f71a;color:#e2e8f0;transition:transform .15s,border-color .15s,box-shadow .15s,background .15s,opacity .2s;position:relative;touch-action:none;white-space:nowrap}.wb-block:hover:not(.used):not(.locked){transform:translateY(-3px) scale(1.05);border-color:#a855f7b3;box-shadow:0 6px 20px #a855f740}.wb-block.used{opacity:.3;cursor:default;pointer-events:none}.wb-block.locked{cursor:default}.wb-block.placed{background:#00d4ff1f;border-color:#00d4ff73;color:#00d4ff;cursor:pointer}.wb-block.placed:hover{transform:translateY(-2px);background:#00d4ff2e}.wb-block.correct-block{background:#00ff8824;border-color:#00ff888c;color:#0f8;animation:pop-in .3s ease}.wb-block.wrong-block{background:#ef444424;border-color:#ef444480;color:#f87171}@keyframes pop-in{0%{transform:scale(.8);opacity:.6}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}#wb-blocks-area{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;min-height:52px}.wb-secondary-btns{display:flex;gap:.6rem;margin-top:.6rem}.wb-secondary-btns button{flex:1;padding:.55rem;border-radius:.75rem;font-size:.78rem;font-weight:800;cursor:pointer;transition:background .15s;font-family:JetBrains Mono,monospace}#wb-clear-btn{background:#ef444414;border:1px solid rgba(239,68,68,.22);color:#f87171}#wb-clear-btn:hover{background:#ef444426}#wb-skip-btn{background:#ffaa000f;border:1px solid rgba(255,170,0,.2);color:#fbbf24}#wb-skip-btn:hover{background:#ffaa001f}#wb-toast{position:fixed;top:3.5rem;left:50%;transform:translate(-50%) translateY(-10px);padding:.5rem 1.2rem;border-radius:.7rem;font-size:.85rem;font-weight:800;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:200;white-space:nowrap;font-family:JetBrains Mono,monospace}#wb-toast.show{opacity:1;transform:translate(-50%) translateY(0)}#wb-toast.correct-toast{background:#00ff8826;border:1px solid rgba(0,255,136,.45);color:#0f8}#wb-toast.wrong-toast{background:#ef444424;border:1px solid rgba(239,68,68,.4);color:#f87171}#combo-burst{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);font-size:2.5rem;font-weight:900;pointer-events:none;opacity:0;z-index:300;font-family:JetBrains Mono,monospace;text-shadow:0 0 30px currentColor}#combo-burst.show{animation:burst-anim .6s ease forwards}@keyframes burst-anim{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}30%{opacity:1;transform:translate(-50%,-60%) scale(1.2)}70%{opacity:1;transform:translate(-50%,-70%) scale(1)}to{opacity:0;transform:translate(-50%,-80%) scale(.9)}}.wb-particle{position:fixed;pointer-events:none;z-index:250;border-radius:50%;animation:particle-fly .8s ease forwards}@keyframes particle-fly{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.3)}}#wb-overlay{position:fixed;inset:0;z-index:500;background:#04090feb;backdrop-filter:blur(12px);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}#wb-overlay.show{display:flex}.overlay-emoji{font-size:4rem;margin-bottom:.75rem}.overlay-title{font-size:2rem;font-weight:900;color:#e2e8f0;font-family:Plus Jakarta Sans,sans-serif;margin-bottom:.4rem}.overlay-sub{font-size:1rem;color:#64748b;margin-bottom:1.75rem}.overlay-stats{display:flex;gap:1.5rem;margin-bottom:1.75rem}.overlay-stat{display:flex;flex-direction:column;align-items:center}.overlay-stat-val{font-size:1.8rem;font-weight:900;font-family:JetBrains Mono,monospace}.overlay-stat-lbl{font-size:.65rem;color:#475569;font-weight:700;letter-spacing:.08em;margin-top:.1rem}.overlay-btns{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.overlay-btn{padding:.7rem 1.75rem;border-radius:.875rem;font-weight:900;font-size:.9rem;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s;font-family:Plus Jakarta Sans,sans-serif}.overlay-btn:hover{transform:translateY(-2px)}.overlay-btn.primary{background:linear-gradient(135deg,#a855f7,#00d4ff);color:#04090f;box-shadow:0 4px 20px #a855f766}.overlay-btn.secondary{background:#ffffff12;border:1px solid rgba(255,255,255,.12);color:#e2e8f0}#wb-xp-wrap{margin-top:.6rem;display:flex;align-items:center;gap:.6rem}#wb-xp-label{font-size:.62rem;color:#475569;font-family:JetBrains Mono,monospace;white-space:nowrap}#wb-xp-bar-bg{flex:1;height:5px;background:#ffffff0f;border-radius:3px;overflow:hidden}#wb-xp-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,#a855f7,#00d4ff);transition:width .4s ease}#wb-correct-reveal{font-size:.8rem;color:#f87171;text-align:center;min-height:1.2rem;margin-top:.3rem;font-family:JetBrains Mono,monospace;font-weight:700}@media(max-width:420px){#wb-pt-word{font-size:1.5rem}.wb-block{font-size:.9rem;padding:.4rem .75rem}.overlay-title{font-size:1.5rem}.overlay-stat-val{font-size:1.4rem}}