:root{--grid-size: 100%;--header-height: 80px;--footer-height: 60px;--cell-size: min(60px, 11vmin);--gap-size: min(5px, 1vmin);--key-height: min(45px, 8vmin);--game-width: 90%;--game-max-width: 400px;--border-radius: 4px;--toast-padding: 16px 24px;--modal-max-width: 500px;--bg-color: #ffffff;--text-color: #1a1a1b;--border-color: #d3d6da;--key-bg: #d3d6da;--key-text: #1a1a1b;--subtitle-color: #666;--toast-bg: #1a1a1b;--toast-text: #ffffff;--modal-overlay: rgba(0, 0, 0, .5);--success-color: #4CAF50;--success-hover: #45a049;--link-color: #90caf9;--link-hover: #64b5f6;--progress-bg: #f0f0f0}[data-theme=dark]{--bg-color: #1a1a1b;--text-color: #ffffff;--border-color: #3a3a3c;--key-bg: #a5abaf;--key-text: #ffffff;--subtitle-color: #b8b2b2;--toast-bg: #ffffff;--toast-text: #1a1a1b;--modal-overlay: rgba(0, 0, 0, .7);--success-color: #45a049;--success-hover: #3d8b40;--link-color: #1976d2;--link-hover: #1565c0;--progress-bg: #2a2a2b}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease}.app{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:100vh;padding:0;box-sizing:border-box;max-width:500px;margin:0 auto;background-color:var(--bg-color);transition:background-color .3s ease}.main-content{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2rem;width:100%;padding:1rem;min-height:calc(100vh - var(--header-height) - var(--footer-height));box-sizing:border-box}.board{display:flex;flex-direction:column;gap:var(--gap-size);margin:0 auto;width:var(--game-width);max-width:var(--game-max-width)}.row{display:flex;gap:var(--gap-size);justify-content:space-between;width:100%}.square{flex:1;aspect-ratio:1;border:2px solid var(--border-color);border-radius:var(--border-radius);display:flex;justify-content:center;align-items:center;font-size:min(2rem,4vmin);font-weight:700;text-transform:uppercase;color:var(--text-color);background-color:var(--bg-color);transition:transform .6s,background-color .3s ease,color .3s ease;transform-style:preserve-3d}.square.correct{background-color:#6aaa64;border-color:#6aaa64;color:#fff}.square.present{background-color:#c9b458;border-color:#c9b458;color:#fff}.square.absent{background-color:#787c7e;border-color:#787c7e;color:#fff}.square[data-animation=flip]{transform:rotateX(360deg)}.square[data-animation=pop]{animation:pop .1s ease-in-out}.square[data-animation=shake]{animation:shake .5s ease-in-out}@keyframes shake{0%{transform:translate(0)}10%{transform:translate(-5px)}30%{transform:translate(5px)}50%{transform:translate(-3px)}70%{transform:translate(3px)}90%{transform:translate(-1px)}to{transform:translate(0)}}.keyboard{display:flex;flex-direction:column;gap:6px;width:var(--game-width);max-width:var(--game-max-width);margin:0 auto;padding:0}.keyboard-row{display:flex;justify-content:center;gap:4px}.key{font-weight:700;border:0;padding:0;margin:0;height:var(--key-height);border-radius:var(--border-radius);cursor:pointer;background-color:var(--key-bg);color:var(--key-text);flex:1;display:flex;justify-content:center;align-items:center;text-transform:uppercase;-webkit-user-select:none;user-select:none;transition:all .2s ease;font-size:min(.9rem,3vmin)}.key-special{font-size:min(1.2rem,4vmin);flex:1.2;max-width:min(60px,15vw)}.key:hover{filter:brightness(.9)}.key.correct{background-color:#6aaa64;color:#fff}.key.present{background-color:#c9b458;color:#fff}.key.absent{background-color:#787c7e;color:#fff}.new-game-button{margin-top:10px;padding:12px 24px;font-size:1rem;background-color:var(--success-color);color:#fff;border:none;border-radius:var(--border-radius);cursor:pointer;transition:background-color .2s;font-weight:700}.new-game-button:hover{background-color:var(--success-hover)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--modal-overlay);display:flex;justify-content:center;align-items:center;padding:1rem;z-index:1000}.modal-content{background-color:var(--bg-color);padding:2rem;border-radius:var(--border-radius);max-width:var(--modal-max-width);width:90%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 4px 23px #0003}.modal-close{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1.5rem;color:var(--text-color);cursor:pointer;padding:.5rem;width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.modal-close:hover{background-color:var(--border-color)}.modal-section{margin-bottom:2rem;padding:.5rem;border-radius:var(--border-radius)}.modal-section:last-child{background-color:var(--progress-bg)}.score-info{font-size:1.2rem;font-weight:700;color:var(--text-color);margin:1rem 0 .5rem;padding:1rem;border-radius:var(--border-radius);background-color:var(--border-color);text-align:center}.level-info{font-size:1rem;color:var(--subtitle-color);font-style:italic;text-align:center;padding:.5rem;margin-top:.5rem}.example{margin:1.5rem 0;padding:1rem;border-radius:var(--border-radius);background-color:var(--bg-color)}.example-row{display:flex;gap:4px;margin-bottom:.5rem;justify-content:flex-start}.example-row .square{width:40px;height:40px;font-size:1.5rem}.statistics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:2rem}@media (min-width: 480px){.statistics-grid{grid-template-columns:repeat(4,1fr)}}.stat-box{background-color:var(--border-color);padding:1rem;border-radius:var(--border-radius);text-align:center}.stat-value{font-size:2rem;font-weight:700;color:var(--text-color);line-height:1;margin-bottom:.5rem}.stat-title{font-size:.8rem;color:var(--subtitle-color)}.guess-distribution{margin-top:1rem}.distribution-row{display:flex;align-items:center;margin-bottom:.5rem;gap:.5rem}.distribution-row span{min-width:1rem;text-align:right}.distribution-bar{background-color:var(--border-color);padding:.5rem;border-radius:var(--border-radius);min-width:2rem;text-align:right;transition:width .3s ease;color:var(--text-color)}.toast{position:fixed;top:10%;left:50%;transform:translate(-50%);background-color:var(--toast-bg);color:var(--toast-text);padding:var(--toast-padding);border-radius:var(--border-radius);font-weight:700;opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;z-index:1000;min-width:280px;max-width:90%;box-shadow:0 4px 12px #00000026}.toast.visible{opacity:1;pointer-events:auto}.toast-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.toast-message{text-align:center;white-space:pre-line}.word-display{font-size:1.4em;font-weight:700;margin:1rem 0 .5rem;text-transform:uppercase;letter-spacing:.1em;color:var(--toast-text)}.word-link{display:inline-block;color:var(--link-color);text-decoration:none;font-size:.9em;transition:color .2s ease;margin-top:.5rem}.word-link:hover{color:var(--link-hover);text-decoration:underline}.toast.persistent .toast-close{background-color:var(--success-color);color:#fff;border:none;padding:.75rem 2rem;border-radius:var(--border-radius);font-weight:700;cursor:pointer;transition:background-color .2s;font-size:1rem;min-width:120px;margin-top:1rem}.toast.persistent .toast-close:hover{background-color:var(--success-hover)}.header{width:100%;height:var(--header-height);padding:.5rem 1rem;background-color:var(--bg-color);box-sizing:border-box;border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;justify-content:center;position:relative}.header-buttons{position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:flex;gap:.5rem;z-index:10}.theme-toggle,.info-button{background:none;border:none;color:var(--text-color);font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s;width:2.5rem;height:2.5rem;background-color:var(--bg-color)}.theme-toggle:hover,.info-button:hover{background-color:var(--border-color)}.header-content{margin-bottom:.5rem;position:relative;z-index:5;margin:0 auto;text-align:center}.title{font-size:2rem;font-weight:700;margin:0;margin-bottom:.25rem;color:var(--text-color);position:relative;z-index:5}.subtitle{font-size:.9rem;color:var(--subtitle-color);margin:0}.footer{width:100%;height:var(--footer-height);padding:.5rem 1rem;background-color:var(--bg-color);box-sizing:border-box;border-top:1px solid var(--border-color);display:flex;flex-direction:column;justify-content:center}.footer-content{font-size:.8rem;color:var(--subtitle-color);text-align:center}.footer-content p{margin:.25rem 0}.footer-credit{font-style:italic}@media (max-width: 480px){.header{padding:.5rem}.header-buttons{right:.5rem}.title{font-size:1.75rem;padding:0 3rem}.header-content{width:100%}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}