@layer reset,base,components,utilities;:root{--color-white: #ffffff;--color-white-dim: rgba(255, 255, 255, .6);--color-white-faint: rgba(255, 255, 255, .5);--color-transparent: transparent;--color-shadow: rgba(0, 0, 0, .5);--color-glow: rgba(255, 255, 255, .8);--font-display: "MajorMonoDisplay-Regular", monospace;--font-body: "RobotoMono-Light", sans-serif;--size-icon: 1em;--size-nav-arrow: clamp(24px, 6vw, 48px);--size-play-btn: clamp(32px, 6vw, 56px);--size-menu-item: clamp(18px, 4vw, 24px);--size-credits: clamp(12px, 2vw, 20px);--size-warning: clamp(16px, 5vw, 28px);--gap-menu: 8px;--gap-state: 30px;--z-canvas: 1;--z-ui: 10;--z-overlay: 9999;--transition-base: all .3s ease;--transition-opacity: opacity .3s ease}@font-face{font-family:MajorMonoDisplay-Regular;src:url(fonts/MajorMonoDisplay-Regular.woff2) format("woff2"),url(fonts/MajorMonoDisplay-Regular.woff) format("woff"),url(fonts/RobotoMono-Light.woff) format("woff");font-display:swap;font-style:normal;font-weight:400}@layer reset{html,body{height:100%;margin:0;padding:0;width:100%;overflow:hidden}}@layer base{body{font-family:var(--font-body)}canvas{display:block;height:100vh;left:0;position:absolute;top:0;width:100vw;z-index:var(--z-canvas)}body:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:80px;background:linear-gradient(to top,rgba(0,0,0,.4),transparent);z-index:5;pointer-events:none}}@layer components{#pause-menu{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:100;background:#fff0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:opacity .3s ease;opacity:0;pointer-events:none}#pause-menu.visible{opacity:1;pointer-events:auto}#pause-menu h2{color:var(--color-white);margin:0 0 20px;font-size:32px;letter-spacing:4px;text-shadow:0 2px 4px var(--color-shadow);font-weight:400;position:relative;display:flex;align-items:center;justify-content:center}#pause-menu h2:before,#pause-menu h2:after{content:"-";position:absolute;top:50%;transform:translateY(-50%);opacity:1;color:var(--color-white);font-size:32px;line-height:1}#pause-menu h2:before{left:-20px}#pause-menu h2:after{right:-20px}.menu-item-pause{font-size:var(--size-menu-item);letter-spacing:1px;padding:5px 15px;width:100%;background:var(--color-transparent);border:none;cursor:pointer;position:relative;transition:var(--transition-base);font-family:inherit;outline:none;display:flex;align-items:center;justify-content:center;color:var(--color-white-dim);text-shadow:0 2px 4px var(--color-shadow)}.menu-item-pause:hover{opacity:1;color:var(--color-white)}.menu-item-pause:before,.menu-item-pause:after{content:"-";position:absolute;top:50%;transform:translateY(-50%);opacity:0;color:var(--color-white);font-size:32px;line-height:1}.menu-item-pause:before{left:0}.menu-item-pause:after{right:0}.menu-item-pause:hover:before{opacity:1;left:-20px}.menu-item-pause:hover:after{opacity:1;right:-20px}#main-menu{position:absolute;top:66%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:var(--gap-menu);z-index:var(--z-ui);transition:transform .4s cubic-bezier(.68,-.55,.27,1.55),opacity .4s ease-in}#main-menu.fade-out{opacity:0;pointer-events:none;transition:opacity 1s ease-out}#state-menu{position:absolute;bottom:80px;left:50%;transform:translate(-50%);display:flex;gap:var(--gap-state);z-index:var(--z-ui);opacity:0;pointer-events:none;transition:var(--transition-opacity)}.btn-base{background:var(--color-transparent);border:none;cursor:pointer;position:relative;transition:var(--transition-base);font-family:inherit;outline:none;display:flex;align-items:center;justify-content:center;color:var(--color-white-dim);text-shadow:0 2px 4px var(--color-shadow)}.btn-base:hover{opacity:1;color:var(--color-white)}#play-button{font-size:var(--size-play-btn);letter-spacing:2px;padding:5px 20px;opacity:.9;margin-bottom:5px;text-shadow:0 4px 8px var(--color-shadow);color:var(--color-white);background:var(--color-transparent);border:none;cursor:pointer;position:relative;transition:var(--transition-base);font-family:inherit;outline:none;display:flex;align-items:center;justify-content:center;width:100%}.menu-item{font-size:var(--size-menu-item);letter-spacing:1px;padding:5px 15px;width:100%;background:var(--color-transparent);border:none;cursor:pointer;position:relative;transition:var(--transition-base);font-family:inherit;outline:none;display:flex;align-items:center;justify-content:center;color:var(--color-white-dim);text-shadow:0 2px 4px var(--color-shadow)}.menu-item:hover,#play-button:hover{opacity:1;color:var(--color-white)}#play-button:before,#play-button:after,.menu-item:before,.menu-item:after{content:"-";position:absolute;top:50%;transform:translateY(-50%);opacity:0;color:var(--color-white);font-size:32px;line-height:1}#play-button:before,.menu-item:before{left:0}#play-button:after,.menu-item:after{right:0}#play-button:hover:before,.menu-item:hover:before{opacity:1;left:-20px}#play-button:hover:after,.menu-item:hover:after{opacity:1;right:-20px}.nav-arrow{background:var(--color-transparent);border:none;color:var(--color-white);font-size:var(--size-nav-arrow);position:absolute;top:50%;transform:translateY(-50%);cursor:pointer;z-index:var(--z-ui);opacity:0;pointer-events:none;transition:var(--transition-opacity);padding:20px;display:flex;align-items:center;justify-content:center;text-shadow:0 4px 8px var(--color-shadow)}.nav-arrow:hover{opacity:1;transform:translateY(-50%)}#nav-left{left:20px}#nav-right{right:20px}.state-btn{background:var(--color-transparent);border:none;color:var(--color-white-dim);cursor:pointer;font-family:inherit;font-size:20px;transition:var(--transition-base);display:flex;align-items:center;justify-content:center;position:relative;padding:5px;text-shadow:0 2px 4px var(--color-shadow)}.state-btn:hover,.state-btn.active{color:var(--color-white)}#credits,#ui-toggle{bottom:20px;color:var(--color-white);font-size:var(--size-credits);opacity:.7;position:absolute;-webkit-user-select:none;user-select:none;z-index:101}#credits{left:10px}#ui-toggle{right:20px;cursor:pointer}#credits:hover,#ui-toggle:hover{opacity:1}#credits a{color:inherit;text-decoration:none}#credits img,.nav-item svg,.icon{height:1em;width:1em;vertical-align:middle}#credits img{display:none;filter:brightness(0) invert(1);margin-left:0}#credits:hover img{display:inline}.nav-item svg,.icon{fill:currentColor}.nav-item svg{stroke:none}#rotate-warning{align-items:center;background:var(--color-transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-sizing:border-box;color:var(--color-white);display:flex;font-size:var(--size-warning);height:100%;justify-content:center;left:0;opacity:0;padding:20px;pointer-events:none;position:relative;text-align:center;top:0;transition:var(--transition-opacity);width:100%;z-index:var(--z-overlay)}#rotate-warning.visible{opacity:1;pointer-events:auto}#score-display{position:absolute;bottom:20px;left:50%;transform:translate(-50%);color:var(--color-white);font-size:var(--size-menu-item);text-shadow:0 2px 4px var(--color-shadow);z-index:102;pointer-events:none;transition:opacity 1s ease;opacity:0;font-family:var(--font-display)}#score-display.visible{opacity:1}}@layer utilities{.hidden{display:none!important}.visible-controls{opacity:1!important;pointer-events:auto!important}.nav-arrow.visible-controls{opacity:.5!important}.nav-arrow.visible-controls:hover{opacity:1!important}}@keyframes glowing{0%{box-shadow:0 0 5px var(--color-white-faint)}50%{box-shadow:0 0 20px var(--color-glow)}to{box-shadow:0 0 5px var(--color-white-faint)}}