:root{--font-display:"Silkscreen", "Courier New", monospace;--font-body:"VT323", "Courier New", monospace;--panel-bg:#16161ceb;--panel-border:#0a0a0c;--accent:#ffe24a;--grass:#7ec850}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-body);-webkit-user-select:none;user-select:none;background:#0b0e14;margin:0;overflow:hidden}.app{position:fixed;inset:0}.game-canvas{position:absolute;inset:0}.game-canvas canvas{display:block}.hud{pointer-events:none;position:absolute;inset:0}.vignette{background:radial-gradient(#0000 55%,#080a1052 100%);position:absolute;inset:0}.underwater-overlay{background:linear-gradient(#143c8c59,#0a246073);position:absolute;inset:0}.crosshair{mix-blend-mode:difference;width:20px;height:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.crosshair:before,.crosshair:after{content:"";background:#e6e6e6;position:absolute}.crosshair:before{width:2px;height:100%;top:0;left:50%;transform:translate(-50%)}.crosshair:after{width:100%;height:2px;top:50%;left:0;transform:translateY(-50%)}.screen-typing-hint{font-family:var(--font-display);color:#ffd166;text-shadow:1px 1px #000c;background:#0a0e14c7;border:1px solid #ffd1668c;border-radius:6px;padding:6px 14px;font-size:12px;position:absolute;top:14%;left:50%;transform:translate(-50%)}.screen-webview{background:#fff;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 0 24px #00000073}.screen-webview-bar{background:#10141c;align-items:center;gap:8px;padding:6px 8px;display:flex}.screen-webview-bar form{flex:1;display:flex}.screen-webview-bar input{color:#111;background:#fff;border:none;border-radius:999px;outline:none;flex:1;padding:5px 12px;font:13px/1.2 ui-monospace,Consolas,monospace}.screen-webview-bar button{white-space:nowrap;color:#e8f4ff;cursor:pointer;background:#2c5d8f;border:none;border-radius:6px;padding:6px 10px;font:600 12px/1 Segoe UI,system-ui,sans-serif}.screen-webview-bar button:hover{background:#3a76b3}.screen-webview iframe{background:#fff;border:0;flex:1;width:100%}.hotbar-area{flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.hotbar-label{font-family:var(--font-display);color:#fff;text-shadow:2px 2px #000c;font-size:13px;animation:1.6s forwards label-fade}@keyframes label-fade{0%,55%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}.hotbar{background:#0c0c108c;border:2px solid #000000d9;gap:4px;padding:4px;display:flex;box-shadow:inset 1px 1px #ffffff1f,0 4px 18px #00000059}.hotbar-slot{cursor:pointer;pointer-events:auto;background:#282830a6;border:2px solid #1c1c22;place-items:center;width:54px;height:54px;padding:0;transition:transform 80ms;display:grid;position:relative;box-shadow:inset 2px 2px #00000073,inset -2px -2px #ffffff12}.hotbar-slot img{width:44px;height:44px;image-rendering:pixelated}.hotbar-slot-key{font-family:var(--font-body);color:#ffffff8c;text-shadow:1px 1px #000;font-size:14px;position:absolute;top:1px;left:4px}.hotbar-slot--selected{background:#464654cc;border-color:#f5f5f5;transform:translateY(-4px)scale(1.06);box-shadow:inset 2px 2px #ffffff2e,0 0 0 2px #000c,0 6px 14px #00000073}.debug-overlay{border-left:3px solid var(--grass);font-family:var(--font-body);color:#e8f0e2;text-shadow:1px 1px #000000e6;white-space:pre;background:#08080c8c;padding:10px 14px;font-size:17px;line-height:1.35;position:absolute;top:12px;left:12px}.menu{pointer-events:auto;z-index:10;place-items:center;display:grid;position:absolute;inset:0;overflow-y:auto}.menu--title{cursor:pointer}.menu-dirt{image-rendering:pixelated;filter:brightness(.38)saturate(.9);background-size:72px 72px;position:fixed;inset:0}.menu-content{text-align:center;flex-direction:column;align-items:center;gap:22px;padding:48px 24px;display:flex;position:relative}.logo{font-family:var(--font-display);letter-spacing:.04em;color:#f4f4f4;text-shadow:.07em .07em #1a1a20;margin:0;font-size:clamp(44px,9vw,92px);font-weight:700;line-height:1}.logo span{color:var(--grass)}.splash{font-family:var(--font-display);color:var(--accent);text-shadow:2px 2px #3a3000;font-size:15px;animation:1.4s ease-in-out infinite splash-pulse}@keyframes splash-pulse{0%,to{transform:rotate(-4deg)scale(1)}50%{transform:rotate(-4deg)scale(1.08)}}.mc-button{font-family:var(--font-display);color:#fff;text-shadow:2px 2px #0000008c;cursor:pointer;pointer-events:auto;background:linear-gradient(#8e8e94,#6c6c72);border:2px solid #000;padding:13px 34px;font-size:15px;box-shadow:inset 2px 2px #fff6,inset -2px -3px #0006}.mc-button:hover{background:linear-gradient(#94aa72,#6e8a52)}.mc-button:active{box-shadow:inset -2px -2px #ffffff40,inset 2px 3px #0006}.mc-button--primary{background:linear-gradient(#79b657,#4f8a35);padding:15px 44px;font-size:17px}.mc-button--primary:hover{background:linear-gradient(#85c463,#58963c)}.controls-card{background:var(--panel-bg);border:2px solid var(--panel-border);min-width:340px;padding:18px 26px;box-shadow:inset 1px 1px #ffffff14,0 10px 30px #00000080}.controls-card h2{font-family:var(--font-display);color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;font-size:14px}.controls-card dl{grid-template-columns:1fr 1fr;gap:6px 28px;margin:0;display:grid}.controls-card dl>div{justify-content:space-between;align-items:baseline;gap:14px;display:flex}.controls-card dt,.controls-card dd{margin:0}.controls-card dd{color:#c8cdd6;font-size:18px}kbd{font-family:var(--font-body);color:#fff;background:#2c2c34;border:1px solid #000;padding:1px 7px;font-size:16px;box-shadow:inset 1px 1px #ffffff2e,inset -1px -1px #0009}.menu-footer{color:#ffffff8c;margin:0;font-size:17px}.menu--paused{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#080a0e8c}.pause-panel{background:var(--panel-bg);border:2px solid var(--panel-border);flex-direction:column;align-items:center;gap:14px;padding:34px 48px;display:flex;box-shadow:inset 1px 1px #ffffff14,0 16px 40px #0009}.pause-panel h2{font-family:var(--font-display);color:#f4f4f4;text-shadow:3px 3px #000;margin:0 0 6px;font-size:22px}.pause-hint{color:#ffffff73;text-align:center;max-width:320px;margin:4px 0 0;font-size:15px}