:root{--primary-color: #FFD700;--secondary-color: #FF6B6B;--accent-color: #4ECDC4;--bg-color: #F7F9FC;--text-color: #2C3E50;--card-bg: #FFFFFF;--font-main: "Fredoka", sans-serif}body{margin:0;font-family:var(--font-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-color);color:var(--text-color)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}button{font-family:var(--font-main);cursor:pointer}.App{text-align:center;display:flex;flex-direction:column;min-height:100vh;--cell-size: 30px}.App-header{background-color:var(--primary-color);padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(20px + 2vmin);color:var(--text-color);box-shadow:0 4px 6px #0000001a;border-bottom-left-radius:20px;border-bottom-right-radius:20px;margin-bottom:20px}.App-link{color:var(--secondary-color);text-decoration:none;font-weight:700}.App-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px;width:100%;max-width:800px;margin:0 auto;box-sizing:border-box}.App-footer{padding:10px;background-color:var(--text-color);color:#fff;text-align:center;margin-top:auto}.footer-content{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap}.App-footer a{color:var(--accent-color);text-decoration:none}.section-title{font-size:1.5rem;margin-bottom:15px;color:var(--text-color);font-weight:600;width:100%;text-align:left;padding-left:10px}[dir=rtl] .section-title{text-align:right;padding-left:0;padding-right:10px}#all-pieces-area{background-color:var(--card-bg);border-radius:20px;padding:20px;margin-bottom:20px;box-shadow:0 4px 15px #0000000d;width:100%;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.piece-container{display:inline-block;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .2s;cursor:pointer;padding:5px;border-radius:10px}.piece-container:hover{transform:scale(1.1);background-color:#00000008}.piece-container:active{transform:scale(.95)}.selected-piece{opacity:.2;transform:scale(.85);filter:grayscale(100%)}#selected-pieces-area{background-color:var(--card-bg);border:3px dashed var(--accent-color);border-radius:20px;padding:20px;margin-bottom:20px;min-height:100px;width:100%;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;transition:border-color .3s,background-color .3s}.valid-game{border-color:#2ecc71!important;border-style:solid!important;background-color:#2ecc711a!important}#solutions-area{width:100%;display:flex;flex-direction:column;align-items:center}.solution-count{font-size:1.2rem;margin-bottom:15px;color:var(--secondary-color);font-weight:700}.solutions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;width:100%}.solution-card{background-color:var(--card-bg);border-radius:15px;padding:10px;box-shadow:0 4px 10px #0000001a;transition:transform .2s}.solution-card:hover{transform:translateY(-5px)}.text-left{text-align:left;width:100%;margin-bottom:10px;font-size:1.2rem;font-weight:600}@media (max-width: 600px){.App{--cell-size: 22px}.App-header{font-size:1.2rem;padding:10px;margin-bottom:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.App-body{padding:5px}.section-title{font-size:1rem;margin-bottom:5px;padding-left:5px}#all-pieces-area{padding:10px;gap:5px;margin-bottom:10px;border-radius:10px}.piece-container{padding:2px;border-radius:5px}#selected-pieces-area{padding:10px;min-height:60px;margin-bottom:10px;border-radius:10px;border-width:2px}.solution-count{font-size:1rem;margin-bottom:10px}.solutions-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px}}.piece-image{display:block;height:auto;width:calc(var(--piece-width) * var(--cell-size));filter:drop-shadow(0px 0px 1px rgba(0,0,0,.5))}.solution-image{display:block;width:100%;height:auto;border-radius:5px;filter:drop-shadow(0px 0px 1px rgba(0,0,0,.5))}.solution-image-placeholder{position:relative;width:100%;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:5px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.reset-button-container{width:100%;display:flex;justify-content:center;margin-top:15px}.reset-button{background-color:var(--secondary-color);color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:1rem;cursor:pointer;transition:background-color .2s,transform .1s;display:flex;align-items:center;gap:8px;box-shadow:0 2px 5px #0000001a}.reset-button:hover{background-color:#c0392b;transform:translateY(-2px)}.reset-button:active{transform:translateY(0)}.spinner{border:5px solid rgba(0,0,0,.1);border-left-color:var(--accent-color);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes popIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:1}}#selected-pieces-area .piece-container{animation:popIn .4s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes popOut{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}.piece-container.closing{animation:popOut .3s ease-in forwards!important;pointer-events:none}.language-selector{position:relative;display:inline-block}.language-selector-button{display:flex;align-items:center;gap:6px;background-color:#fff3;border:none;border-radius:15px;padding:6px 10px;cursor:pointer;font-size:.8rem;color:#fff;transition:background-color .2s}.language-selector-button:hover{background-color:#ffffff4d}.language-flag{font-size:1rem}.language-name{font-weight:500;display:none}.language-arrow{font-size:.6rem}.language-dropdown{position:absolute;bottom:100%;right:0;margin-bottom:8px;background-color:var(--card-bg);border-radius:12px;box-shadow:0 4px 20px #00000026;z-index:1000;max-height:250px;overflow-y:auto;min-width:150px}[dir=rtl] .language-dropdown{right:auto;left:0}.language-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:none;cursor:pointer;text-align:left;font-size:.85rem;color:var(--text-color);transition:background-color .2s}.language-option .language-name{display:inline}[dir=rtl] .language-option{text-align:right}.language-option:hover{background-color:#0000000d}.language-option.active{background-color:#4ecdc433}.language-option:first-child{border-radius:12px 12px 0 0}.language-option:last-child{border-radius:0 0 12px 12px}