:root{--correct: #78C850;--present: #F8D030;--absent: #705848;--primary: #EE1515;--secondary: #222224;--accent: #FFFFFF;--bg: #1a1a2e;--surface: #2d2d44;--text: #ffffff;--text-secondary: #a0a0a0;--border-empty: #3a3a5c;--border-filled: #565676;--key-bg: #818384;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100vh}body{background-color:var(--bg);color:var(--text)}#root{min-height:100vh}body{overscroll-behavior-y:contain}.tile,.key{user-select:none;-webkit-user-select:none}.header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid var(--border-empty);width:100%;max-width:500px;box-sizing:border-box}.header-center{display:flex;flex-direction:column;align-items:center;gap:8px}.title{font-size:1.8rem;font-weight:700;color:var(--text);margin:0;letter-spacing:.1em;text-transform:uppercase}.mode-toggle{display:flex;gap:4px;background-color:var(--surface);padding:3px;border-radius:6px}.mode-btn{padding:4px 12px;border:none;border-radius:4px;background-color:transparent;color:var(--text-secondary);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s}.mode-btn:hover{color:var(--text)}.mode-btn.active{background-color:var(--primary);color:#fff}.header-btn{width:36px;height:36px;border:none;border-radius:50%;background-color:var(--key-bg);color:var(--text);font-size:1.2rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}.header-btn:hover{opacity:.8}.header-spacer{width:36px}@media(max-width:400px){.title{font-size:1.4rem}.mode-btn{padding:4px 8px;font-size:.7rem}}.tile{--tile-size: min(58px, calc((500px - (var(--word-length, 5) - 1) * 5px) / var(--word-length, 5)));width:var(--tile-size);height:var(--tile-size);perspective:1000px}.tile-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d}.tile.revealing .tile-inner{transition:transform .5s;transition-delay:calc(var(--tile-index, 0) * .2s)}.tile-front,.tile-back{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:clamp(.8rem,calc(var(--tile-size, 58px) * .5),2rem);font-weight:700;text-transform:uppercase;backface-visibility:hidden;border:2px solid var(--border-empty);box-sizing:border-box}.tile-front{background-color:var(--bg);color:var(--text)}.tile-back{transform:rotateX(180deg);color:#fff}.tile.filled .tile-front{border-color:var(--border-filled)}.tile.flip .tile-inner{transform:rotateX(180deg)}.tile.correct .tile-back{background-color:var(--correct);border-color:var(--correct)}.tile.present .tile-back{background-color:var(--present);border-color:var(--present)}.tile.absent .tile-back{background-color:var(--absent);border-color:var(--absent)}.tile.pop .tile-inner{animation:pop .1s ease-in-out}@keyframes pop{50%{transform:scale(1.1)}}@media(max-width:480px){.tile{--tile-size: calc((100vw - 40px - (var(--word-length, 5) - 1) * 5px) / var(--word-length, 5));width:var(--tile-size);height:var(--tile-size)}}.row{display:flex;gap:5px}.row.shake{animation:shake .5s ease-in-out}.row.bounce .tile .tile-inner{animation:bounce .5s ease-in-out;animation-delay:calc(var(--tile-index, 0) * .1s)}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes bounce{0%,to{transform:rotateX(180deg) translateY(0)}50%{transform:rotateX(180deg) translateY(-20px)}}.game-board{display:flex;flex-direction:column;gap:5px;padding:10px}.keyboard{display:flex;flex-direction:column;gap:6px;padding:10px;max-width:500px;margin:0 auto}.keyboard-row{display:flex;justify-content:center;gap:6px}.key{min-width:43px;height:58px;border:none;border-radius:4px;background-color:var(--key-bg);color:var(--text);font-size:.9rem;font-weight:700;text-transform:uppercase;cursor:pointer;transition:background-color .1s;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.key:hover:not(:disabled){opacity:.9}.key:disabled{cursor:not-allowed}.key.wide{min-width:65px;font-size:.75rem}.key.correct{background-color:var(--correct);color:#fff}.key.present{background-color:var(--present);color:#fff}.key.absent{background-color:var(--absent);color:#fff}@media(max-width:480px){.keyboard{padding:5px;gap:4px}.keyboard-row{gap:4px}.key{min-width:calc((100vw - 60px)*.1);height:50px;font-size:.8rem}.key.wide{min-width:calc((100vw - 60px) / 7);font-size:.7rem}}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s ease}.modal-content{background-color:var(--surface);border-radius:8px;padding:24px;max-width:400px;width:90%;max-height:80vh;overflow-y:auto;position:relative;animation:slideUp .3s ease}.modal-close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:1.5rem;color:var(--text);cursor:pointer;opacity:.7}.modal-close:hover{opacity:1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.toast{position:fixed;top:80px;left:50%;transform:translate(-50%);background-color:var(--text);color:var(--bg);padding:12px 20px;border-radius:4px;font-weight:700;z-index:200;animation:toastIn .3s ease}.toast.leaving{animation:toastOut .3s ease forwards}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-10px)}}.pokemon-reveal{display:flex;flex-direction:column;align-items:center;text-align:center}.pokemon-image{width:150px;height:150px;margin-bottom:16px}.pokemon-image img{width:100%;height:100%;object-fit:contain}.pokemon-image.victory{animation:pokemonEntry .5s ease-out}.pokemon-image.defeat img{filter:grayscale(50%);opacity:.8}.pokemon-name{font-size:1.8rem;font-weight:700;color:var(--text);margin:0 0 8px;text-transform:uppercase;letter-spacing:.05em}.result-message{color:var(--text-secondary);margin:0 0 20px}.reveal-buttons{display:flex;gap:12px}.share-btn{background-color:var(--correct);color:#fff;border:none;border-radius:4px;padding:12px 24px;font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .2s}.share-btn:hover{opacity:.9}.play-again-btn{background-color:var(--primary);color:#fff;border:none;border-radius:4px;padding:12px 24px;font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .2s}.play-again-btn:hover{opacity:.9}@keyframes pokemonEntry{0%{opacity:0;transform:scale(.5)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.help-content h2{margin:0 0 16px;text-align:center}.help-section{margin:16px 0;padding:16px 0;border-top:1px solid var(--border-empty)}.help-section:first-of-type{border-top:none;padding-top:0}.help-examples{margin:16px 0}.help-examples h3{margin:0 0 12px}.example-row{display:flex;gap:5px;margin-bottom:8px}.example-tile{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;border:2px solid var(--border-filled);text-transform:uppercase}.example-tile.correct{background-color:var(--correct);border-color:var(--correct);color:#fff}.example-tile.present{background-color:var(--present);border-color:var(--present);color:#fff}.example-tile.absent{background-color:var(--absent);border-color:var(--absent);color:#fff}.help-content p{margin:8px 0;line-height:1.5}.footer{padding:16px;text-align:center;border-top:1px solid var(--border-empty);width:100%;max-width:500px}.footer p{margin:0;font-size:.85rem;color:var(--text-secondary)}.footer .credit{color:var(--primary);font-weight:600}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center}.game-container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex:1;width:100%;max-width:500px;padding:0 10px;box-sizing:border-box}