@import"https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--color-background: #2a2a2a;--color-surface: #3a3a3a;--color-surface-hover: #4a4a4a;--color-border: #5a5a5a;--color-text: #ffffff;--color-text-muted: #cccccc;--color-text-dim: #999999;--color-accent: #4a9eff;--color-accent-disabled: #666666;--grid-size: 25px;--font-family-primary: "Bitcount Grid Single", system-ui;--font-weight-normal: 400;--font-weight-bold: 700;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 20px;--spacing-xl: 24px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--transition-fast: .15s ease-out;--transition-medium: .2s ease-in-out;--transition-slow: .4s ease-in-out;--shadow-subtle: 0 2px 4px rgba(0, 0, 0, .2);--shadow-medium: 0 4px 16px rgba(0, 0, 0, .16);--z-background: 0;--z-content: 1;--z-header: 1000;--z-modal: 2000}html,body{margin:0;padding:0;width:100%;height:100%;font-family:var(--font-family-primary);font-optical-sizing:auto;font-weight:var(--font-weight-normal);font-style:normal;font-variation-settings:"slnt" 0,"CRSV" .5,"ELSH" 0,"ELXP" 0;background:var(--color-background);color:var(--color-text);overflow:hidden;color-scheme:dark;-webkit-color-scheme:dark}#root{width:100vw;height:100vh;margin:0;padding:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-select{-webkit-user-select:none;user-select:none}.pointer{cursor:pointer}.no-pointer-events{pointer-events:none}@keyframes fadeIn{0%{background:#0000}to{background:#000000b3}}@keyframes fadeOut{0%{background:#000000b3}to{background:#0000}}@keyframes sketchIn{0%{stroke-dashoffset:1800}to{stroke-dashoffset:0}}@keyframes sketchInInner{0%{stroke-dashoffset:1700}to{stroke-dashoffset:0}}@keyframes sketchOut{0%{stroke-dashoffset:0}to{stroke-dashoffset:1800}}@keyframes sketchOutInner{0%{stroke-dashoffset:0}to{stroke-dashoffset:1700}}@keyframes modalFadeIn{0%{background-color:transparent}to{background-color:var(--color-surface)}}@keyframes modalFadeOut{0%{background-color:var(--color-surface)}to{background-color:transparent}}@keyframes modalContentFadeIn{0%{opacity:0;top:-20px}to{opacity:1;top:0}}@keyframes modalContentFadeOut{0%{opacity:1;top:0}to{opacity:0;top:-20px}}@keyframes quickScaleDown{0%{transform:scale(1)}99.9%{transform:scale(1)}to{transform:scale(0)}}@keyframes buttonPress{0%{transform:translate(0);box-shadow:0 .4em .1em .019em #fff}to{transform:translateY(.4em);box-shadow:0 0 #fff}}@keyframes buttonRelease{0%{transform:translateY(.4em);box-shadow:0 0 #fff}to{transform:translate(0);box-shadow:0 .4em .1em .019em #fff}}@keyframes cellGlow{0%{box-shadow:0 0 20px 10px #fff9,0 0 40px 10px #ffffff4d}50%{box-shadow:0 0 30px 15px #fffc,0 0 60px 15px #ffffff80}to{box-shadow:0 0 20px 10px #fff9,0 0 40px 10px #ffffff4d}}@keyframes cellRotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-90deg)}}@keyframes fadeInOut{0%{opacity:0}50%{opacity:1}to{opacity:0}}.app-container{margin:0;width:100%;height:100%;position:relative;background:var(--color-background);background-image:linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);display:flex;flex-direction:column}.game-header{text-align:center;padding:var(--spacing-lg);z-index:var(--z-header)}.game-title{font-size:36px;font-weight:var(--font-weight-bold);color:var(--color-text)!important;margin-bottom:10px;font-variation-settings:"slnt" 0,"CRSV" .5,"ELSH" 0,"ELXP" 0}.level-display{font-size:18px;font-weight:var(--font-weight-normal);color:var(--color-text)!important;margin-bottom:5px}.game-status{font-size:14px;color:var(--color-text-dim);margin-top:5px}.game-board{flex:1;position:relative;display:flex;align-items:center;justify-content:center}.nav-controls{bottom:var(--spacing-lg);left:50%;transform:translate(-50%);position:absolute;display:flex;justify-content:center;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-lg)}.button{padding:.1em .25em;width:13em;height:4.2em;color:var(--color-text);background-color:#212121;border:.08em solid var(--color-text);border-radius:.3em;font-size:12px;cursor:pointer;font-family:var(--font-family-primary);transition:opacity var(--transition-medium)}.button.square{width:6.56875em}.button span{position:relative;display:flex;justify-content:center;align-items:center;bottom:.4em;width:8.25em;height:2.5em;background-color:#2d2d2d;border-radius:.2em;font-size:1.5em;color:var(--color-text);border:.08em solid var(--color-text);box-shadow:0 .4em .1em .019em var(--color-text);transition:all var(--transition-slow)}.button.square span{text-shadow:0 0 0 white;color:transparent;width:4em}.button span:hover{transition:all .5s;transform:translateY(.4em);box-shadow:0 0 0 0 var(--color-text)}.button span:not(:hover){transition:all 1s}.button--disabled{cursor:not-allowed;opacity:.5}.button--disabled span{cursor:not-allowed;transform:translateY(.4em);box-shadow:0 0 0 0 var(--color-text)}.button--disabled span:hover{transform:translateY(.4em);box-shadow:0 0 0 0 var(--color-text)}.button--active{opacity:1}.icon{width:24px;height:24px}.drop-shadow-subtle{filter:var(--shadow-subtle)}.modal-overlay{position:fixed;display:table;height:100%;width:100%;top:0;left:0;transform:scale(0);z-index:var(--z-modal)}.modal-overlay.show{transform:scale(1)}.modal-overlay.show .modal-background{background:#0000;animation:fadeIn .5s cubic-bezier(.165,.84,.44,1) forwards}.modal-overlay.show .modal-content{background-color:transparent;animation:modalFadeIn .5s .8s cubic-bezier(.165,.84,.44,1) forwards}.modal-overlay.show .modal-content .modal-header,.modal-overlay.show .modal-content .modal-body,.modal-overlay.show .modal-content .modal-content-wrapper{opacity:0;position:relative;animation:modalContentFadeIn .5s 1s cubic-bezier(.165,.84,.44,1) forwards}.modal-overlay.show .modal-content .modal-svg .outer-border,.modal-overlay.show .modal-content .modal-svg .inner-border{animation:sketchIn .5s .3s cubic-bezier(.165,.84,.44,1) forwards}.modal-overlay.show.out{animation:quickScaleDown 0s 1s linear forwards}.modal-overlay.show.out .modal-background{animation:fadeOut 1s cubic-bezier(.165,.84,.44,1) forwards}.modal-overlay.show.out .modal-content{animation:modalFadeOut .5s cubic-bezier(.165,.84,.44,1) forwards}.modal-overlay.show.out .modal-content .modal-header,.modal-overlay.show.out .modal-content .modal-body,.modal-overlay.show.out .modal-content .modal-content-wrapper{animation:modalContentFadeOut .5s cubic-bezier(.165,.84,.44,1) forwards}.modal-overlay.show.out .modal-content .modal-svg .outer-border,.modal-overlay.show.out .modal-content .modal-svg .inner-border{animation:sketchOut .5s cubic-bezier(.165,.84,.44,1) forwards}.modal-background{display:table-cell;background:#000000b3;text-align:center;vertical-align:middle}.modal-content{background:var(--color-surface);border:2px solid transparent;border-radius:var(--radius-lg);padding:var(--spacing-xl);width:400px;height:450px;color:var(--color-text);display:inline-block;position:relative;overflow:hidden}.modal-content-wrapper{display:flex;flex-direction:column;height:100%;overflow:hidden}.modal-body{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}.modal-svg{position:absolute;top:0;left:0;height:100%;width:100%;pointer-events:none;z-index:10}.modal-svg .outer-border{stroke:var(--color-text);stroke-width:2px;stroke-dasharray:1800 1800;stroke-dashoffset:1800;fill:none}.modal-svg .inner-border{stroke:var(--color-text);stroke-width:1px;stroke-dasharray:1800 1800;stroke-dashoffset:1800;fill:none}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.modal-header h2{margin:0;font-size:24px;color:var(--color-text)}.close-button{background:none;border:none;font-size:24px;color:var(--color-text-muted);cursor:pointer;padding:var(--spacing-xs);line-height:1;transition:color var(--transition-medium)}.close-button:hover{color:var(--color-text)}.divider{height:1px;background:var(--color-border);margin-bottom:10px}.scores-header{display:grid;grid-template-columns:40px 1fr 1fr 80px;gap:var(--spacing-md);padding:var(--spacing-sm) 12px;margin-bottom:0;align-items:center}.rank-header{font-weight:var(--font-weight-bold);font-size:14px;color:var(--color-text-muted);text-align:center}.score-columns{display:contents}.date-header{font-weight:var(--font-weight-bold);font-size:14px;color:var(--color-text-muted);text-align:right}.sort-btn{padding:var(--spacing-xs) var(--spacing-sm);background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;font-size:14px;font-weight:var(--font-weight-bold);transition:all var(--transition-medium);border-radius:var(--radius-sm);border:1px solid transparent}.sort-btn:hover{background:var(--color-surface-hover);color:var(--color-text)}.sort-btn.active{background:var(--color-text);color:var(--color-surface)}.scores-list{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}.no-scores{text-align:center;color:var(--color-text-muted);font-style:italic;padding:40px var(--spacing-lg)}.score-item{display:grid;grid-template-columns:40px 1fr 1fr 80px;gap:var(--spacing-md);align-items:center;padding:12px;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md)}.score-item.placeholder{opacity:.4;background:var(--color-surface)}.rank{font-weight:var(--font-weight-bold);font-size:18px;color:var(--color-accent);min-width:30px}.score-details{display:contents}.moves,.time{font-size:14px}.time{font-family:monospace;color:var(--color-text-muted)}.date{font-size:12px;color:var(--color-text-dim);text-align:right}.info-content{display:flex;flex-direction:column;gap:var(--spacing-lg);flex:1;overflow-y:auto}.info-section h3{margin:0 0 var(--spacing-sm) 0;font-size:18px;color:var(--color-text);font-weight:var(--font-weight-bold)}.info-section p{margin:0 0 var(--spacing-sm) 0;font-size:14px;color:var(--color-text-muted);line-height:1.5}.info-section ul{margin:var(--spacing-sm) 0 0 0;padding-left:var(--spacing-lg);color:var(--color-text-muted);font-size:14px;line-height:1.5}.info-section li{margin-bottom:var(--spacing-xs)}.info-section strong{color:var(--color-text)}.pattern-demo{display:flex;justify-content:center;margin:var(--spacing-md) 0}.pattern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xs);width:120px;height:120px}.pattern-cell{border:2px solid var(--color-text);border-radius:var(--radius-sm);background:transparent}.pattern-cell.affected{background:var(--color-text)}.pattern-cell.clicked{background:var(--color-accent);border-color:var(--color-accent)}@media (max-width: 768px){body,#root,.app-container{min-height:100vh;min-height:-webkit-fill-available}.nav-controls{bottom:max(20px,env(safe-area-inset-bottom,20px));position:fixed;z-index:1000}.game-board{padding-bottom:120px}.nav-controls .button{width:6.56875em}.nav-controls .button span{width:4em}.modal-content,.leaderboard-modal,.modal-content.leaderboard-modal{width:300px!important;height:400px!important;margin:var(--spacing-lg)}.scores-header{grid-template-columns:30px 1fr 1fr 60px;gap:12px;padding:6px 8px}.score-item{grid-template-columns:30px 1fr 1fr 60px;gap:12px;padding:var(--spacing-sm)}.info-content{gap:var(--spacing-md);max-height:300px}.info-section h3{font-size:16px}.info-section p,.info-section ul{font-size:13px}}@media (min-width: 769px) and (max-width: 1024px){.modal-content,.leaderboard-modal,.modal-content.leaderboard-modal{width:350px!important;height:425px!important}}@media (min-width: 1025px){.modal-content,.leaderboard-modal,.modal-content.leaderboard-modal{width:400px!important;height:450px!important}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.glass-effect{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (any-hover: none){.button:focus,.sort-btn:focus,.close-button:focus{outline:2px solid var(--color-accent);outline-offset:2px}}.leaderboard-overlay{position:fixed;display:table;height:100%;width:100%;top:0;left:0;transform:scale(0);z-index:var(--z-modal)}.leaderboard-background{display:table-cell;background:#000000b3;text-align:center;vertical-align:middle}.leaderboard-modal{background:var(--color-surface);border:2px solid transparent;border-radius:var(--radius-lg);padding:var(--spacing-xl);width:400px;height:450px;color:var(--color-text);display:inline-block;position:relative;overflow:hidden}