@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:#1a1a2e;width:100%;height:100%;font-family:Courier New,monospace;overflow:hidden}body{font-family:Courier New,monospace}.canvas-container canvas{display:block}.app-container{width:100vw;height:100vh;image-rendering:pixelated;image-rendering:crisp-edges;background:linear-gradient(#1a1a2e 0%,#0f0f1a 100%);flex-direction:column;display:flex;overflow:hidden}.header{text-align:center;z-index:10;background:#1a1a2ef2;border-bottom:3px solid #00d4ff;padding:10px 16px;position:relative}.header h1{color:#00d4ff;letter-spacing:3px;text-shadow:0 0 8px #00d4ff99;margin:0;font-family:"Press Start 2P",Courier New,monospace;font-size:.85rem;font-weight:700}.header .subtitle{color:#7f8c8d;margin-top:6px;font-family:"Press Start 2P",monospace;font-size:.5rem}.canvas-container{flex:1;position:relative}.canvas-container canvas{image-rendering:pixelated!important;image-rendering:crisp-edges!important}.status-bar{color:#7f8c8d;background:#1a1a2ef2;border-top:2px solid #34495e;justify-content:space-between;align-items:center;padding:8px 16px;font-family:"Press Start 2P",monospace;font-size:.5rem;display:flex;position:absolute;bottom:0;left:0;right:0}.status-bar .online{color:#0f8}.status-bar .time{color:#f39c12}.loading{color:#00d4ff;text-align:center;font-family:"Press Start 2P",monospace;font-size:.7rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading .dots:after{content:"";animation:1.5s steps(4,end) infinite dots}@keyframes dots{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}