:root{--color-primary: #1C355E;--color-primary-dark: #1C355E;--color-secondary: #7F9CF5;--color-accent: #D32F2F;--color-background: #001F3F;--color-text: #ffffff;--color-text-dark: #0A0A0A;--color-text-muted: rgba(255, 255, 255, .8);--color-panel: rgba(0, 0, 0, .2);--color-border: rgba(255, 255, 255, .15);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 6px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 15px 25px rgba(0, 0, 0, .2)}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Outfit,Inter,system-ui,-apple-system,sans-serif;background:var(--color-background);color:var(--color-text);-webkit-font-smoothing:antialiased;min-height:100vh;background-attachment:fixed;overflow-x:hidden;width:100%}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes scoreFloatUp{0%{transform:translate(-50%);opacity:1}to{transform:translate(-50%,-20px);opacity:0}}@keyframes modalFloatUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translate(-50%,-100%);opacity:0}to{transform:translate(-50%);opacity:1}}.shake-animation{animation:shake .4s ease-in-out}.score-popup{position:absolute;color:var(--color-secondary);font-weight:700;font-size:1.5rem;text-shadow:0 2px 4px rgba(0,0,0,.5);pointer-events:none;animation:scoreFloatUp 1s ease-out forwards;z-index:100}#root{min-height:100vh;display:flex;flex-direction:column}button{font-family:inherit;border:none;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-weight:700}button:hover{transform:translateY(-1px);filter:brightness(1.1)}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);width:100%;box-sizing:border-box}.glass-panel{background:#ffffff1a;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0003;border-radius:var(--radius-md)}.game-btn{background:var(--color-secondary);color:#000;box-shadow:0 4px 0 var(--color-primary),0 8px 10px #0003;text-transform:uppercase;letter-spacing:.5px;font-size:.9rem;padding:.8rem 1.5rem;border-radius:50px}.game-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--color-primary),0 4px 5px #0003}.game-btn-primary{background:var(--color-secondary);color:#000;box-shadow:0 4px 0 var(--color-primary),0 8px 10px #0003}.game-btn-primary:active{box-shadow:0 2px 0 var(--color-primary),0 4px 5px #0003}.game-btn-accent{background:var(--color-accent);color:#fff;box-shadow:0 4px #8b0000,0 8px 10px #0003}.game-btn-accent:active{box-shadow:0 2px #8b0000,0 4px 5px #0003}.game-btn-neutral{background:var(--color-primary);color:#fff;box-shadow:0 4px #000,0 8px 10px #0003}.game-btn-neutral:active{box-shadow:0 2px #000,0 4px 5px #0003}.game-btn-secondary{background:transparent;color:var(--color-text);border:2px solid rgba(255,255,255,.3);padding:.7rem 1.5rem;border-radius:50px;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;transition:all .2s ease}.game-btn-secondary:hover{background:#ffffff1a;border-color:var(--color-text);transform:translateY(-1px)}.accordion-btn{width:100%;padding:1rem;display:flex;justify-content:space-between;align-items:center;background:transparent;border:none;color:var(--color-text);cursor:pointer;font-size:1rem;font-weight:600;text-align:left;transition:background .2s}.accordion-btn:hover{background:#ffffff1a}.app-layout{flex:1;display:flex;flex-direction:row;padding:.5rem;gap:1rem;max-width:1400px;margin:0 auto;width:100%;box-sizing:border-box;position:relative}.game-area{flex:2;display:flex;flex-direction:column;align-items:center;min-height:600px}.sidebar{flex:1;min-width:300px;max-width:450px;display:flex;flex-direction:column;gap:1rem}@media(min-width:1024px){.game-area{align-items:flex-start}.game-board-container{margin-bottom:0!important;max-width:100%!important}.game-content-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:2rem;width:100%}.game-grid-container{flex:1;margin:0!important;max-width:min(650px,calc(100vh - 200px))!important;max-height:calc(100vh - 200px)}.word-list-sidebar{width:220px!important;min-width:200px;margin:0!important;flex-shrink:0;position:sticky;top:1rem}.sidebar{position:sticky;top:.5rem;height:auto;max-height:calc(100vh - 1rem);overflow-y:auto;padding-bottom:6rem;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--color-secondary) rgba(0,0,0,.2)}.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-track{background:#0003;border-radius:4px}.sidebar::-webkit-scrollbar-thumb{background-color:var(--color-secondary);border-radius:4px}.word-list-container{margin-top:0!important}.word-list-grid{max-height:600px!important;justify-content:flex-start!important}}@media(min-width:1600px){.app-layout{max-width:1400px;padding-left:2rem;padding-right:2rem}body{background:linear-gradient(135deg,var(--color-primary) 0%,#1a2a3a 50%,var(--color-primary) 100%)}}@media(min-width:1920px){.app-layout{max-width:1500px}.game-grid-container{max-width:min(700px,calc(100vh - 180px))!important;max-height:calc(100vh - 180px)}}.word-list-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem;max-height:none;overflow-y:visible;padding:0;list-style:none;justify-content:center}.word-list-grid li{width:auto;background:#ffffff1a;padding:.25rem .75rem;border-radius:999px;font-size:.85rem;text-align:center;border:1px solid rgba(255,255,255,.1)}.word-list-grid li.found{background:var(--color-secondary);color:#000;text-decoration:none;opacity:.8}@media(max-width:768px){.app-layout{flex-direction:column;padding:.5rem;gap:1rem}.game-area{width:100%;min-height:auto}.sidebar{width:100%;min-width:100%;max-width:100%}header{flex-direction:row;gap:.5rem;padding:.25rem .5rem!important}.controls-container{position:fixed;bottom:0;left:0;width:100%;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:10px;z-index:1000;border-top:1px solid rgba(255,255,255,.1);box-sizing:border-box}}.info-section-container{padding:1.5rem}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.info-grid-benefits{display:grid;grid-template-columns:1fr 1fr}@media(max-width:768px){.info-section-container{padding:1.5rem}.info-grid{grid-template-columns:1fr;gap:2rem}.info-grid-benefits{grid-template-columns:1fr}}@media(max-width:480px){.game-board-container{padding:.5rem!important}}.mobile-controls{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.75rem}.mobile-controls-main{display:flex;gap:.75rem;flex:1}.fab-backdrop{position:fixed;inset:0;background:#00000080;z-index:999}.fab-container{position:relative}.fab-button{width:48px;height:48px;border-radius:50%;background:var(--color-primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000004d;transition:all .2s ease;padding:0}.fab-button:hover{transform:scale(1.05)}.fab-button.fab-open{background:var(--color-accent);transform:rotate(0)}.fab-icon-main{font-size:1.5rem;line-height:1}.fab-menu{position:absolute;bottom:80px;right:0;display:flex;flex-direction:column;gap:.5rem;animation:fabMenuIn .2s ease-out}@keyframes fabMenuIn{0%{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.fab-menu .game-btn{white-space:nowrap}@media(max-width:768px){.desktop-controls{display:none!important}}.toast-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);background-color:var(--color-primary);color:var(--color-text);padding:1rem 2rem;border-radius:var(--radius-md);border:2px solid var(--color-secondary);box-shadow:0 4px 20px #0000004d;z-index:2000;animation:slideDown .3s ease-out;text-align:center;max-width:90%}@media(max-width:768px){.toast-notification{top:auto;bottom:100px;animation:slideUp .3s ease-out}}@keyframes slideUp{0%{transform:translate(-50%,100%);opacity:0}to{transform:translate(-50%);opacity:1}}@media(min-width:769px){.mobile-controls-wrapper{display:none!important}}
