.word-creator{background:var(--background-secondary);border:none;border-radius:0;width:100%;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:10px;outline:none;padding:10px 0}.word-creator:before{display:none}.word-creator-divider{width:100%;border:none;border-top:2px solid var(--text-primary);margin:0}.assembled-word-container{display:flex;gap:5px;justify-content:center;min-height:45px;height:45px;padding:10px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;margin-bottom:5px;width:100%;max-width:600px}.available-characters-container{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;min-height:45px;padding:10px;background:var(--background-secondary);border-radius:8px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;width:100%;max-width:700px}.placeholder-thick-border{border-width:1.5px!important}.placeholder-last-two{opacity:1}.characters-container{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;min-height:40px;padding:5px;background:var(--background-secondary);border-radius:8px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative}.characters-container.drag-over{background:var(--background);padding:5px 15px;box-shadow:inset 0 0 0 2px var(--background)}.characters-container>div{transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.character{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background-color:var(--background-secondary);border:2px solid var(--accent-dark);border-radius:4px;cursor:move;font-size:18px;font-family:var(--font-button);font-weight:600;color:var(--accent-dark);transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;will-change:transform,opacity;box-shadow:0 1px 3px #0000001a}.characters-container .dragging{z-index:1000}.drag-overlay{pointer-events:none;z-index:9999}.character:hover:not(.button-disabled){background-color:var(--background);transform:scale(1.05);box-shadow:0 2px 6px #00000026}.character.button-disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1);pointer-events:none}.character.added{background-color:var(--background-secondary);border:2px solid var(--accent-primary)}.wildcard-indicator{margin-left:10px}.keyboard-instructions{font-size:12px;color:var(--accent-secondary);text-align:center;margin-bottom:10px;opacity:.8;font-style:italic}.control-container{display:flex;gap:10px;margin-bottom:20px;padding:5px;justify-content:center;align-items:center;min-height:30px}.add-character{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background-color:var(--background-secondary);border:2px solid var(--accent-dark);border-radius:4px;cursor:pointer;font-size:18px;font-family:var(--font-button);font-weight:600;color:var(--accent-dark);transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;will-change:transform,opacity;box-shadow:0 1px 3px #0000001a;flex-shrink:0}.add-character:hover:not(.button-disabled){background-color:var(--background);transform:scale(1.05);box-shadow:0 2px 6px #00000026}.add-character-btn.button-disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1);pointer-events:none}.add-character.disabled{background-color:var(--background-secondary);color:var(--accent-secondary);cursor:not-allowed;opacity:.6;border:1px dashed var(--accent-secondary)}.add-character.disabled:hover{background-color:var(--background-secondary);transform:none;box-shadow:0 1px 3px #0000001a;border:1px dashed var(--accent-secondary);color:var(--accent-secondary)}.deleted-character-placeholder{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background-color:var(--background-secondary);border:1px dashed var(--accent-secondary);border-radius:4px;font-size:14px;color:var(--accent-secondary);text-align:center;line-height:1;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:all .2s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;box-shadow:0 1px 3px #0000001a}.alphabet-container{background:var(--background-secondary);padding:15px;border:2px solid var(--accent-dark);border-radius:8px;animation:slideDown .2s ease-out;margin-bottom:10px;width:100%;max-width:600px}.alphabet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:600;color:var(--text-primary)}.alphabet-grid{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}.alphabet-character{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background-color:var(--background-secondary);border:2px solid var(--accent-dark);border-radius:4px;cursor:pointer;font-size:18px;font-family:var(--font-button);font-weight:600;color:var(--accent-dark);transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;will-change:transform,opacity;box-shadow:0 1px 3px #0000001a}.alphabet-character:hover:not(.button-disabled){background-color:var(--accent-primary);color:var(--background);transform:scale(1.05);box-shadow:0 2px 6px #00000026}.alphabet-character.button-disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1);pointer-events:none}.word-creator form{display:flex;justify-content:center;gap:10px;margin-top:10px}.word-creator button:not(.button-icon):not(.button-hash):not(.character-button){padding:8px 16px;background:var(--accent-dark);color:var(--background);border:1px solid var(--accent-dark);border-radius:0;cursor:pointer;font-size:14px;text-transform:uppercase;letter-spacing:1px;transition:all .2s;min-width:100px}.word-creator button:not(.button-icon):hover:not(:disabled){background:var(--background);color:var(--accent-dark)}.word-creator button:not(.button-icon):disabled{background:none;color:var(--accent-secondary);border:none;cursor:not-allowed;opacity:.6}.word-creator .icon{width:20px;height:20px;display:block;fill:currentColor}.word-creator .icon-button{background:none;border:none;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.word-creator .icon-button:hover:not(:disabled){transform:scale(1.05)}.word-creator .icon-button:disabled{opacity:.5;cursor:not-allowed}.tutorial-highlight{animation:pulse 2s infinite}.tutorial-highlight button,button.tutorial-highlight{animation:pulse-big 2s infinite}.tutorial-disabled{pointer-events:none!important;opacity:.5!important;filter:grayscale(50%)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes pulse-big{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}@media (max-width: 768px){.word-creator{padding:2px 0}.character,.add-character,.alphabet-character,.deleted-character-placeholder{width:20px;height:20px;font-size:11px;margin:1px}.assembled-word-container{max-width:100%;padding:2px;gap:3px;margin:2px 0;height:35px;min-height:35px}.available-characters-container{max-width:100%;padding:2px;gap:3px;margin:2px 0;min-height:35px}.keyboard-instructions{font-size:10px;margin-bottom:2px}.control-container{gap:4px;margin:2px 0}.word-creator-divider{margin:4px 0}.deleted-character-placeholder{font-size:14px}}:root{--hash-selected: repeating-linear-gradient(-45deg, var(--accent-primary) 0px, var(--accent-primary) 1px, transparent 1px, transparent 4px)}.character-button{--char-offset: 1px;width:45px;height:45px;display:flex;align-items:center;justify-content:center;background-color:var(--background-secondary);border:2px solid var(--text-primary);border-radius:4px;cursor:pointer;font-size:30px;font-family:var(--font-button);font-weight:600;color:var(--text-primary);transition:transform .15s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none;will-change:transform;box-shadow:var(--char-offset) var(--char-offset) 0 0 var(--text-primary)}.character-button:hover{box-shadow:none;transform:translate(var(--char-offset),var(--char-offset))}.character-button.character-added{background-color:var(--background-secondary);border:2px solid var(--text-primary);background-image:var(--hash-selected)}@media (max-width: 768px){.character-button{--char-offset: 1px;width:38px;height:38px;font-size:24px}}.character-button.button-disabled{cursor:not-allowed;pointer-events:none;opacity:.5}.character-button.button-disabled{box-shadow:none;transform:none;border:1px dashed var(--text-primary)}.character-button.button-pulse:hover{animation:none}:root{--hash-selected: repeating-linear-gradient(-45deg, var(--accent-primary) 0px, var(--accent-primary) 1px, transparent 1px, transparent 4px);--hash-marked: repeating-linear-gradient(45deg, var(--accent-secondary) 0px, var(--accent-secondary) 1px, transparent 1px, transparent 4px)}.button-hash{cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;outline:none;width:auto;padding:0 6px;height:40px;font-size:1.5rem;font-weight:600;font-family:var(--font-button);background:var(--background);color:var(--text-primary);border:2px solid var(--text-primary);border-radius:0;position:relative;overflow:hidden}.button-hash.button-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.button-hash.button-selected{background-image:var(--hash-selected);background-color:var(--background)}.button-hash.button-marked{border-color:var(--accent-secondary)}.button-hash:hover{background-image:var(--hash-selected);background-color:var(--background);color:var(--text-primary)}.button-hash.button-marked:hover{background-image:var(--hash-selected);background-color:var(--background);border-color:var(--accent-secondary)}.button-hash.button-selected:hover{background-image:var(--hash-selected);background-color:var(--background)}.button-hash.button-disabled:hover{background-image:none;background-color:var(--background)}.button-hash.button-small{height:35px;font-size:1rem}@media (max-width: 768px){.button-hash:not(.button-small){height:35px;font-size:1rem}}.button-hash.button-disabled{cursor:not-allowed;pointer-events:none;opacity:.5}.button-pulse{animation:hash-pulse 2s infinite}@keyframes hash-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}@media (max-width: 768px){.word-graph-hash-button{height:20px;font-size:1.5rem;padding:0;min-width:28px}}.word-graph-svg{width:100%!important;height:100%!important;display:block;box-sizing:border-box}.word-graph-svg text{font-family:var(--font-body, sans-serif);font-size:14px}.tutorial-pulse{animation:graph-node-pulse 2s infinite}@keyframes graph-node-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.word-graph-container{position:relative;width:100%;height:100%}.word-graph-nodes{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.word-graph-hash-button{pointer-events:auto;transition:transform .1s ease}.word-graph-hash-button:hover:not(.button-disabled){z-index:20}.word-graph-hash-button.source-node{border-color:#43a047!important}.word-graph-hash-button.target-node{border-color:#e53935!important}.word-graph-svg .edges path.disabled{stroke:#999!important;opacity:.3}.help-card-container{width:90%;max-width:600px;height:80vh;max-height:800px;perspective:1000px}.help-card-container>div{width:100%!important;height:100%!important}.help-card{width:100%!important;height:100%!important;background:var(--background-secondary);border:2px solid var(--text-primary);text-decoration:none;color:var(--text-primary);cursor:pointer;position:relative;overflow:hidden;border-radius:8px}.help-card-front{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:20px;min-height:100%;gap:15px}.help-card-back{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:20px;min-height:100%;border:6px double var(--text-primary)}.help-card-content{width:100%;height:100%;display:flex;flex-direction:column;gap:15px}.help-header{display:flex;justify-content:center;align-items:center;width:100%;margin-bottom:10px}.help-header h2{margin:0;color:var(--text-primary);font-size:24px;font-weight:600}.help-close-button{display:flex;justify-content:center;align-items:center;width:100%;margin-top:auto;padding-top:15px}.help-rules{flex:1;display:flex;flex-direction:column;gap:20px;overflow-y:auto}.rule-section h3{margin:0 0 10px;color:var(--accent-primary);font-size:18px;font-weight:600}.rule-section p{margin:0 0 10px;line-height:1.5;color:var(--text-primary)}.rule-section ul{margin:0;padding-left:20px;color:var(--text-primary)}.rule-section li{margin-bottom:8px;line-height:1.4}.help-shortcuts{flex:1;display:flex;flex-direction:column;gap:15px;overflow-y:auto}.help-section h4{margin:0 0 10px;color:var(--accent-primary);font-size:16px;font-weight:600}.help-item{display:flex;align-items:center;gap:10px;margin-bottom:8px}.help-item kbd{background:var(--background);border:1px solid var(--accent-secondary);border-radius:4px;padding:2px 6px;font-family:var(--font-button);font-size:11px;color:var(--text-primary);min-width:60px;text-align:center;box-shadow:0 1px 2px #0000001a}.help-item span{color:var(--text-primary);font-size:12px;flex:1}@media (max-width: 768px){.help-card-container{width:95%;max-width:400px;height:70vh;max-height:500px}.help-card-front,.help-card-back{padding:15px;gap:10px}.help-header h2{font-size:20px}.rule-section h3{font-size:16px}.help-section h4{font-size:14px}.help-item kbd{min-width:50px;font-size:10px}.help-item span{font-size:11px}}.game-container{width:100%;height:100vh;height:100dvh;padding-top:80px;color:var(--text-primary);box-sizing:border-box;background:var(--background);position:relative;display:flex;flex-direction:column}.game-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.graph-area{flex:1;position:relative;overflow:hidden;background:var(--background);min-height:400px}.creator-area{flex-shrink:0;background:var(--background-secondary)}.graph-area .word-graph-svg{width:100%!important;height:100%!important;display:block;position:absolute;top:0;left:0}.sigma-container{width:100%;height:100%;position:absolute;top:0;left:0}.sigma-container canvas{width:100%!important;height:100%!important}.graph-area .game-card-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.game-area{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.game-area .help-card-container,.game-area .messages-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000}@media (max-width: 768px){.game-container{height:100vh;height:100dvh;padding-top:50px;overflow:hidden}.graph-area{min-height:300px}}