: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;--color-red-rgb: 233, 69, 96;--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}#main-row{--status-line-height: 36px;--status-line-gap: 16px;--grid-padding: 10px;--canvas-top-offset: calc(var(--status-line-height) + var(--status-line-gap) + var(--grid-padding));flex:1;display:flex;justify-content:center;gap:20px;min-height:0}#sidebar-left{flex:0 0 170px;display:flex;flex-direction:column;gap:20px;padding:var(--canvas-top-offset) 0 var(--grid-padding)}#center-column{flex:0 0 auto;min-width:0;display:flex;flex-direction:column}#sidebar-right{flex:0 0 200px;display:flex;flex-direction:column;gap:14px;padding:var(--canvas-top-offset) 0 8px;overflow-y:auto}#game-info{display:flex;flex-direction:column;gap:6px}#game-selector{flex-shrink:0;display:flex;flex-direction:column;gap:8px}.game-btn-wrapper{display:flex;align-items:center;gap:12px;overflow:hidden}.game-btn{position:relative;display:flex;align-items:center;justify-content:center;height:48px;width:48px;flex-shrink:0;font-size:22px;font-weight:700;white-space:nowrap;overflow:hidden;border:2px solid transparent;border-radius:4px;background:var(--color-panel);padding:0;transition:width .2s ease}.game-btn-name{max-width:0;opacity:0;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.game-btn:hover{width:100%}.game-btn:hover .game-btn-name{max-width:140px;opacity:1}.game-score{transition:opacity .15s ease}.game-btn:hover+.game-score{opacity:0}#game-hover-info{display:none}.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:9px;height:9px;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:16px;color:var(--color-white)}#header{flex-shrink:0;display:flex;align-items:center;justify-content:center;height:var(--status-line-height, 36px);margin-bottom:var(--status-line-gap, 16px)}#game-title{font-size:32px;font-weight:300}.icon-btn{position:relative;display:flex;align-items:center;justify-content:center;height:48px;flex-shrink:0;padding:0;overflow:hidden;white-space:nowrap;border:2px solid transparent;border-radius:4px;background:var(--color-panel);color:var(--color-text);transition:width .2s ease,background .2s}#controls .icon-btn{width:96px;height:96px}#controls .icon-btn:hover,#controls .icon-btn.confirm{width:100%}#controls .icon-btn-glyph svg{width:52px;height:52px}#controls .icon-btn-label{font-size:22px}.icon-btn:hover{background:var(--color-button)}.icon-btn.active{border-color:var(--color-teal)}.icon-btn:disabled{opacity:.4;cursor:default;pointer-events:none}.icon-btn-glyph{display:inline-flex;align-items:center;justify-content:center;max-width:60px;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.icon-btn-label{max-width:0;opacity:0;overflow:hidden;font-size:14px;font-weight:700;transition:max-width .2s ease,opacity .2s ease}.icon-btn-label.back{white-space:normal;text-align:center;line-height:1.15}.icon-btn:hover .icon-btn-glyph,.icon-btn.confirm .icon-btn-glyph{max-width:0;opacity:0}.icon-btn:hover .icon-btn-label,.icon-btn.confirm .icon-btn-label{max-width:140px;opacity:1}.icon-btn.confirm{background:var(--color-red);color:var(--color-white)}#help-btn{background:rgba(var(--color-amber-rgb),.3);border:2px 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-color:transparent;color:var(--color-text)}#help-btn.has-win:hover{background:var(--color-red)}#auto-start:not(:disabled){background:rgba(var(--color-amber-rgb),.3);border:2px solid var(--color-amber);color:var(--color-amber)}#auto-start:not(:disabled):hover{background:rgba(var(--color-amber-rgb),.5)}#exit-tutorial.hidden{display:none}#score-breakdown{font-size:16px;color:var(--color-white);white-space:pre-line;line-height:1.4;min-height:4.2em}#tutorial-hint{display:none;font-size:15px;color:var(--color-text-muted);font-style:italic}#tutorial-hint.show{display:block}#status{font-size:16px;min-height:20px;white-space:nowrap}#status.win{color:var(--color-teal);font-weight:700}#status.scoring{color:var(--color-amber)}.tut-progress{display:inline-flex;align-items:center;gap:8px}.tut-dot{width:36px;height:15px;border-radius:999px;border:2px solid var(--color-text-muted);box-sizing:border-box;transition:background .2s,width .2s}.tut-dot-done{background:rgba(var(--color-teal-rgb),.45);border-color:transparent}.tut-dot-current{width:56px;background:var(--color-teal);border-color:transparent}.tut-progress.vortex .tut-dot-done{background:rgba(var(--color-purple-rgb),.45)}.tut-progress.vortex .tut-dot-current{background:var(--color-purple)}#game-container{position:relative;flex-grow:1;display:flex;justify-content:center;align-items:flex-start;min-height:0;border-radius:8px;padding:var(--grid-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)}#score-breakdown.tutorial-hidden{display:none}.game-btn:disabled{opacity:.3}.game-btn:disabled:hover{background:var(--color-panel)}#restore-buttons{display:flex;flex-direction:column;gap:10px;margin-top:auto}#restore-buttons button{padding:8px 10px;font-size:14px;background:rgba(var(--color-amber-rgb),.3);border:1px solid var(--color-amber);color:var(--color-amber);border-radius:4px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:8px;row-gap:2px;white-space:nowrap}.restore-icon{flex-shrink:0}#restore-buttons button:hover{background:rgba(var(--color-amber-rgb),.5)}#restore-best.hidden,#restore-backup.hidden{display:none}#restore-backup.confirm{background:var(--color-red);border-color:var(--color-red);color:var(--color-white)}.restore-best-score,.restore-backup-score{flex-basis:100%;text-align:center}.restore-best-score{font-size:12px;color:var(--color-teal)}.restore-backup-score{font-size:12px;color:var(--color-purple)}#vortex-buttons{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:-4px}#vortex-buttons:not(:has(.vortex-icon-btn:not(.hidden))){display:none}#vortex-buttons .icon-btn{width:96px;height:96px}#vortex-buttons .icon-btn:hover:not(:disabled),#vortex-buttons .icon-btn.confirm{width:100%}#vortex-buttons .icon-btn-glyph svg{width:52px;height:52px}#vortex-buttons .icon-btn-label{font-size:22px;white-space:normal;text-align:center;line-height:1.15}#scoring-rules-btn.scoring-locked{visibility:hidden;pointer-events:none}#scoring-rules-btn{width:96px;height:96px;background:#ffffff14;border-color:var(--color-white);color:var(--color-white)}#scoring-rules-btn .icon-btn-glyph svg{width:52px;height:52px}#scoring-rules-btn .icon-btn-label{font-size:22px;white-space:normal;text-align:center;line-height:1.15}#scoring-rules-btn:hover .icon-btn-label,#vortex-buttons .icon-btn:hover .icon-btn-label{max-width:110px}#scoring-rules-btn:hover:not(:disabled){width:100%;background:#ffffff2e}#scoring-rules-btn.active{background:var(--color-white);border-color:var(--color-white);color:var(--color-background)}.vortex-icon-btn{background:rgba(var(--color-purple-rgb),.18);border:2px solid var(--color-purple);color:var(--color-purple)}.vortex-icon-btn:hover:not(:disabled){background:rgba(var(--color-purple-rgb),.3)}.vortex-icon-btn.active{background:var(--color-purple);border-color:var(--color-purple);color:var(--color-background)}.vortex-icon-btn.invalid{border-style:dashed;border-color:var(--color-red)}.vortex-icon-btn.dashed{border-style:dashed}.vortex-icon-btn.confirm{background:var(--color-red);border-color:var(--color-red);color:var(--color-white)}.vortex-icon-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;padding-right:8px}.grid-create-row{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:12px;margin-bottom:12px;margin-left:0;margin-right:8px;border:2px dashed var(--color-teal);border-radius:6px;cursor:pointer;color:var(--color-teal);transition:background .15s}.grid-create-row:hover{background:rgba(var(--color-teal-rgb),.1)}.grid-create-icon,.grid-import-icon,.grid-remove-icon{display:flex;align-items:center;justify-content:center;align-self:stretch;flex-shrink:0;width:48px;font-size:36px;font-weight:700;line-height:1}.grid-create-label,.grid-import-label,.grid-remove-label{flex-shrink:0;font-size:18px;font-weight:700}#grid-selector.hidden{display:none}#admin-panel{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;gap:10px;background:var(--color-panel);border-radius:8px;padding:14px;box-sizing:border-box;overflow-y:auto;font-size:14px}#admin-panel.hidden,#admin-btn.hidden,#admin-back-btn{display:none}body.admin-mode #controls>*:not(#admin-back-btn){display:none!important}body.admin-mode #restore-buttons,body.admin-mode #copied-message,body.admin-mode #sidebar-right>*{display:none!important}body.admin-mode #header{display:none!important}body.admin-mode #admin-back-btn{display:flex}body.admin-mode #sidebar-left{padding-top:var(--grid-padding)}body.admin-mode #game-canvas{box-shadow:0 0 0 20px var(--color-panel)}#welcome-panel,#settings-panel,#leaderboard-panel{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;gap:14px;background:var(--color-panel);border-radius:8px;padding:18px 22px;box-sizing:border-box;overflow-y:auto;font-size:14px}#welcome-panel.hidden,#settings-panel.hidden,#leaderboard-panel.hidden,#leaderboard-btn.hidden{display:none}#leaderboard-btn.pending{color:var(--color-amber)}#leaderboard-btn.pending:hover{background:var(--color-amber);color:#2a2410}body.panel-mode #header,#welcome-close-btn.hidden,#export-state.hidden,#export-data.hidden,#import-data.hidden{display:none}#welcome-panel{font-size:18px;padding:22px 28px}.welcome-title{margin:0;font-size:36px;text-align:center;color:var(--color-teal)}#welcome-panel.vortex .welcome-title{color:var(--color-purple)}.welcome-intro{margin:0;text-align:center;font-size:20px;color:var(--color-text-muted);line-height:1.5}.welcome-section{display:flex;align-items:center;gap:28px;padding:18px 0;border-top:1px solid var(--color-border)}.welcome-section.reverse{flex-direction:row-reverse}.welcome-section-text{flex-direction:column;text-align:center;gap:6px}.welcome-previews{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;flex-shrink:0;max-width:360px}.welcome-preview{width:170px;height:170px;border-radius:8px;background:var(--color-background)}.welcome-text{display:flex;flex-direction:column;gap:8px}.welcome-heading{margin:0;font-size:24px;color:var(--color-text)}.welcome-text p{margin:0;font-size:18px;color:var(--color-text-muted);line-height:1.55}.welcome-section-guide{flex-direction:column;align-items:stretch;gap:16px}.welcome-guide-list{display:flex;flex-direction:column;gap:16px}.welcome-guide-item{display:flex;align-items:center;gap:18px}.welcome-guide-icon{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--color-button);color:var(--color-teal)}#welcome-panel.vortex .welcome-guide-icon{color:var(--color-purple)}.welcome-guide-icon svg{width:30px;height:30px}.welcome-guide-name{font-size:19px;color:var(--color-text);margin-bottom:2px}.welcome-guide-text p{margin:0;font-size:17px;color:var(--color-text-muted);line-height:1.5}.welcome-chooser{margin-top:auto;padding-top:14px;border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:10px}.welcome-chooser-prompt{margin:0;color:var(--color-text);line-height:1.5}.welcome-chooser-buttons{display:flex;gap:12px}.welcome-btn{flex:1;padding:12px 16px;font-size:18px;background:var(--color-button);color:var(--color-text);border:1px solid var(--color-border);border-radius:6px;cursor:pointer;transition:background .15s,color .15s}.welcome-btn:hover{background:var(--color-teal);color:#06281f}#welcome-panel.vortex .welcome-btn:hover{background:var(--color-purple);color:#1c1430}.settings-title{margin:0;font-size:22px;color:var(--color-teal)}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--color-border)}.settings-name{font-size:16px;color:var(--color-text)}.settings-hint{font-size:13px;color:var(--color-text-muted);margin-top:2px}.settings-segmented{display:flex;flex-shrink:0;border:1px solid var(--color-border);border-radius:6px;overflow:hidden}.settings-segment{padding:8px 16px;background:var(--color-button);color:var(--color-text-muted);border:none;cursor:pointer;transition:background .15s,color .15s}.settings-segment+.settings-segment{border-left:1px solid var(--color-border)}.settings-segment.active{background:var(--color-teal);color:#06281f}.settings-segment:not(.active):hover{color:var(--color-text)}.settings-btn{flex-shrink:0;padding:8px 16px;background:var(--color-button);color:var(--color-text);border:1px solid var(--color-border);border-radius:6px;cursor:pointer;transition:background .15s,color .15s}.settings-btn:hover{background:var(--color-teal);color:#06281f}.settings-segmented-wrap{display:flex;flex-shrink:0;gap:8px}#leaderboard-panel{font-size:17px}.leaderboard-title{margin:0;font-size:28px;color:var(--color-teal)}.leaderboard-controls{display:flex;flex-direction:column;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--color-border)}.leaderboard-name-row,.leaderboard-mode-row{display:flex;align-items:center;gap:10px}.leaderboard-label{color:var(--color-text-muted);min-width:72px}.leaderboard-name-input{flex:1;max-width:200px;padding:6px 10px;background:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px}.leaderboard-btn-action{padding:6px 12px;background:var(--color-button);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px;cursor:pointer;transition:background .15s,color .15s}.leaderboard-btn-action:hover{background:var(--color-teal);color:#06281f}.leaderboard-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:12px 0 8px}.leaderboard-tab{padding:6px 12px;background:var(--color-button);color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:4px;cursor:pointer;font-size:15px}.leaderboard-tab.active{background:var(--color-teal);color:#06281f}.leaderboard-table{display:flex;flex-direction:column}.leaderboard-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:4px}.leaderboard-row:nth-child(odd){background:#ffffff08}.leaderboard-row.me{background:rgba(var(--color-teal-rgb),.18);outline:1px solid rgba(var(--color-teal-rgb),.5)}.leaderboard-row.reference{outline:1px solid var(--color-amber)}.leaderboard-tied-toggle{margin-left:44px;padding:5px 10px;color:var(--color-text-muted);font-size:15px;cursor:pointer}.leaderboard-tied-toggle:hover{color:var(--color-text)}.leaderboard-row.tied-member{margin-left:44px;opacity:.85}.leaderboard-rank{width:34px;text-align:right;color:var(--color-text-muted)}.leaderboard-name{flex:1;color:var(--color-text)}.leaderboard-name.anonymous{font-style:italic;color:var(--color-text-muted)}.leaderboard-score{font-variant-numeric:tabular-nums;color:var(--color-text-light)}.leaderboard-penalty{color:var(--color-amber);font-size:14px}.leaderboard-empty{color:var(--color-text-muted);padding:16px 4px}.grid-scroll{flex:1;overflow-y:auto;min-height:0;padding-right:8px;display:flex;flex-direction:column;gap:10px}.grid-scroll>*{flex-shrink:0}.grid-section-label{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-muted);margin-bottom:-4px;margin-left:8px}.grid-pinned{margin-left:8px;margin-right:8px}.grid-folder{border:2px dashed var(--color-border);border-radius:6px;padding:6px}.grid-folder-header{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 6px;-webkit-user-select:none;user-select:none}.grid-folder-header:hover{color:var(--color-teal)}.grid-folder-tri{width:1em;color:var(--color-teal)}.grid-folder-label{font-weight:700}.grid-folder-count{margin-left:auto;color:var(--color-text-muted);font-size:12px}.grid-folder-body{display:flex;flex-direction:column;gap:8px;margin-top:6px}.grid-folder-body .grid-option-wrapper{margin-bottom:0}.grid-folder-empty{color:var(--color-text-muted);font-size:13px;padding:6px}.grid-challenge-card{display:flex;align-items:center;gap:12px;padding:8px;border:2px solid var(--color-amber);border-radius:6px}.grid-option-label.challenge-label{color:var(--color-amber);font-weight:700}.admin-header{display:flex;align-items:center;gap:8px}.admin-title{font-weight:700;font-size:18px;color:var(--color-teal)}.admin-subtitle{font-weight:700;margin-top:4px;color:var(--color-text-light)}.admin-section{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px;background:#ffffff08;border-radius:6px}.admin-label{color:var(--color-text-muted)}.admin-sizes{display:inline-flex;gap:10px}.admin-sizes label{display:inline-flex;align-items:center;gap:3px}.admin-input{width:56px;padding:4px 6px;background:var(--color-button);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px}.admin-btn{padding:5px 12px;background:var(--color-button);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px;cursor:pointer;transition:background .15s}.admin-btn:hover{background:var(--color-teal);color:#06281f}.admin-btn-secondary{opacity:.8}.admin-btn-danger{border-color:#a33;color:#e88}.admin-btn-danger:hover{background:#a33;color:#fff}.admin-status{padding:6px 8px;background:rgba(var(--color-teal-rgb),.12);border-radius:4px;color:var(--color-text-light)}.admin-joblog{margin:0;max-height:200px;overflow-y:auto;padding:8px;background:#0b1020;border-radius:4px;font-family:ui-monospace,monospace;font-size:12px;white-space:pre-wrap}.admin-list{display:flex;flex-direction:column;gap:6px}.admin-empty{color:var(--color-text-muted);padding:8px}.admin-grid-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#ffffff08;border-radius:6px}.admin-grid-info{flex:1;min-width:0}.admin-grid-hash{font-family:ui-monospace,monospace;color:var(--color-teal)}.admin-grid-meta{color:var(--color-text-muted)}.admin-draft-done{color:var(--color-teal)}.admin-draft-pending{color:var(--color-text-muted)}.admin-local-hint{color:var(--color-amber)}.admin-grid-actions{display:flex;gap:6px;flex-shrink:0}.admin-grid-row-ref{opacity:.85}.admin-tag{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:1px 6px;border-radius:4px;vertical-align:middle}.admin-tag-default{background:rgba(var(--color-teal-rgb),.18);color:var(--color-teal)}.admin-tag-challenge{background:rgba(var(--color-amber-rgb),.18);color:var(--color-amber)}.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-cleared{display:none;font-size:13px;color:var(--color-teal);letter-spacing:1px}.grid-option-cleared.vortex{color:var(--color-purple)}.grid-option-cleared.imported{color:var(--color-amber)}@media(max-width:600px){.grid-option-scores{display:none}.grid-option-cleared{display:block}}.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;align-items:center;gap:12px;flex-shrink:0;padding:6px 6px 6px 12px;margin-top:12px;margin-left:0;margin-right:8px;border:2px dashed var(--color-teal);border-radius:6px}.grid-import-input{flex:1;min-width:40px;padding:8px 4px;font-size:14px;font-family:inherit;background:transparent;border:none;color:var(--color-text)}.grid-import-input:focus{outline:none}.grid-import-input::placeholder{color:var(--color-dark-gray)}.grid-import-btn{flex-shrink:0;width:48px;height:48px;padding:0;margin-right:20px;font-size:14px;border-radius:6px}.grid-remove-row{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:12px;margin-top:8px;margin-left:0;margin-right:8px;border:2px dashed var(--color-red);border-radius:6px;cursor:pointer;color:var(--color-red);transition:background .15s}.grid-remove-row:hover{background:rgba(var(--color-red-rgb),.1)}.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{cursor:default}.grid-creator-card.locked:hover{border-color:transparent;background:transparent}.grid-creator-card.locked .grid-creator-preview{opacity:.4}.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:22px;font-weight:700;color:var(--color-text)}.grid-creator-label{font-size:17px;color:var(--color-gray)}.grid-creator-locked-label{font-size:16px;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:17px;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;flex-direction:column;align-items:flex-end;gap:10px}#copied-message{font-size:14px;color:var(--color-teal);text-align:center}button{background:var(--color-button);color:var(--color-text);border:none;padding:10px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:14px;transition:background .2s}#controls button{width:100%}button:hover{background:var(--color-red)}button.confirm{background:var(--color-red);color:var(--color-white)}button:disabled{cursor:not-allowed}html.view-mobile,html.view-mobile body{overflow:visible;height:auto}html.view-mobile #app{height:auto;min-height:100vh;padding:6px 6px 72px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"status status  status status" "canvas canvas  canvas canvas" ".      .       .      ." "title  title   vortex games" "score  score   vortex games" "star   restore vortex games" ".      .       .      .";grid-template-rows:auto auto 1fr auto auto auto 1fr;row-gap:10px;column-gap:10px}html.view-mobile #main-row,html.view-mobile #sidebar-left,html.view-mobile #sidebar-right,html.view-mobile #center-column{display:contents}html.view-mobile #header{grid-area:status}html.view-mobile #game-container{grid-area:canvas}html.view-mobile #game-info{display:contents}html.view-mobile #game-title{grid-area:title}html.view-mobile #score-breakdown,html.view-mobile #tutorial-hint{grid-area:score}html.view-mobile #scoring-rules-btn{grid-area:star}html.view-mobile #restore-buttons{grid-area:restore}html.view-mobile #vortex-buttons{grid-area:vortex}html.view-mobile #game-selector{grid-area:games}html.view-mobile #game-hover-info,html.view-mobile #copied-message{display:none}html.view-mobile #header{justify-content:center;align-items:center;height:auto;min-height:2.6em;margin-bottom:0}html.view-mobile #status{white-space:normal;text-align:center}html.view-mobile #game-container{padding:0;justify-content:center;align-items:flex-start}html.view-mobile #game-canvas{box-shadow:0 0 0 6px var(--color-panel)}html.view-mobile #game-canvas.shadow-gray{box-shadow:0 0 0 6px var(--color-gray)}html.view-mobile #game-canvas.shadow-teal{box-shadow:0 0 0 6px var(--color-teal)}html.view-mobile #game-canvas.shadow-amber{box-shadow:0 0 0 6px var(--color-amber)}html.view-mobile #game-canvas.shadow-purple{box-shadow:0 0 0 6px var(--color-purple)}html.view-mobile #game-title{font-size:26px;line-height:1.1;align-self:end}html.view-mobile #score-breakdown{font-size:15px;line-height:1.4;white-space:pre-line;min-height:4.2em}html.view-mobile #scoring-rules-btn{width:52px;height:52px;align-self:end}html.view-mobile #scoring-rules-btn .icon-btn-glyph svg{width:30px;height:30px}html.view-mobile #restore-buttons{grid-column:2;grid-row:5 / 7;flex-direction:column-reverse;align-self:end;gap:6px;margin:0;padding:0}html.view-mobile #restore-buttons button{width:100%}html.view-mobile #vortex-buttons{display:flex;flex-direction:column;align-items:flex-end;gap:6px;align-self:center;margin-top:0}html.view-mobile #vortex-buttons .icon-btn{width:82px;height:82px;padding:0}html.view-mobile #vortex-buttons .icon-btn-glyph svg{width:40px;height:40px}html.view-mobile #game-selector{display:grid;grid-template-columns:repeat(3,38px);grid-auto-rows:38px;gap:6px;justify-content:end;align-self:center;padding:0}html.view-mobile .game-btn-wrapper{width:38px;height:38px;gap:0;overflow:visible}html.view-mobile .game-btn{width:38px;height:38px;font-size:17px}html.view-mobile .game-btn:hover{width:38px}html.view-mobile .game-btn-name,html.view-mobile .game-score{display:none}html.view-mobile .icon-btn:hover .icon-btn-glyph{max-width:60px;opacity:1}html.view-mobile .icon-btn:hover .icon-btn-label{max-width:0;opacity:0}html.view-mobile #controls .icon-btn:hover{width:48px}html.view-mobile #vortex-buttons .icon-btn:hover:not(:disabled){width:82px}html.view-mobile #scoring-rules-btn:hover:not(:disabled){width:52px}html.view-mobile #controls{position:fixed;left:0;right:0;bottom:0;z-index:50;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:8px 6px;background:var(--color-background);border-top:1px solid var(--color-border)}html.view-mobile #controls .icon-btn{width:48px;height:48px}html.view-mobile #controls .icon-btn-glyph svg{width:26px;height:26px}html.view-mobile #controls .icon-btn-label{display:none}html.view-mobile #grid-selector:not(.hidden),html.view-mobile #admin-panel:not(.hidden),html.view-mobile #welcome-panel:not(.hidden),html.view-mobile #settings-panel:not(.hidden),html.view-mobile #leaderboard-panel:not(.hidden){position:fixed;inset:0 0 72px;z-index:40;border-radius:0}html.view-mobile .tutorial-hub-list,html.view-mobile .grid-creator-list{grid-template-columns:1fr 1fr}html.view-compact #main-row{--status-line-height: 26px;--status-line-gap: 8px;--grid-padding: 4px}html.view-compact #sidebar-right{gap:8px;flex-basis:144px}html.view-compact #game-title{font-size:20px}html.view-compact #vortex-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:144px;margin-top:2px}html.view-compact #vortex-buttons .icon-btn{width:auto;height:auto;aspect-ratio:1}html.view-compact #vortex-buttons .icon-btn-glyph svg{width:30px;height:30px}html.view-compact #scoring-rules-btn{width:67px;height:auto;aspect-ratio:1}html.view-compact #scoring-rules-btn .icon-btn-glyph svg{width:30px;height:30px}html.view-compact #scoring-rules-btn:hover:not(:disabled){width:67px}html.view-compact #vortex-buttons .icon-btn:hover:not(:disabled){width:auto}html.view-compact #scoring-rules-btn:hover .icon-btn-glyph,html.view-compact #vortex-buttons .icon-btn:hover .icon-btn-glyph{max-width:60px;opacity:1}html.view-compact #scoring-rules-btn:hover .icon-btn-label,html.view-compact #vortex-buttons .icon-btn:hover .icon-btn-label{max-width:0;opacity:0}html.view-compact #sidebar-left{gap:10px;flex-basis:120px}html.view-compact #controls{gap:8px}html.view-compact #controls .icon-btn{width:56px;height:56px}html.view-compact #controls .icon-btn:hover,html.view-compact #controls .icon-btn.confirm{width:100%}html.view-compact #controls .icon-btn-glyph svg{width:30px;height:30px}html.view-compact #controls .icon-btn-label{font-size:15px}html.view-compact #game-selector{display:grid;grid-template-columns:repeat(3,44px);grid-auto-rows:44px;justify-content:start;gap:6px}html.view-compact .game-btn-wrapper{gap:0;overflow:visible;width:44px;height:44px}html.view-compact .game-btn{width:44px;height:44px;font-size:18px}html.view-compact .game-btn:hover{width:44px}html.view-compact .game-btn:hover .game-btn-name{max-width:0;opacity:0}html.view-compact .game-score{display:none}html.view-compact #game-hover-info{display:block;text-align:left;padding:8px 0 0;min-height:1.4em;font-weight:700}html.view-compact #game-canvas{box-shadow:0 0 0 10px var(--color-panel)}html.view-compact #game-canvas.shadow-teal{box-shadow:0 0 0 10px var(--color-teal)}html.view-compact #game-canvas.shadow-amber{box-shadow:0 0 0 10px var(--color-amber)}html.view-compact #game-canvas.shadow-gray{box-shadow:0 0 0 10px var(--color-gray)}html.view-compact #game-canvas.shadow-purple{box-shadow:0 0 0 10px var(--color-purple)}