:root{--color-teal: #4ecdc4;--color-teal-light: #5fd9d0;--color-red: #e94560;--color-amber: #fbbf24;--color-purple: #a78bfa;--color-white: #ffffff;--color-gray: #888888;--color-dark-gray: #666666;--color-background: #1a1a2e;--color-panel: #16213e;--color-button: #0f3460;--color-border: #2a2a4e;--color-text: #eeeeee;--color-text-light: #dddddd;--color-text-muted: #cccccc;--color-teal-rgb: 78, 205, 196;--color-amber-rgb: 251, 191, 36;--color-purple-rgb: 167, 139, 250;--font-family: "Lexend", sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0;overflow:hidden}body{font-family:var(--font-family);background:var(--color-background);color:var(--color-text)}#app{display:flex;flex-direction:column;height:100vh;padding:10px}#game-selector{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:8px 0;margin:0 auto}.game-btn-wrapper{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px}.game-btn{position:relative;height:32px;width:100%;font-size:18px;font-weight:700;border:2px solid transparent;border-radius:4px;background:var(--color-panel);padding:0}.game-btn.active{border-color:var(--color-teal)}.game-btn:hover{background:var(--color-button)}.game-btn.status-in-progress{background:rgba(var(--color-amber-rgb),.3)}.game-btn.status-complete{background:rgba(var(--color-teal-rgb),.3)}.game-btn.active.status-in-progress{background:rgba(var(--color-amber-rgb),.3);border-color:var(--color-teal)}.game-btn.active.status-complete{background:rgba(var(--color-teal-rgb),.3);border-color:var(--color-teal)}.game-btn.vortex-pip:after{content:"";position:absolute;top:2px;right:2px;width:6px;height:6px;border-radius:50%;background:var(--color-purple)}.game-btn.gate-affected-win{border:2px solid var(--color-red)}.game-btn.gate-affected{border:2px dashed var(--color-red)}.game-score{font-size:12px;color:var(--color-white);min-height:14px}#header{flex-shrink:0;display:flex;align-items:stretch;height:60px;padding:4px 0;margin:0 auto 8px}#header-left{flex:1;display:flex;align-items:center;min-width:0}#header-center{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px}#header-right{flex:1;display:flex;justify-content:flex-end;align-items:stretch;gap:8px}#game-title{font-size:24px;font-weight:300;white-space:nowrap}#help-btn{margin-left:auto;padding:10px;font-size:14px;border-radius:4px;white-space:nowrap;width:150px;background:rgba(var(--color-amber-rgb),.3);border:1px solid var(--color-amber);color:var(--color-amber)}#help-btn:hover{background:rgba(var(--color-amber-rgb),.5)}#help-btn.has-win{background:var(--color-button);border:none;color:var(--color-text)}#help-btn.has-win:hover{background:var(--color-red)}#exit-tutorial{margin-left:auto;padding:10px;font-size:14px;border-radius:4px;white-space:nowrap;width:150px}#exit-tutorial.hidden{display:none}#score-breakdown{font-size:14px;color:var(--color-white);white-space:nowrap}#status{font-size:16px;min-height:20px;white-space:nowrap}#status.win{color:var(--color-teal);font-weight:700}#game-container{position:relative;flex-grow:1;display:flex;justify-content:center;align-items:center;min-height:0;border-radius:8px;padding:10px}#canvas-wrapper{position:relative}#game-canvas{display:block;cursor:pointer;box-shadow:0 0 0 20px var(--color-panel);border-radius:8px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:box-shadow .3s,opacity .15s ease}#game-canvas.shadow-teal{box-shadow:0 0 0 20px var(--color-teal)}#game-canvas.shadow-amber{box-shadow:0 0 0 20px var(--color-amber)}#game-canvas.shadow-gray{box-shadow:0 0 0 20px var(--color-gray)}#game-canvas.shadow-purple{box-shadow:0 0 0 20px var(--color-purple)}#controls.tutorial-hidden{visibility:hidden}#score-breakdown.tutorial-hidden{display:none}.game-btn:disabled{opacity:.3}.game-btn:disabled:hover{background:var(--color-panel)}#restore-best{padding:0 10px;font-size:14px;background:var(--color-button);opacity:.8;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;white-space:nowrap}#restore-best:hover{opacity:1}#restore-best.hidden{display:none}.restore-best-score{font-size:12px;color:var(--color-teal)}#restore-backup{padding:0 10px;font-size:14px;background:var(--color-button);opacity:.8;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;white-space:nowrap}#restore-backup:hover{opacity:1}#restore-backup.hidden{display:none}#restore-backup.confirm{background:var(--color-red);opacity:1}.restore-backup-score{font-size:12px;color:var(--color-purple)}#header-left{gap:6px}.vortex-btn{align-self:stretch;box-sizing:border-box;padding:0 14px;font-size:14px;font-weight:700;line-height:1.2;border-radius:4px;background:transparent;color:var(--color-purple);border:2px solid var(--color-purple);cursor:pointer;text-align:center}.vortex-btn:hover{background:rgba(var(--color-purple-rgb),.15)}.vortex-btn.active{background:var(--color-purple);color:var(--color-background);border-color:var(--color-purple)}.vortex-btn.invalid{border-style:dashed;border-color:var(--color-red)}.vortex-btn.dashed{border-style:dashed}.vortex-btn.hidden{display:none}#grid-selector{height:100%;display:flex;flex-direction:column;background:var(--color-panel);border-radius:8px;padding:12px;box-sizing:border-box}.grid-options-list{flex:1;overflow-y:auto;min-height:0}#grid-selector.hidden{display:none}.grid-option-wrapper{margin-bottom:8px;border-radius:6px;overflow:hidden;transition:box-shadow .15s,background .15s}.grid-option-wrapper.expanded{box-shadow:inset 0 0 0 2px var(--color-teal);background:rgba(var(--color-teal-rgb),.05)}.grid-option-wrapper.expanded.vortex{box-shadow:inset 0 0 0 2px var(--color-purple);background:rgba(var(--color-purple-rgb),.05)}.grid-option-wrapper.expanded.imported{box-shadow:inset 0 0 0 2px var(--color-amber);background:rgba(var(--color-amber-rgb),.05)}.grid-option-wrapper.expanded .grid-option,.grid-option-wrapper.expanded .grid-option:hover{border-color:transparent;background:transparent}.grid-option-wrapper.expanded .grid-option.current{background:transparent}.grid-option-wrapper.expanded .grid-option.vortex,.grid-option-wrapper.expanded .grid-option.vortex:hover,.grid-option-wrapper.expanded .grid-option.current.vortex,.grid-option-wrapper.expanded .grid-option.imported,.grid-option-wrapper.expanded .grid-option.imported:hover,.grid-option-wrapper.expanded .grid-option.current.imported{border-color:transparent;background:transparent}.grid-option{display:flex;gap:12px;padding:10px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:border-color .15s,background .15s}.grid-option:hover{border-color:var(--color-teal);background:rgba(var(--color-teal-rgb),.1)}.grid-option.current{background:rgba(var(--color-teal-rgb),.15);border-color:var(--color-teal)}.grid-option.vortex:hover{background:rgba(var(--color-purple-rgb),.1);border-color:var(--color-purple)}.grid-option.current.vortex{background:rgba(var(--color-purple-rgb),.15);border-color:var(--color-purple)}.grid-option.current.imported{background:rgba(var(--color-amber-rgb),.15);border-color:var(--color-amber)}.grid-option.imported:hover{background:rgba(var(--color-amber-rgb),.1);border-color:var(--color-amber)}.grid-option-preview{flex-shrink:0;width:80px;height:80px;background:var(--color-background);border-radius:4px}.grid-option-info{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}.grid-option-total{font-size:18px;font-weight:700;color:var(--color-teal)}.grid-option-total.vortex{color:var(--color-purple)}.grid-option-total.imported{color:var(--color-amber)}.grid-option-total.incomplete{color:var(--color-text-muted);font-weight:400}.grid-option-scores{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:14px;color:var(--color-text-light)}.grid-option-score{white-space:nowrap}.grid-option-score.solved{color:var(--color-teal)}.grid-option-score.solved.vortex{color:var(--color-purple)}.grid-option-score.solved.imported{color:var(--color-amber)}.grid-option-label{font-size:11px;color:var(--color-dark-gray);font-style:italic}.grid-option-label.imported-label{color:var(--color-amber)}.grid-option-label.vortex-label,.hub-valid{color:var(--color-purple)}.hub-invalid{color:var(--color-red)}.grid-option-expand{flex-shrink:0;align-self:center;margin-right:16px;width:48px;height:48px;padding:0 0 4px;font-size:36px;font-weight:700;line-height:1;border-radius:50%;background:var(--color-button);color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;text-indent:2px;transition:transform .25s ease,background .15s,color .15s}.grid-option-expand:hover{background:var(--color-teal);color:var(--color-background)}.vortex>.grid-option .grid-option-expand:hover,.vortex>.grid-option .grid-option-expand.expanded{background:var(--color-purple)}.imported>.grid-option .grid-option-expand:hover,.imported>.grid-option .grid-option-expand.expanded{background:var(--color-amber)}.grid-option-expand.expanded{transform:rotate(45deg)}.grid-option-actions{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;animation:actionRowSlideDown .15s ease-out}@keyframes actionRowSlideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.action-btn{padding:10px;font-size:14px;font-weight:700;border-radius:4px;background:var(--color-button);color:var(--color-text-muted);transition:background .15s,color .15s;white-space:nowrap}.action-btn:hover{background:var(--color-teal);color:var(--color-background)}.action-delete:hover,.action-delete.confirm{background:var(--color-red);color:var(--color-white)}.grid-import-section{display:flex;gap:8px;padding:12px 0;margin-top:8px;border-top:1px solid var(--color-border)}.grid-import-input{flex:1;padding:8px 12px;font-size:14px;font-family:inherit;background:var(--color-background);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text)}.grid-import-input:focus{outline:none;border-color:var(--color-teal)}.grid-import-input::placeholder{color:var(--color-dark-gray)}.grid-import-btn{width:60px;padding:8px;font-size:14px}.tutorial-hub-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tutorial-hub-card{display:flex;flex-direction:column;align-items:center;padding:10px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:border-color .15s,background .15s}.tutorial-hub-card:hover{border-color:var(--color-teal);background:rgba(var(--color-teal-rgb),.1)}.tutorial-hub-card.vortex:hover{border-color:var(--color-purple);background:rgba(var(--color-purple-rgb),.1)}.tutorial-hub-card.pinned{border-color:var(--color-teal)}.tutorial-hub-card.pinned.vortex{border-color:var(--color-purple)}.tutorial-hub-preview{width:100%;aspect-ratio:1;border-radius:4px;background:var(--color-background)}.tutorial-hub-title{display:flex;align-items:center;gap:8px;padding-top:8px;padding-left:6%;width:100%}.tutorial-hub-badge{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;border-radius:4px;background:var(--color-panel);color:var(--color-teal);border:2px solid var(--color-teal)}.tutorial-hub-badge.vortex{color:var(--color-purple);border-color:var(--color-purple)}.tutorial-hub-name{font-size:14px;font-weight:700;color:var(--color-text)}.grid-creator-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.grid-creator-card{display:flex;flex-direction:column;align-items:center;padding:10px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:border-color .15s,background .15s}.grid-creator-card:hover{border-color:var(--color-teal);background:rgba(var(--color-teal-rgb),.1)}.grid-creator-card.vortex:hover{border-color:var(--color-purple);background:rgba(var(--color-purple-rgb),.1)}.grid-creator-card.locked{opacity:.4;cursor:default}.grid-creator-card.locked:hover{border-color:transparent;background:transparent}.grid-creator-preview{width:100%;aspect-ratio:1;border-radius:4px;background:var(--color-background)}.grid-creator-card-title{padding-top:8px;width:100%;text-align:center}.grid-creator-description{font-size:16px;font-weight:700;color:var(--color-text)}.grid-creator-label{font-size:13px;color:var(--color-gray)}.grid-creator-locked-label{font-size:12px;color:var(--color-purple);font-style:italic;margin-top:4px}.grid-creator-footer{display:flex;justify-content:center;padding:12px 0;border-top:1px solid var(--color-border);margin-top:8px}.grid-creator-refresh-btn{padding:8px 24px;font-size:14px;border-radius:4px;background:var(--color-button);color:var(--color-text-muted);transition:background .15s,color .15s}.grid-creator-refresh-btn:hover{background:var(--color-teal);color:var(--color-background)}#controls{flex-shrink:0;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:20px 0;margin:0 auto}#copied-message{font-size:14px;color:var(--color-teal);margin-left:10px}button{background:var(--color-button);color:var(--color-text);border:none;padding:10px;border-radius:4px;cursor:pointer;font-size:14px;transition:background .2s}#controls button{width:150px}button:hover{background:var(--color-red)}button.confirm{background:var(--color-red);color:var(--color-white)}button:disabled{cursor:not-allowed}@media(max-width:600px){#app{padding:5px}#game-selector{order:1}#header{order:2}#game-container{order:3}#controls{order:4}#header{flex-wrap:wrap}#header-left{flex:0 0 auto}#header-center{order:3;flex:0 0 100%;padding:4px 0}#header-right{flex:1}#game-container{padding:5px;align-items:flex-start}#game-canvas{box-shadow:0 0 0 10px var(--color-panel)}#game-canvas.shadow-gray{box-shadow:0 0 0 10px var(--color-gray)}#game-canvas.shadow-purple{box-shadow:0 0 0 10px var(--color-purple)}.game-btn-wrapper{min-width:calc((100% - 20px) / 6)}.game-score{display:none}.game-btn{font-size:14px}#game-title{font-size:18px}#score-breakdown{font-size:12px}.tutorial-hub-list,.grid-creator-list{grid-template-columns:1fr 1fr}#controls{flex-wrap:wrap;justify-content:center;width:auto!important}#controls button{width:calc(50% - 5px);padding:10px 8px}#copied-message{width:100%;text-align:center;margin-left:0}}