html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}#app{width:100vw;height:100vh;background-color:#000}#app canvas{display:block;width:100%;height:100%}#crosshair{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:clamp(20px,3.5vmin,48px);font-weight:700;pointer-events:none;z-index:1000;text-shadow:0 0 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}#hotbar{position:fixed;bottom:clamp(10px,2.5vmin,30px);left:50%;transform:translate(-50%);display:flex;flex-direction:row;justify-content:center;align-items:center;gap:clamp(4px,.8vmin,10px);padding:clamp(6px,1vmin,14px) clamp(8px,1.5vmin,20px);background-color:#00000080;border-radius:8px;z-index:2000;pointer-events:auto;max-width:90vw;flex-shrink:1;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 16px #0006;counter-reset:hotbar-slot;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.hotbar-slot{width:clamp(28px,6vmin,64px);height:clamp(28px,6vmin,64px);flex:0 1 auto;min-width:0;border:2px solid rgba(255,255,255,.3);background-color:#0000004d;border-radius:4px;cursor:pointer;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease,filter .15s ease;image-rendering:pixelated;image-rendering:crisp-edges;position:relative;counter-increment:hotbar-slot;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.hotbar-slot:before{content:counter(hotbar-slot);position:absolute;top:2px;left:4px;font-size:clamp(8px,1.4vmin,16px);font-weight:700;color:#ffffffb3;text-shadow:0 0 2px rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.6);pointer-events:none;z-index:2;line-height:1}.hotbar-slot:hover{filter:brightness(1.2);border-color:#fff9}.hotbar-slot.selected{border:2px solid #ffffff;box-shadow:0 0 8px #ffffff80,0 0 16px #fff3;transform:scale(1.1);z-index:3;filter:brightness(1.1)}@media(max-width:600px){#hotbar{bottom:clamp(8px,2vmin,20px);gap:clamp(3px,.6vmin,8px);padding:clamp(5px,.8vmin,10px) clamp(6px,1.2vmin,14px)}.hotbar-slot{width:clamp(24px,5vmin,48px);height:clamp(24px,5vmin,48px);border-width:1.5px}.hotbar-slot:before{font-size:clamp(7px,1.2vmin,12px);top:1px;left:3px}}@media(max-width:400px){.hotbar-slot{width:clamp(20px,4vmin,36px);height:clamp(20px,4vmin,36px)}.hotbar-slot:before{font-size:clamp(6px,1vmin,10px)}}.hidden{display:none!important;pointer-events:none!important}.menu-screen{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(to bottom,#0009,#0000004d);z-index:3000;overflow:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:auto}.menu-screen.hidden{display:none!important;pointer-events:none}.menu-screen .menu-title{font-family:Courier New,monospace;font-weight:700;font-size:48px;color:#fff;text-align:center;letter-spacing:2px;margin:0 0 40px;text-shadow:0 0 10px rgba(255,255,255,.5),0 0 20px rgba(255,255,255,.3),0 2px 4px rgba(0,0,0,.5)}.menu-screen .menu-buttons{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%;max-width:300px}.menu-screen .menu-buttons .menu-button{margin:0}.menu-screen .menu-button{min-width:220px;width:100%;padding:14px 32px;font-size:18px;font-family:inherit;font-weight:500;letter-spacing:1px;color:#fff;background-color:#0009;border:2px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease,filter .15s ease}.menu-screen .menu-button:hover{filter:brightness(1.2);border-color:#fffc;background-color:#ffffff26;box-shadow:0 0 12px #ffffff4d}.menu-screen .menu-button:active{transform:scale(.95);background-color:#fff3}.menu-screen .menu-button:focus{outline:none;border-color:#4a9eff}.menu-screen .back-button{margin-top:20px;margin-bottom:40px}.pause-menu{background:#000000b3}.pause-menu .menu-title{font-size:36px}.controls-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000b3}.controls-screen .menu-title{font-size:36px;color:#fff;text-align:center;margin:0 0 30px}.controls-table{border-collapse:collapse;min-width:400px;margin-bottom:40px;background:#0006;border-radius:8px;overflow:hidden;font-family:inherit}.controls-table th{padding:12px 20px;background:#ffffff26;color:#fff;font-weight:700;border-bottom:2px solid rgba(255,255,255,.3);font-size:16px}.controls-table td{padding:10px 20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:16px}.controls-table tr:last-child td{border-bottom:none}.controls-table tbody tr:nth-child(2n){background:#ffffff0d}.controls-table tbody tr:nth-child(odd){background:#ffffff1a}.controls-table th.controls-key,.controls-table td.controls-key{text-align:center;width:120px;color:gold;font-weight:700}.controls-table th.controls-desc,.controls-table td.controls-desc{text-align:left;width:auto;color:#e0e0e0}.controls-screen .back-button{margin-top:20px}.about-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000b3}.about-screen .menu-title{font-size:36px;color:#fff;text-align:center;margin:0 0 30px}.about-panel{min-width:400px;padding:24px 32px;background:#0006;border:1px solid rgba(255,255,255,.2);border-radius:12px;margin-bottom:40px;font-family:inherit}.about-panel .about-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}.about-panel .about-item:last-child{border-bottom:none}.about-panel .about-label{flex-shrink:0;margin-right:20px;color:#999;font-size:14px}.about-panel .about-value{flex:1;text-align:right;color:#fff;font-size:14px}.about-screen .back-button{margin-top:20px}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000b3;z-index:3000;overflow:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:auto}.loading-screen.hidden{display:none!important;pointer-events:none}.loading-screen .loading-title{font-family:Courier New,monospace;font-weight:700;font-size:32px;color:#fff;text-align:center;margin:0 0 30px;text-shadow:0 0 10px rgba(255,255,255,.5),0 0 20px rgba(255,255,255,.3)}.loading-screen .loading-bar-container{position:relative;width:400px;height:24px;background:#ffffff1a;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 2px 4px #0000004d;margin-bottom:0}.loading-screen .loading-bar-fill{position:relative;z-index:1;height:100%;background:linear-gradient(90deg,#4a9eff,#7ac0ff);border-radius:12px;transition:width .2s ease;box-shadow:0 0 8px #4a9eff80}.loading-screen .loading-percentage{position:relative;z-index:2;color:#fff;font-size:16px;margin-top:12px;font-family:Courier New,monospace}@media(max-width:600px){.menu-screen .menu-title{font-size:32px}.pause-menu .menu-title,.controls-screen .menu-title,.about-screen .menu-title{font-size:28px}.loading-screen .loading-title{font-size:24px}.menu-screen .menu-button{min-width:180px;padding:12px 24px;font-size:16px}.controls-table{min-width:280px}.controls-table th,.controls-table td{padding:8px 12px;font-size:14px}.about-panel{min-width:280px;padding:16px 20px}.about-panel .about-label,.about-panel .about-value{font-size:12px}.loading-screen .loading-bar-container{width:280px;height:20px}.loading-screen .loading-percentage{font-size:14px}.menu-screen .menu-title{margin:0 0 24px}.loading-screen .loading-title,.controls-screen .menu-title,.about-screen .menu-title{margin:0 0 20px}.menu-screen .back-button{margin-bottom:24px}}@media(max-width:400px){.menu-screen .menu-title{font-size:26px}.pause-menu .menu-title,.controls-screen .menu-title,.about-screen .menu-title{font-size:22px}.loading-screen .loading-title{font-size:20px}.menu-screen .menu-button{min-width:150px;padding:10px 20px;font-size:14px}.controls-table,.about-panel{min-width:240px}.loading-screen .loading-bar-container{width:220px}}