:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%}body{font-family:sans-serif;background:#111;color:#eee}#app{display:flex;overflow:hidden}#ui-panel{width:250px;padding:16px;background:#222;border-right:2px solid #444;display:flex;flex-direction:column;gap:12px}#ui-panel h2{font-size:1.2rem}#ui-panel .info{margin-top:auto;font-size:1.1rem;display:flex;justify-content:space-between}#game-panel{flex:1;position:relative;background:#000}#game-panel canvas{width:100%!important;height:100%!important;display:block}.glitch{color:#fff;font-size:clamp(2rem,10vw,8rem);font-weight:900;position:relative;-webkit-user-select:none;user-select:none;cursor:default}.glitch:before,.glitch:after{content:attr(data-text);position:absolute;top:0;left:0;color:#fff;background-color:#060010;overflow:hidden;clip-path:inset(0 0 0 0)}.glitch:after{left:10px;text-shadow:-5px 0 red;animation:animate-glitch 3s infinite linear alternate-reverse}.glitch:before{left:-10px;text-shadow:5px 0 cyan;animation:animate-glitch 2s infinite linear alternate-reverse}@keyframes animate-glitch{0%{clip-path:inset(20% 0 50% 0)}5%{clip-path:inset(10% 0 60% 0)}10%{clip-path:inset(15% 0 55% 0)}15%{clip-path:inset(25% 0 35% 0)}20%{clip-path:inset(30% 0 40% 0)}25%{clip-path:inset(40% 0 20% 0)}30%{clip-path:inset(10% 0 60% 0)}35%{clip-path:inset(15% 0 55% 0)}40%{clip-path:inset(25% 0 35% 0)}45%{clip-path:inset(30% 0 40% 0)}50%{clip-path:inset(20% 0 50% 0)}55%{clip-path:inset(10% 0 60% 0)}60%{clip-path:inset(15% 0 55% 0)}65%{clip-path:inset(25% 0 35% 0)}70%{clip-path:inset(30% 0 40% 0)}75%{clip-path:inset(40% 0 20% 0)}80%{clip-path:inset(20% 0 50% 0)}85%{clip-path:inset(10% 0 60% 0)}90%{clip-path:inset(15% 0 55% 0)}95%{clip-path:inset(25% 0 35% 0)}to{clip-path:inset(30% 0 40% 0)}}