:root{--bg-color: #121213;--text-color: #ffffff;--tile-bg-empty: #3a3a3c;--tile-bg-filled: #565758;--tile-border: #bababa;--color-correct: #538d4e;--color-present: #b59f3b;--color-absent: #3a3a3c;--key-bg: transparent;--key-text: #ffffff;--accent-color: #4facfe;--accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--font-main: "Inter", sans-serif;--font-logo: "Outfit", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-main);overflow-y:scroll;display:flex;justify-content:center;scrollbar-color:black black;scrollbar-width:thin}#root{width:100%;height:100vh;display:flex;flex-direction:column;margin:0 auto}button{font-family:inherit;cursor:pointer;border:none;background:none}.app-container{display:flex;flex-direction:column;height:100%;width:100%}.game-area{display:flex;justify-content:center;align-items:flex-start;padding:10px 1rem;overflow:visible;background-color:transparent;z-index:10;position:relative}.keyboard-area{display:flex;justify-content:center;width:100%;max-height:75vh;margin-top:10px;padding-bottom:env(safe-area-inset-bottom,8px);position:relative;z-index:5}@media(min-width:768px){.keyboard-area{margin-top:-170px}}.toast-message{position:absolute;top:15%;left:50%;transform:translate(-50%);background-color:var(--text-color);color:var(--bg-color);padding:12px 18px;border-radius:4px;font-weight:700;z-index:1000;pointer-events:none;font-size:1.1rem;box-shadow:0 4px 10px #0000004d;opacity:0;animation:fadeInOut 1.5s ease-in-out forwards}@keyframes fadeInOut{0%{opacity:0;margin-top:10px}10%{opacity:1;margin-top:0}90%{opacity:1;margin-top:0}to{opacity:0;margin-top:-10px}}.high-contrast-mode{--color-correct: #f5793a;--color-present: #85c0f9}.hide-atomic-numbers .tile-atomic-number,.hide-atomic-numbers .atomic-number{display:none!important}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:200px;color:var(--text-color);font-family:var(--font-primary)}.loading-spinner{width:40px;height:40px;border:4px solid var(--tile-bg-empty);border-top:4px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.header{display:flex;justify-content:space-between;align-items:center;padding:0 1rem;height:60px;border-bottom:1px solid var(--tile-border);max-width:500px;width:100%;margin:0 auto;position:relative}.title{font-family:var(--font-logo);font-size:2rem;font-weight:900;letter-spacing:.1rem;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0;position:absolute;left:50%;transform:translate(-50%)}.icon-button{color:var(--text-color);font-size:1.25rem;width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;transition:background-color .2s}.icon-button:hover{background-color:var(--tile-bg-empty)}.header-right{display:flex;margin-right:-20px}.grid-container{display:flex;flex-direction:column;gap:8px;width:100%;max-width:325px;margin:0 auto;padding:1rem;cursor:pointer;background:transparent}.grid-row{display:grid;gap:8px;width:100%}.grid-row.target-3{grid-template-columns:repeat(3,1fr)}.grid-row.target-4{grid-template-columns:repeat(4,1fr)}.grid-row.target-5{grid-template-columns:repeat(5,1fr)}.grid-row.target-6{grid-template-columns:repeat(6,1fr)}.grid-row.target-7{grid-template-columns:repeat(7,1fr)}.grid-row.target-8{grid-template-columns:repeat(8,1fr)}.grid-row.target-9{grid-template-columns:repeat(9,1fr)}.grid-row.target-10{grid-template-columns:repeat(10,1fr)}.tile{width:100%;aspect-ratio:1;display:flex;justify-content:center;align-items:center;font-size:2.8rem;font-weight:700;text-transform:capitalize;-webkit-user-select:none;user-select:none;border-radius:4px;transition:transform .1s ease-in-out,border-color .2s;position:relative}.grid-container{cursor:pointer}.tile-atomic-number{position:absolute;top:4px;left:4px;font-size:.6rem;font-weight:600;opacity:.8;display:none}.tile-letter{font-size:inherit;font-weight:inherit}.tile-empty{border:2px solid var(--tile-bg-empty);background-color:transparent}.current-active-row .tile-empty{border-color:#666}.tile-typing-target{border:3px solid var(--text-color)!important}.tile-filled{border:2px solid var(--tile-border);background-color:transparent}.tile-active{animation:popIn .1s ease-in-out;border-color:var(--accent-color)}.tile-correct{background-color:var(--color-correct);border-color:var(--color-correct);color:#fff}.tile-present{background-color:var(--color-present);border-color:var(--color-present);color:#fff}.tile-absent{background-color:var(--color-absent);border-color:var(--color-absent);color:#fff}.tile-invalid,.row-invalid{animation:shake .5s}.tile-invalid{border-color:red;color:red}@keyframes popIn{0%{transform:scale(.8);opacity:0}40%{transform:scale(1.1);opacity:1}}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.mobile-actions-wrapper{position:relative;width:100%;margin:0 auto}.mobile-action-btn{display:none}.hidden-mobile-input{position:absolute;opacity:0;width:1px;height:1px;top:0;left:0;pointer-events:none;z-index:-1}@media(max-width:768px){.grid-container{padding:.5rem}.tile{aspect-ratio:auto;height:46px;font-size:1.5rem}.tile-atomic-number{font-size:.65rem;top:4px;left:4px}.mobile-actions-wrapper{position:relative;width:100%;max-width:250px;margin:0 auto}.mobile-action-btn{display:flex!important;justify-content:center;align-items:center;position:absolute;top:0;width:44px;height:44px;border-radius:50%;background-color:transparent;color:var(--text-color);font-size:1.25rem;border:2px solid var(--tile-bg-empty);cursor:pointer;z-index:20}.mobile-kbd-btn{margin-top:20px;left:-60px}.mobile-back-btn{margin-top:20px;right:-60px}}.keyboard-container{width:100%;padding:0 10px;overflow:visible;display:flex;flex-direction:column;align-items:center}.periodic-scroll{overflow-x:auto;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:20px;display:flex;flex-direction:column;width:max-content;max-width:100vw}.periodic-scroll::-webkit-scrollbar{display:none}.elements-grid{display:grid;grid-template-columns:repeat(18,50px);grid-auto-rows:50px;gap:6px;width:max-content;padding:0 10px}.element-key{background-color:var(--key-bg);color:var(--key-text);border-radius:4px;width:100%;height:100%;display:flex;justify-content:center;align-items:center;transition:opacity .1s,transform .1s,filter .2s;-webkit-user-select:none;user-select:none;position:relative;cursor:pointer;border:1px solid var(--tile-border)}.element-key:hover{filter:brightness(1.2);scale:1.05}.element-key.key-correct{background-color:var(--color-correct);border-color:var(--color-correct);color:#fff}.element-key.key-present{background-color:var(--color-present);border-color:var(--color-present);color:#fff}.element-key.key-absent{background-color:var(--color-absent);border-color:var(--tile-bg-filled);color:#666}.atomic-number{position:absolute;top:4px;left:4px;font-family:var(--font-main);font-size:.65rem;font-weight:700;opacity:.85}.element-symbol{font-weight:700;font-size:1.1rem}.element-key:active{transform:scale(.95);opacity:.8}.action-key{background-color:var(--tile-bg-filled);color:var(--text-color);border:1px solid var(--tile-border);border-radius:4px;font-weight:700;padding:0 15px;height:50px;margin-top:15px;cursor:pointer;transition:filter .2s,transform .1s}.action-key:hover{filter:brightness(1.2)}.action-key:active{transform:scale(.95)}.element-search-container{display:none;width:100%;max-width:400px;margin:0 auto;position:relative;z-index:20}@media(max-width:768px){.element-search-container{display:flex;flex-direction:column;align-items:center;margin-bottom:10px}}.element-search-input{width:90%;padding:10px 15px;font-size:1rem;border-radius:20px;border:2px solid var(--tile-border);background-color:var(--tile-bg-empty);color:var(--text-color);outline:none;transition:border-color .2s}.element-search-input:focus{border-color:var(--accent-color)}.search-results-overlay{position:absolute;top:50px;left:5%;width:90%;max-height:250px;background-color:var(--bg-color);border:2px solid var(--tile-border);border-radius:8px;overflow-y:auto;box-shadow:0 4px 12px #00000080;padding:10px}.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:8px;grid-auto-rows:50px}.search-result-key{background-color:var(--key-bg);cursor:default}.search-result-key:active{transform:none}.no-results{text-align:center;color:#888;padding:20px 0;font-style:italic}.debug-panel{margin:12px auto 0;width:90%;max-width:500px;background-color:#ffa50012;border:1px dashed #f5a623;border-radius:10px;padding:16px 20px;font-family:var(--font-primary),monospace;font-size:.9rem;color:var(--text-color);animation:debugSlideIn .3s ease-out}@keyframes debugSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.debug-header{margin-bottom:14px;display:flex;justify-content:center}.debug-badge{background:#f5a623;color:#000;font-weight:700;font-size:.75rem;padding:3px 10px;border-radius:20px;letter-spacing:.08em;text-transform:uppercase}.debug-section{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}.debug-section:last-of-type{margin-bottom:0}.debug-label{font-size:.8rem;font-weight:600;color:#f5a623;text-transform:uppercase;letter-spacing:.05em}.debug-row{display:flex;gap:8px;align-items:center}.debug-input{flex:1;padding:8px 10px;background:var(--bg-secondary, #1a1a2e);border:1px solid var(--tile-border);border-radius:6px;color:var(--text-color);font-size:.95rem;cursor:pointer}.debug-input:focus{outline:none;border-color:#f5a623}.debug-btn{padding:8px 16px;background:#f5a623;color:#000;font-weight:700;font-size:.9rem;border:none;border-radius:6px;cursor:pointer;transition:opacity .15s;white-space:nowrap}.debug-btn:hover{opacity:.85}.debug-btn-danger{width:100%;background:transparent;color:#f44;border:1px solid #ff4444}.debug-btn-danger:hover{background:#ff44441a;opacity:1}.debug-status{margin-top:10px;padding:6px 10px;background:#ffffff0d;border-radius:6px;font-size:.85rem;text-align:center}.modal-overlay{position:fixed;inset:0;background-color:#000000bf;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s ease-out}.modal-content{background-color:var(--bg-color);border:1px solid var(--tile-border);border-radius:8px;padding:24px;width:90%;max-width:400px;position:relative;box-shadow:0 4px 23px #00000080;animation:slideUp .3s ease-out}.modal-close{position:absolute;top:10px;right:15px;font-size:24px;color:var(--text-color)}.modal-body{margin-top:16px;display:flex;flex-direction:column;gap:16px;text-align:center}.target-word-display{display:flex;justify-content:center;gap:8px;margin:10px 0}.target-element{background-color:var(--color-correct);color:#fff;padding:8px 12px;border-radius:4px;font-weight:700;font-size:1.2rem}.word-reveal{font-size:1.5rem;font-weight:700;letter-spacing:.2rem;color:var(--accent-color);text-transform:uppercase}.share-button{background:var(--accent-gradient);color:#fff;border:none;padding:12px 24px;border-radius:20px;font-weight:700;font-size:1.1rem;cursor:pointer;margin-top:10px;transition:transform .1s}.share-button:active{transform:scale(.95)}.help-rules{text-align:left;line-height:1.5;padding-left:20px;font-size:.95rem}.help-rules li{margin-bottom:8px}.examples{text-align:left;margin-top:16px;border-top:1px solid var(--tile-border);padding-top:16px}.example-row{display:flex;gap:6px;margin:10px 0;width:150px}.example-row .tile{font-size:1.2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.stats-container{display:flex;justify-content:center;gap:12px;margin:15px 0}.stat-block{display:flex;flex-direction:column;align-items:center;width:60px}.stat-value{font-size:1.8rem;font-weight:700;color:var(--text-color)}.stat-label{font-size:.75rem;text-align:center;color:#bbb;margin-top:4px}.settings-list{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}.setting-item{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--tile-border);padding-bottom:15px}.setting-item:last-child{border-bottom:none;padding-bottom:0}.setting-text{text-align:left}.setting-text h3{margin:0 0 4px;font-size:1.1rem;font-weight:600}.setting-text p{margin:0;font-size:.85rem;color:#bbb}.toggle-switch{position:relative;display:inline-block;width:50px;height:28px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--tile-bg-empty);transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--color-correct)}input:checked+.slider:before{transform:translate(22px)}.settings-danger-zone{margin-top:20px;padding-top:20px;border-top:1px solid var(--tile-border)}.btn-danger{width:100%;padding:12px;background-color:transparent;color:#f44;border:2px solid #ff4444;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease}.btn-danger:hover{background-color:#ff44441a}.btn-danger.btn-confirm{background-color:#f44;color:#fff;animation:shake .5s}