:root{--bg-gradient-1: #ff6b6b;--bg-gradient-2: #feca57;--bg-gradient-3: #48dbfb;--bg-gradient-4: #ff9ff3;--primary: #6c5ce7;--primary-light: #a29bfe;--primary-dark: #5f4fcf;--secondary: #fd79a8;--secondary-light: #fab1c4;--secondary-dark: #e84393;--accent: #00cec9;--accent-light: #81ecec;--accent-dark: #00b894;--success: #00b894;--success-light: #55efc4;--danger: #ff7675;--danger-light: #fab1a0;--warning: #fdcb6e;--warning-light: #ffeaa7;--text-primary: #2d3436;--text-secondary: #636e72;--text-light: #ffffff;--card-bg: rgba(255, 255, 255, .95);--card-shadow: 0 20px 60px rgba(0, 0, 0, .15);--radius-sm: 12px;--radius-md: 16px;--radius-lg: 24px;--radius-xl: 32px;--radius-full: 9999px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .5s cubic-bezier(.68, -.55, .265, 1.55)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;min-height:100vh;color:var(--text-primary);line-height:1.6;overflow-x:hidden;background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradientBG 15s ease infinite}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}body:before,body:after{content:"";position:fixed;border-radius:50%;opacity:.3;z-index:-1;animation:float 20s ease-in-out infinite}body:before{width:400px;height:400px;background:linear-gradient(135deg,#ffecd2,#fcb69f);top:-100px;right:-100px}body:after{width:300px;height:300px;background:linear-gradient(135deg,#a8edea,#fed6e3);bottom:-50px;left:-50px;animation-delay:-5s}@keyframes float{0%,to{transform:translate(0) rotate(0) scale(1)}25%{transform:translate(30px,-30px) rotate(5deg) scale(1.05)}50%{transform:translate(-20px,20px) rotate(-5deg) scale(.95)}75%{transform:translate(15px,15px) rotate(3deg) scale(1.02)}}#root{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.app-wrapper{width:100%;max-width:1000px;background:var(--card-bg);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;box-shadow:var(--card-shadow);animation:slideUp .8s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.app-wrapper:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent),var(--warning));background-size:300% 100%;animation:rainbowBar 3s linear infinite}@keyframes rainbowBar{0%{background-position:0% 50%}to{background-position:300% 50%}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.app-header{text-align:center;margin-bottom:1rem;position:relative}.home-btn{position:absolute;top:0;left:0;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;border-radius:var(--radius-full);box-shadow:0 4px 15px #00cec966;transition:var(--transition-bounce)}.home-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px #00cec980}.app-title{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#6c5ce7,#fd79a8,#00cec9,#fdcb6e);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientText 4s ease infinite;margin-bottom:.5rem;letter-spacing:-1px}@keyframes gradientText{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.app-subtitle{color:var(--text-secondary);font-size:.9rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}.app-subtitle:before,.app-subtitle:after{content:"✨";animation:sparkle 1.5s ease infinite}@keyframes sparkle{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(10deg)}}.game-container{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;align-items:flex-start}.crossword-wrapper{flex-shrink:0}.crossword-grid{display:grid;grid-template-columns:repeat(10,34px);grid-template-rows:repeat(10,34px);gap:2px;padding:10px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:var(--radius-md);box-shadow:0 10px 40px #667eea4d,inset 0 2px 10px #fff3;position:relative}.crossword-grid:before{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;background:linear-gradient(135deg,#f093fb,#f5576c,#4facfe,#00f2fe);border-radius:calc(var(--radius-lg) + 3px);z-index:-1;opacity:.7;filter:blur(8px);animation:glowPulse 3s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}.grid-cell{position:relative;width:100%;height:100%;border-radius:var(--radius-sm);background:transparent;transition:var(--transition-fast)}.grid-cell.active{background:#fff;box-shadow:0 4px 15px #0000001a;transform:translateZ(0)}.grid-cell .cell-number{position:absolute;top:2px;left:4px;font-size:10px;font-weight:800;color:var(--primary);z-index:2;pointer-events:none}.grid-cell input{width:100%;height:100%;border:1px solid transparent;background:#fff;border-radius:6px;text-align:center;font-size:16px;font-weight:700;color:var(--primary-dark);text-transform:uppercase;outline:none;transition:var(--transition-bounce);caret-color:var(--primary)}.grid-cell input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6c5ce733,0 8px 25px #6c5ce74d;transform:scale(1.1) rotate(2deg);z-index:10;position:relative}.grid-cell input.correct{background:linear-gradient(135deg,#00b894,#55efc4)!important;color:#fff!important;border-color:transparent!important;animation:correctBounce .6s cubic-bezier(.68,-.55,.265,1.55)}.grid-cell input.incorrect{background:linear-gradient(135deg,#ff7675,#fd79a8)!important;color:#fff!important;border-color:transparent!important;animation:incorrectShake .5s ease}.grid-cell input.revealed{background:linear-gradient(135deg,#74b9ff,#a29bfe)!important;color:#fff!important;border-color:transparent!important}.grid-cell.highlighted input{background:linear-gradient(135deg,#ffeaa7,#fdcb6e)!important;border-color:var(--warning)!important;animation:highlightPulse 1s ease infinite}@keyframes correctBounce{0%{transform:scale(1)}30%{transform:scale(1.3) rotate(-5deg)}50%{transform:scale(.9) rotate(5deg)}70%{transform:scale(1.1) rotate(-2deg)}to{transform:scale(1) rotate(0)}}@keyframes incorrectShake{0%,to{transform:translate(0) rotate(0)}20%{transform:translate(-8px) rotate(-5deg)}40%{transform:translate(8px) rotate(5deg)}60%{transform:translate(-6px) rotate(-3deg)}80%{transform:translate(6px) rotate(3deg)}}@keyframes highlightPulse{0%,to{box-shadow:0 0 #fdcb6e80}50%{box-shadow:0 0 0 8px #fdcb6e00}}@keyframes popIn{0%{transform:scale(0) rotate(-180deg);opacity:0}60%{transform:scale(1.2) rotate(10deg)}to{transform:scale(1) rotate(0);opacity:1}}.cell-input-animated{animation:popIn .4s cubic-bezier(.68,-.55,.265,1.55)}.clues-panel{flex:1;min-width:280px;max-width:400px;display:flex;flex-direction:column;gap:.75rem}.clues-card{background:#fff;border-radius:var(--radius-md);padding:.875rem;box-shadow:0 8px 30px #00000014;border:2px solid transparent;transition:var(--transition-normal);position:relative;overflow:hidden}.clues-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px}.clues-card:nth-child(1):before{background:linear-gradient(90deg,var(--primary),var(--primary-light))}.clues-card:nth-child(2):before{background:linear-gradient(90deg,var(--secondary),var(--secondary-light))}.clues-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px #0000001f}.clues-card h2{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:2px dashed #eee;display:flex;align-items:center;gap:.75rem}.clues-card h2.across{color:var(--primary)}.clues-card h2.across:before{content:"➡️"}.clues-card h2.down{color:var(--secondary)}.clues-card h2.down:before{content:"⬇️"}.clues-list{list-style:none;display:flex;flex-direction:column;gap:.35rem}.clue-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast);font-size:.8rem;background:#f8f9fa;border:2px solid transparent}.clue-item:hover{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-color:var(--primary-light);transform:translate(8px) scale(1.02)}.reveal-btn{width:26px;height:26px;border:none;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--warning),#f39c12);color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-bounce);flex-shrink:0;box-shadow:0 4px 15px #fdcb6e66}.reveal-btn:hover{transform:scale(1.2) rotate(15deg);box-shadow:0 6px 20px #fdcb6e99}.reveal-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.clue-number{font-weight:800;color:var(--primary);min-width:24px;font-size:1rem}.clue-text{color:var(--text-secondary);line-height:1.5;font-weight:500;line-height:1.3}.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}.action-btn{padding:.625rem 1.25rem;font-size:.8rem;font-family:inherit;font-weight:600;border:none;border-radius:var(--radius-full);cursor:pointer;transition:var(--transition-bounce);display:flex;align-items:center;gap:.5rem;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}.action-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}.action-btn:hover:before{width:300px;height:300px}.action-btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;box-shadow:0 8px 25px #6c5ce766}.action-btn.primary:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 35px #6c5ce780}.action-btn.secondary{background:linear-gradient(135deg,var(--secondary-dark),var(--secondary));color:#fff;box-shadow:0 8px 25px #e8439366}.action-btn.secondary:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 35px #e8439380}.action-btn.tertiary{background:linear-gradient(135deg,#636e72,#b2bec3);color:#fff;box-shadow:0 8px 25px #636e724d}.action-btn.tertiary:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 35px #636e7266}.action-btn.outline{background:#fff;color:var(--primary);border:3px solid var(--primary);box-shadow:0 8px 25px #6c5ce733}.action-btn.outline:hover{background:var(--primary);color:#fff;transform:translateY(-4px) scale(1.05);box-shadow:0 12px 35px #6c5ce780}.action-btn.success{background:linear-gradient(135deg,var(--success),var(--accent));color:#fff;box-shadow:0 8px 25px #00b89466}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:var(--radius-xl);padding:3rem;text-align:center;max-width:90vw;max-height:90vh;overflow-y:auto;box-shadow:0 30px 60px #0000004d;animation:modalBounce .5s cubic-bezier(.68,-.55,.265,1.55);position:relative}.modal-content:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));border-radius:var(--radius-xl) var(--radius-xl) 0 0}@keyframes modalBounce{0%{opacity:0;transform:scale(.5) translateY(-100px)}60%{transform:scale(1.05) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem;margin-top:.5rem}.modal-title.success{background:linear-gradient(135deg,var(--success),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal-title.error{background:linear-gradient(135deg,var(--danger),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal-text{font-size:1.2rem;font-weight:600;padding:1rem 2rem;border-radius:var(--radius-full);display:inline-block;margin-bottom:2rem}.modal-text.success{background:linear-gradient(135deg,var(--success),var(--success-light));color:#fff}.modal-text.error{background:linear-gradient(135deg,var(--danger),var(--danger-light));color:#fff}.modal-buttons{display:flex;gap:1rem;justify-content:center}.builder-modal .modal-content{max-width:950px;width:100%}.builder-container{display:flex;gap:2.5rem;text-align:left;flex-wrap:wrap;justify-content:center}.builder-step-info{color:var(--text-secondary);margin-bottom:1.25rem;font-size:1rem;background:#f8f9fa;padding:1rem 1.25rem;border-radius:var(--radius-md);border-left:4px solid var(--primary)}.builder-step-info b{color:var(--primary)}.builder-grid{display:grid;grid-template-columns:repeat(10,38px);grid-template-rows:repeat(10,38px);gap:3px;background:linear-gradient(135deg,#667eea,#764ba2);padding:10px;border-radius:var(--radius-md);box-shadow:0 8px 30px #667eea4d}.builder-grid input{width:38px;height:38px;text-align:center;border:2px solid transparent;border-radius:6px;background:#fff;color:var(--primary-dark);font-weight:800;text-transform:uppercase;font-size:16px;outline:none;transition:var(--transition-fast)}.builder-grid input:focus{border-color:var(--warning);box-shadow:0 0 0 3px #fdcb6e66;transform:scale(1.05)}.clue-entry-area{flex:1;min-width:300px;max-height:420px;overflow-y:auto;padding-right:.5rem}.clue-input-group{margin-bottom:1.25rem}.clue-input-group label{display:block;font-weight:700;color:var(--text-primary);margin-bottom:.5rem;font-size:.95rem}.clue-input-group input{width:100%;padding:.875rem 1.25rem;border:2px solid #e9ecef;border-radius:var(--radius-md);background:#f8f9fa;color:var(--text-primary);font-size:1rem;outline:none;transition:var(--transition-fast)}.clue-input-group input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px #6c5ce733}.clue-input-group input::placeholder{color:#adb5bd}.confetti{position:fixed;width:12px;height:12px;border-radius:3px;opacity:0;z-index:1001;pointer-events:none;animation:confettiFall 4s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0) scale(1)}50%{opacity:1;transform:translateY(50vh) rotate(360deg) scale(1.2)}to{opacity:0;transform:translateY(100vh) rotate(720deg) scale(.5)}}@media(max-width:768px){.app-wrapper{padding:1.5rem;margin:10px}.app-title{font-size:2rem}.crossword-grid{grid-template-columns:repeat(10,32px);grid-template-rows:repeat(10,32px);padding:10px;gap:3px}.grid-cell input{font-size:14px}.grid-cell .cell-number{font-size:8px}.clues-panel{min-width:100%}.controls{gap:.75rem}.action-btn{padding:.875rem 1.5rem;font-size:.85rem}.builder-grid{grid-template-columns:repeat(10,28px);grid-template-rows:repeat(10,28px)}.builder-grid input{width:28px;height:28px;font-size:12px}.modal-title{font-size:1.8rem}}
