:root{--primary: #4ecdc4;--secondary: #ff6b6b;--accent: #ffe66d;--dark: #292f36;--light: #f7fff7}body{margin:0;padding:0;font-family:Fredoka,Varela Round,sans-serif;background-color:var(--dark);color:var(--light);overflow:hidden;-webkit-user-select:none;user-select:none}#root{width:100vw;height:100vh;position:relative}.game-container{display:flex;flex-direction:column;height:100vh;position:relative}.camera-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:.6;transform:scaleX(-1)}.camera-feed{width:100%;height:100%;object-fit:cover}.detection-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;display:flex;flex-direction:column}.header{padding:20px;display:flex;justify-content:space-between;background:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.score-board{font-size:1.5rem;font-weight:700;color:var(--accent)}.status.status-wrong{color:var(--secondary);font-weight:700}.word-area{flex:1;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:40px}.target-word{display:flex;gap:15px}.letter-slot{width:80px;height:80px;border:3px dashed rgba(255,255,255,.5);border-radius:12px;display:flex;justify-content:center;align-items:center;font-size:3rem;background:#0000004d;transition:all .3s ease}.letter-slot.filled{border-style:solid;border-color:var(--primary);background:#4ecdc433}.letter-slot.correct,.letter-slot.locked-correct{background:var(--primary);color:#fff;border-color:var(--primary)}.letter-slot.locked-correct{border-style:solid;box-shadow:0 0 0 2px #4ecdc480}.letter-slot.wrong{background:var(--secondary);border-color:var(--secondary);animation:shake .5s}.target-word.wrong-shake{animation:shake .5s}.confirm-row{position:absolute;bottom:120px;left:50%;transform:translate(-50%);pointer-events:auto}.confirm-btn,.next-btn{padding:14px 32px;font-size:1.25rem;font-weight:700;color:var(--dark);background:var(--accent);border:none;border-radius:12px;cursor:pointer;pointer-events:auto;box-shadow:0 4px #c9b846;transition:transform .1s,box-shadow .1s}.confirm-btn:hover,.next-btn:hover{transform:translateY(-2px);box-shadow:0 6px #c9b846}.confirm-btn:active,.next-btn:active{transform:translateY(2px);box-shadow:0 2px #c9b846}.next-hint{margin:12px 0 0;font-size:.95rem;color:#ffffffd9}.next-btn{margin-top:12px;background:var(--primary);box-shadow:0 4px #3ab5ae}.next-btn:hover{box-shadow:0 6px #3ab5ae}.hint-btn-wrap{position:absolute;bottom:24px;right:24px;display:flex;gap:12px;pointer-events:auto}.hint-btn{padding:10px 18px;font-size:.95rem;color:var(--dark);background:#ffffffe6;border:2px solid var(--primary);border-radius:12px;cursor:pointer;pointer-events:auto;transition:background .2s,transform .1s}.hint-btn:hover{background:var(--primary);color:#fff}.hint-btn-pronounce{border-color:var(--accent)}.hint-btn-pronounce:hover{background:var(--accent)}.translation-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-120%);margin:0;padding:12px 24px;background:#000000d9;color:var(--accent);font-size:1.5rem;border-radius:12px;z-index:50;pointer-events:none}.tile-container{display:flex;gap:20px;padding:40px;justify-content:center;min-height:120px}.letter-tile{width:70px;height:70px;background:#fff;color:var(--dark);border-radius:12px;display:flex;justify-content:center;align-items:center;font-size:2.5rem;font-weight:700;box-shadow:0 4px #ccc;position:absolute;cursor:grab;transition:transform .1s;pointer-events:auto}.letter-tile.dragging{transform:scale(1.2);z-index:100;box-shadow:0 10px 20px #0000004d;background:var(--accent)}.letter-tile.flash-red{animation:flashRed .6s ease;background:var(--secondary);color:#fff}@keyframes flashRed{0%,to{background:#fff;color:var(--dark)}50%{background:var(--secondary);color:#fff}}.feedback-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;background:#000c;padding:40px;border-radius:20px;z-index:100}.feedback-word{font-size:4rem;color:var(--primary);margin:0}.feedback-translation{font-size:2rem;color:#fff;margin-top:10px}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.hand-cursor{position:absolute;width:40px;height:40px;border:3px solid var(--accent);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:999;box-shadow:0 0 15px var(--accent);transition:width .2s,height .2s,background .2s}.hand-cursor.pinching{width:20px;height:20px;background:var(--accent)}@media (max-width: 767px){.header{padding:12px 14px;flex-wrap:wrap;gap:8px}.score-board{font-size:1.2rem}.status{font-size:.85rem;line-height:1.3}.word-area{gap:20px}.confirm-row{bottom:100px}.confirm-btn,.next-btn{padding:12px 24px;font-size:1rem;min-height:44px}.hint-btn-wrap{bottom:16px;right:16px;gap:8px}.hint-btn{padding:12px 16px;font-size:.9rem;min-height:44px}.translation-hint{font-size:1.2rem;padding:10px 18px}.tile-container{padding:20px 16px;min-height:90px}.feedback-overlay{padding:24px 20px;max-width:90vw}.feedback-word{font-size:2.5rem}.feedback-translation{font-size:1.3rem}.start-content h1{font-size:1.5rem}.mode-btn{min-height:44px;padding:12px 20px;font-size:.95rem}.hand-cursor{width:32px;height:32px}.hand-cursor.pinching{width:18px;height:18px}.hint-btn-wrap{padding-bottom:env(safe-area-inset-bottom,0)}.hint-btn,.confirm-btn,.next-btn,.mode-btn{-webkit-tap-highlight-color:transparent}}.start-screen,.guide-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#292f36f2;z-index:50;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto}.start-content h1{font-size:4rem;color:var(--accent);margin-bottom:20px;text-shadow:0 0 20px rgba(255,230,109,.5);animation:float 3s ease-in-out infinite}.start-content p{font-size:1.5rem;color:#fff;margin-bottom:30px}.mode-selection{display:flex;gap:30px;margin-top:20px;flex-wrap:wrap;justify-content:center}.mode-btn{background:#ffffff1a;border:2px solid var(--accent);color:#fff;padding:20px 40px;font-size:1.5rem;border-radius:20px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-family:inherit;display:flex;align-items:center;gap:15px;min-width:200px;justify-content:center}.mode-btn:hover{background:var(--accent);color:var(--bg-dark);transform:translateY(-8px) scale(1.05);box-shadow:0 10px 25px #ffe66d99}.mode-btn:active{transform:scale(.95)}.guide-icon{font-size:6rem;animation:wave 2s infinite;margin-bottom:20px}.loading-spinner{width:60px;height:60px;border:6px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{to{transform:rotate(360deg)}}@keyframes wave{0%,to{transform:rotate(0)}25%{transform:rotate(-20deg)}75%{transform:rotate(20deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.celebration-icon{font-size:5rem;margin-bottom:20px;animation:pop .6s cubic-bezier(.175,.885,.32,1.275)}@keyframes pop{0%{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0)}}.continue-hint{margin-top:30px;font-size:1.2rem;opacity:.8;color:var(--accent);animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:.6;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}}