.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-top:10px;margin-bottom:5px;width:100%;max-width:600px;align-items:center}.available-characters-container{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;min-height:45px;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;align-content:center}.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-top:6px;margin-bottom:2px;height:35px;min-height:35px;align-items:center}.available-characters-container{max-width:100%;padding:2px;gap:3px;margin:2px 0;min-height:35px;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}.word-path-animation{position:relative;width:100%;height:150px;background:var(--background);overflow:hidden}.graph-svg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.graph-edge{fill:none;stroke:var(--text-primary);stroke-width:2;stroke-linecap:square;opacity:0;stroke-dasharray:1000;stroke-dashoffset:1000;vector-effect:non-scaling-stroke}.graph-edge.edge-appear-10{animation:edgeAppear10 6s infinite}.graph-edge.edge-appear-20{animation:edgeAppear20 6s infinite}.graph-edge.edge-appear-30{animation:edgeAppear30 6s infinite}.graph-edge.edge-appear-40{animation:edgeAppear40 6s infinite}.graph-edge.edge-appear-50{animation:edgeAppear50 6s infinite}@keyframes edgeAppear10{0%,9%{opacity:0;stroke-dashoffset:1000}10%,83%{opacity:1;stroke-dashoffset:0}84%,to{opacity:0;stroke-dashoffset:1000}}@keyframes edgeAppear20{0%,19%{opacity:0;stroke-dashoffset:1000}20%,83%{opacity:1;stroke-dashoffset:0}84%,to{opacity:0;stroke-dashoffset:1000}}@keyframes edgeAppear30{0%,29%{opacity:0;stroke-dashoffset:1000}30%,83%{opacity:1;stroke-dashoffset:0}84%,to{opacity:0;stroke-dashoffset:1000}}@keyframes edgeAppear40{0%,39%{opacity:0;stroke-dashoffset:1000}40%,83%{opacity:1;stroke-dashoffset:0}84%,to{opacity:0;stroke-dashoffset:1000}}@keyframes edgeAppear50{0%,49%{opacity:0;stroke-dashoffset:1000}50%,83%{opacity:1;stroke-dashoffset:0}84%,to{opacity:0;stroke-dashoffset:1000}}.graph-nodes{position:relative;width:100%;height:100%;z-index:2}.graph-node-wrapper{position:absolute;transform:translate(-50%,-50%) scale(0)}.graph-node-wrapper.always-visible{transform:translate(-50%,-50%) scale(1)}.graph-node-wrapper.appear-10{animation:nodeAppear10 6s infinite}.graph-node-wrapper.appear-20{animation:nodeAppear20 6s infinite}.graph-node-wrapper.appear-30{animation:nodeAppear30 6s infinite}.graph-node-wrapper.appear-40{animation:nodeAppear40 6s infinite}.graph-node-wrapper.appear-50{animation:nodeAppear50 6s infinite}@keyframes nodeAppear10{0%,9%{transform:translate(-50%,-50%) scale(0)}10%,83%{transform:translate(-50%,-50%) scale(1)}84%,to{transform:translate(-50%,-50%) scale(0)}}@keyframes nodeAppear20{0%,19%{transform:translate(-50%,-50%) scale(0)}20%,83%{transform:translate(-50%,-50%) scale(1)}84%,to{transform:translate(-50%,-50%) scale(0)}}@keyframes nodeAppear30{0%,29%{transform:translate(-50%,-50%) scale(0)}30%,83%{transform:translate(-50%,-50%) scale(1)}84%,to{transform:translate(-50%,-50%) scale(0)}}@keyframes nodeAppear40{0%,39%{transform:translate(-50%,-50%) scale(0)}40%,83%{transform:translate(-50%,-50%) scale(1)}84%,to{transform:translate(-50%,-50%) scale(0)}}@keyframes nodeAppear50{0%,49%{transform:translate(-50%,-50%) scale(0)}50%,83%{transform:translate(-50%,-50%) scale(1)}84%,to{transform:translate(-50%,-50%) scale(0)}}.graph-node-wrapper .source-node{border-color:#43a047!important}.graph-node-wrapper .target-node{border-color:#e53935!important}.graph-node-wrapper .button-hash{font-size:.9rem;height:32px;padding:0 5px;opacity:1!important}@media (max-width: 768px){.word-path-animation{height:120px}.graph-node-wrapper .button-hash{font-size:.75rem;height:28px;padding:0 4px;opacity:1!important}}@media (max-width: 768px){.graph-node-wrapper .button-hash{font-size:.75rem;height:28px;padding:0 4px}}@media (prefers-reduced-motion: reduce){.graph-node-wrapper.appear-10,.graph-node-wrapper.appear-20,.graph-node-wrapper.appear-30,.graph-node-wrapper.appear-40,.graph-node-wrapper.appear-50,.graph-edge.edge-appear-10,.graph-edge.edge-appear-20,.graph-edge.edge-appear-30,.graph-edge.edge-appear-40,.graph-edge.edge-appear-50{animation:none!important}.graph-node-wrapper.appear-10,.graph-node-wrapper.appear-20,.graph-node-wrapper.appear-30,.graph-node-wrapper.appear-40,.graph-node-wrapper.appear-50{transform:translate(-50%,-50%) scale(1)}.graph-edge.edge-appear-10,.graph-edge.edge-appear-20,.graph-edge.edge-appear-30,.graph-edge.edge-appear-40,.graph-edge.edge-appear-50{opacity:1;stroke-dashoffset:0}}.transformation-rules{display:flex;gap:10px;width:100%;justify-content:space-around;padding:8px;background:var(--background)}.rule-demo{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}.rule-label{font-family:var(--font-button);font-size:.7rem;font-weight:600;color:var(--accent-primary);text-transform:uppercase;letter-spacing:.5px}.rule-word-creator{background:var(--background-secondary);width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:4px;position:relative}.rule-divider{width:100%;border-top:2px solid var(--text-primary);margin-bottom:4px}.rule-assembled{display:flex;gap:4px;justify-content:center;min-height:32px;height:32px;align-items:center;padding:6px;width:100%}.rule-available{display:flex;gap:4px;justify-content:center;min-height:32px;align-items:center;padding:6px;background:var(--background-secondary);border-radius:6px;width:100%}.rule-demo .character-button{cursor:default;pointer-events:none;width:32px;height:32px;font-size:20px;--char-offset: 1px}.rule-demo .character-button:hover{box-shadow:var(--char-offset) var(--char-offset) 0 0 var(--text-primary);transform:none}.rule-assembled>div,.rule-available>div{overflow:hidden;max-width:40px;transition:max-width .15s,opacity .15s}.reorder-bottom-a{animation:reorderHideA 6s infinite;display:flex}.reorder-bottom-c{animation:reorderHideC 6s infinite;display:flex}.reorder-bottom-t{animation:reorderHideT 6s infinite;display:flex}.reorder-bottom-wildcard{opacity:1;visibility:visible;max-width:40px;display:flex}.reorder-top-a{animation:reorderAppearA 6s infinite;display:flex}.reorder-top-c{animation:reorderAppearC 6s infinite;display:flex}.reorder-top-t{animation:reorderAppearT 6s infinite;display:flex}@keyframes reorderHideA{0%,10%{opacity:1;visibility:visible;max-width:40px}11%,83%{opacity:0;visibility:hidden;max-width:0}84%,to{opacity:1;visibility:visible;max-width:40px}}@keyframes reorderHideC{0%,20%{opacity:1;visibility:visible;max-width:40px}21%,83%{opacity:0;visibility:hidden;max-width:0}84%,to{opacity:1;visibility:visible;max-width:40px}}@keyframes reorderHideT{0%,30%{opacity:1;visibility:visible;max-width:40px}31%,83%{opacity:0;visibility:hidden;max-width:0}84%,to{opacity:1;visibility:visible;max-width:40px}}@keyframes reorderAppearA{0%,9%{opacity:0;visibility:hidden;max-width:0}10%,83%{opacity:1;visibility:visible;max-width:40px}84%,to{opacity:0;visibility:hidden;max-width:0}}@keyframes reorderAppearC{0%,19%{opacity:0;visibility:hidden;max-width:0}20%,83%{opacity:1;visibility:visible;max-width:40px}84%,to{opacity:0;visibility:hidden;max-width:0}}@keyframes reorderAppearT{0%,29%{opacity:0;visibility:hidden;max-width:0}30%,83%{opacity:1;visibility:visible;max-width:40px}84%,to{opacity:0;visibility:hidden;max-width:0}}.add-bottom-c{animation:addHideC 6s infinite;display:flex}.add-bottom-a{animation:addHideA 6s infinite;display:flex}.add-bottom-t{animation:addHideT 6s infinite;display:flex}.add-bottom-wildcard{animation:addHideWildcard 6s infinite;display:flex}.add-top-c{animation:addAppearC 6s infinite;display:flex}.add-top-a{animation:addAppearA 6s infinite;display:flex}.add-top-r{animation:addAppearR 6s infinite;display:flex}.add-top-t{animation:addAppearT 6s infinite;display:flex}@keyframes addHideC{0%,10%{opacity:1;visibility:visible;max-width:40px}11%,83%{opacity:0;visibility:hidden;max-width:0}84%,to{opacity:1;visibility:visible;max-width:40px}}@keyframes addHideA{0%,20%{opacity:1;visibility:visible;max-width:40px}21%,83%{opacity:0;visibility:hidden;max-width:0}84%,to{opacity:1;visibility:visible;max-width:40px}}@keyframes addHideT{0%,40%{opacity:1;visibility:visible;max-width:40px}41%,83%{opacity:0;visibility:hidden;max-width:0}84%,to{opacity:1;visibility:visible;max-width:40px}}@keyframes addHideWildcard{0%,30%{opacity:1;visibility:visible;max-width:40px}31%,83%{opacity:0;visibility:hidden;max-width:0}84%,to{opacity:1;visibility:visible;max-width:40px}}@keyframes addAppearC{0%,9%{opacity:0;visibility:hidden;max-width:0}10%,83%{opacity:1;visibility:visible;max-width:40px}84%,to{opacity:0;visibility:hidden;max-width:0}}@keyframes addAppearA{0%,19%{opacity:0;visibility:hidden;max-width:0}20%,83%{opacity:1;visibility:visible;max-width:40px}84%,to{opacity:0;visibility:hidden;max-width:0}}@keyframes addAppearR{0%,29%{opacity:0;visibility:hidden;max-width:0}30%,83%{opacity:1;visibility:visible;max-width:40px}84%,to{opacity:0;visibility:hidden;max-width:0}}@keyframes addAppearT{0%,39%{opacity:0;visibility:hidden;max-width:0}40%,83%{opacity:1;visibility:visible;max-width:40px}84%,to{opacity:0;visibility:hidden;max-width:0}}.drop-bottom-c{opacity:1;visibility:visible;max-width:40px;display:flex}.drop-bottom-a{animation:dropHideA 6s infinite;display:flex}.drop-bottom-t{animation:dropHideT 6s infinite;display:flex}.drop-bottom-wildcard{opacity:1;visibility:visible;max-width:40px;display:flex}.drop-top-a{animation:dropAppearA 6s infinite;display:flex}.drop-top-t{animation:dropAppearT 6s infinite;display:flex}@keyframes dropHideA{0%,10%{opacity:1;visibility:visible;max-width:40px}11%,83%{opacity:0;visibility:hidden;max-width:0}84%,to{opacity:1;visibility:visible;max-width:40px}}@keyframes dropHideT{0%,20%{opacity:1;visibility:visible;max-width:40px}21%,83%{opacity:0;visibility:hidden;max-width:0}84%,to{opacity:1;visibility:visible;max-width:40px}}@keyframes dropAppearA{0%,9%{opacity:0;visibility:hidden;max-width:0}10%,83%{opacity:1;visibility:visible;max-width:40px}84%,to{opacity:0;visibility:hidden;max-width:0}}@keyframes dropAppearT{0%,19%{opacity:0;visibility:hidden;max-width:0}20%,83%{opacity:1;visibility:visible;max-width:40px}84%,to{opacity:0;visibility:hidden;max-width:0}}@media (max-width: 768px){.transformation-rules{gap:8px;padding:6px}.rule-demo{gap:4px}.rule-label{font-size:.65rem}.rule-word-creator{padding:4px;gap:3px}.rule-demo .character-button{width:28px;height:28px;font-size:16px}.rule-assembled{gap:3px;padding:4px;height:28px;min-height:28px}.rule-available{gap:3px;padding:4px;min-height:28px}}@media (prefers-reduced-motion: reduce){.reorder-bottom-c,.reorder-bottom-a,.reorder-bottom-t,.reorder-top-c,.reorder-top-a,.reorder-top-t,.add-bottom-c,.add-bottom-a,.add-bottom-t,.add-bottom-wildcard,.add-top-c,.add-top-a,.add-top-r,.add-top-t,.drop-bottom-c,.drop-bottom-a,.drop-bottom-r,.drop-top-c,.drop-top-a,.drop-top-r{animation:none!important}.reorder-bottom-a,.reorder-bottom-c,.reorder-bottom-t,.add-bottom-c,.add-bottom-a,.add-bottom-t,.add-bottom-wildcard,.drop-bottom-a,.drop-bottom-t{opacity:0;visibility:hidden}.reorder-bottom-wildcard,.drop-bottom-c,.drop-bottom-wildcard{opacity:1;visibility:visible}.reorder-top-a,.reorder-top-c,.reorder-top-t,.add-top-c,.add-top-a,.add-top-r,.add-top-t,.drop-top-a,.drop-top-t{opacity:1;visibility:visible;transform:translate(0)}}.help-card-container{width:90%;max-width:600px;max-height:80vh}.help-card{width:100%;background:var(--background-secondary);border:2px solid var(--text-primary);text-decoration:none;color:var(--text-primary);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%;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%;padding-top:8px}.help-rules{display:flex;flex-direction:column;gap:10px}.rule-section h3{margin:0 0 6px;color:var(--accent-primary);font-size:14px;font-weight:600}.rule-section p{margin:0 0 6px;line-height:1.3;font-size:12px;color:var(--text-primary)}.rule-section-compact{margin-top:8px}.rule-section-compact h3{font-size:13px;margin-bottom:4px}.rule-section-compact ul{margin:0;padding-left:16px}.rule-section-compact li{margin-bottom:3px;font-size:11px;line-height:1.2}.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;max-height:70vh}.help-card-front,.help-card-back{padding:15px;gap:10px}.help-header h2{font-size:20px}.help-rules{gap:8px}.rule-section h3{font-size:13px;margin-bottom:4px}.rule-section p{font-size:11px;margin-bottom:4px}.rule-section-compact h3{font-size:12px;margin-bottom:3px}.rule-section-compact li{font-size:10px;margin-bottom:2px}.help-section h4{font-size:14px}.help-item kbd{min-width:50px;font-size:10px}.help-item span{font-size:11px}}.keyboard-shortcuts-container{width:90%;max-width:600px;max-height:80vh}.keyboard-shortcuts-card{width:100%;background:var(--background-secondary);border:2px solid var(--text-primary);text-decoration:none;color:var(--text-primary);position:relative;overflow:hidden;border-radius:8px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:20px}.keyboard-shortcuts-content{width:100%;display:flex;flex-direction:column;gap:15px}.keyboard-shortcuts-header{display:flex;justify-content:center;align-items:center;width:100%;margin-bottom:10px}.keyboard-shortcuts-header h2{margin:0;color:var(--text-primary);font-size:24px;font-weight:600}.keyboard-shortcuts-close-button{display:flex;justify-content:center;align-items:center;width:100%;padding-top:8px}.shortcuts-list{display:flex;flex-direction:column;gap:15px;max-height:60vh;overflow-y:auto}.shortcuts-section h4{margin:0 0 10px;color:var(--accent-primary);font-size:16px;font-weight:600}.shortcut-item{display:flex;align-items:center;gap:10px;margin-bottom:8px}.shortcut-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}.shortcut-item span{color:var(--text-primary);font-size:12px;flex:1}@media (max-width: 768px){.keyboard-shortcuts-container{width:95%;max-width:400px;max-height:70vh}.keyboard-shortcuts-card{padding:15px;gap:10px}.keyboard-shortcuts-header h2{font-size:20px}.shortcuts-section h4{font-size:14px}.shortcut-item kbd{min-width:50px;font-size:10px}.shortcut-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 .keyboard-shortcuts-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000}.graph-area .messages-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;max-width:90%;pointer-events:none}@media (max-width: 768px){.game-container{height:100vh;height:100dvh;padding-top:50px;overflow:hidden}.graph-area{min-height:300px}}