:root{--bg-color:#fff5db;--text-primary:#3c2317;--accent-orange:#ff9f61;--accent-green:#6d907f;--tile-bg:#f2dfb3;--tile-empty:#e2cf93;--tile-absent:#d4c39b;--text-absent:#9d8a65}body{background-color:var(--bg-color);color:var(--text-primary);background-image:radial-gradient(circle,#ff9f611a 0%,#0000 60%);flex-direction:column;min-height:100vh;margin:0;padding:0;font-family:Inter,-apple-system,sans-serif;animation:10s ease-in-out infinite alternate bg-pulse;display:flex}@keyframes bg-pulse{0%{background-position:0%;background-size:100% 100%}to{background-position:100%;background-size:150% 150%}}header{border-bottom:2px solid var(--tile-bg);justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex}header h1{letter-spacing:2px;margin:0;font-size:1.5rem}.game-container{flex-direction:column;flex-grow:1;align-items:center;padding:2rem 1rem;display:flex}.grid{flex-direction:column;gap:8px;margin-bottom:2rem;animation:8s ease-in-out infinite alternate float-y;display:flex}@keyframes float-y{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.grid-row{gap:8px;display:flex}.tile{text-transform:uppercase;background-color:var(--tile-empty);width:56px;height:56px;color:var(--text-primary);border-radius:8px;justify-content:center;align-items:center;font-size:2rem;font-weight:700;transition:transform .2s,background-color .4s;display:flex}.tile.filled{transform:scale(1.05)}.tile.correct{background-color:var(--accent-green);color:#fff5db;border:none}.tile.present{background-color:var(--accent-orange);color:#3c2317;border:none}.tile.absent{background-color:var(--tile-absent);color:var(--text-absent);border:none;box-shadow:inset 0 2px 4px #0000000d}.keyboard{flex-direction:column;gap:8px;width:100%;max-width:500px;display:flex}.keyboard-row{justify-content:center;gap:6px;display:flex}.key{background-color:var(--tile-bg);cursor:pointer;height:58px;color:var(--text-primary);user-select:none;touch-action:manipulation;border:none;border-radius:6px;flex:1;justify-content:center;align-items:center;min-width:32px;font-size:1.1rem;font-weight:700;display:flex}.key.wide{flex:1.5}.key.correct{background-color:var(--accent-green);color:#fff;transform:translateY(-2px);box-shadow:0 4px #526f61}.key.present{background-color:var(--accent-orange);color:#3c2317;transform:translateY(-2px);box-shadow:0 4px #cf7b46}.key.absent{background-color:var(--tile-absent);color:var(--text-absent);opacity:.7}.key:active{box-shadow:none!important;transform:translateY(2px)!important}.modal-overlay{z-index:100;backdrop-filter:blur(4px);background:#3c231780;justify-content:center;align-items:center;animation:.3s forwards fade-in;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-color);text-align:center;border-radius:12px;max-width:400px;padding:2rem;animation:.4s cubic-bezier(.175,.885,.32,1.275) forwards slide-up;box-shadow:0 10px 25px #0003}.modal-content h2{color:var(--accent-green);margin-top:0}.modal-content p{font-size:1.1rem;line-height:1.5}.btn{background:var(--accent-orange);color:var(--text-primary);cursor:pointer;border:none;border-radius:8px;margin-top:1rem;padding:12px 24px;font-size:1.1rem;font-weight:700;transition:transform .1s}.btn:active{transform:scale(.95)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hint-bar{justify-content:space-between;align-items:center;width:100%;max-width:400px;margin-bottom:1rem;display:flex}.hint-text{color:var(--accent-green);font-style:italic}.how-to-play-container{border-top:2px solid var(--tile-bg);width:100%;max-width:400px;margin-top:2rem;padding-top:1rem}.how-to-toggle{color:var(--accent-green);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:8px;font-size:1.1rem;font-weight:700;display:flex}.how-to-toggle svg{transition:transform .3s}.how-to-toggle.open svg{transform:rotate(180deg)}.how-to-content{opacity:0;max-height:0;transition:max-height .4s,opacity .4s;overflow:hidden}.how-to-content.open{opacity:1;max-height:300px;padding:1rem 0}.how-to-content ul{text-align:left;margin:0;padding-left:20px;line-height:1.6}.rtl{direction:rtl}.arabic-tile{font-family:Tajawal,Arial,sans-serif;font-size:2.2rem;font-weight:700}.arabic-key{font-family:Tajawal,Arial,sans-serif;font-size:1.4rem}.type-badge{color:var(--text-primary);letter-spacing:1px;text-transform:uppercase;background:#ff9f6133;border-radius:12px;padding:4px 12px;font-size:.8rem;font-weight:700;position:absolute;top:4rem;left:50%;transform:translate(-50%)}.toggle-arabic{background:var(--text-primary);color:var(--bg-color);border:1px solid var(--accent-orange);cursor:pointer;border-radius:20px;padding:8px 16px;font-weight:700;transition:all .2s}.toggle-arabic:hover{background:var(--accent-orange);color:var(--text-primary)}