*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background-color:#040710}a{color:inherit}:root{font-family:Space Grotesk,Helvetica Neue,Arial,sans-serif;--ink: #0b0b0b;--yellow: #ffd60a;--offwhite: #fffdf6;background-color:var(--offwhite);color:var(--ink)}.app-root{position:relative;min-height:100vh;width:100%;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0,transparent 38px,#f1f1f1 38px,#f1f1f1 39px),repeating-linear-gradient(90deg,transparent 0,transparent 38px,#f1f1f1 38px,#f1f1f1 39px),var(--offwhite)}.status-pill{position:fixed;top:20px;right:20px;padding:.55rem 1.1rem;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:6px 6px 0 var(--ink);z-index:3}.join-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffd60a0d,#0b0b0b0a),var(--offwhite);z-index:2}.join-card{position:relative;width:min(360px,92vw);min-height:360px;background:#fff;border:4px solid var(--ink);border-radius:10px;padding:1.4rem;display:flex;flex-direction:column;gap:.9rem;z-index:1}.sign-panel{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem .9rem;border:3px solid var(--ink);background:#fffbea}.sign-panel.single{justify-content:center}.sign-label{font-size:.78rem;font-weight:800;letter-spacing:.08em;padding:.35rem .6rem;background:var(--ink);color:var(--yellow);text-transform:uppercase;border:2px solid var(--ink)}.sign-username{font-size:1.05rem;font-weight:800;color:var(--ink);letter-spacing:.02em}.sign-login{padding:.7rem .9rem;border:3px solid var(--ink);background:var(--ink);color:var(--yellow);font-weight:800;letter-spacing:.02em;cursor:pointer;box-shadow:5px 5px 0 var(--ink);transition:transform 80ms ease,box-shadow 80ms ease}.sign-login:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}.sign-login:active{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--ink)}.auth-block{display:flex;flex-direction:column;gap:.65rem;margin-top:.1rem}.stake-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.stake-option{padding:.8rem .6rem;border:3px solid var(--ink);background:#fff;color:var(--ink);font-weight:800;letter-spacing:.04em;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform 80ms ease,box-shadow 80ms ease,background 80ms ease}.stake-option:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}.stake-option:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.stake-option.selected{background:var(--yellow);box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}.join-card button{font-size:1rem}.primary-cta{padding:1rem 1.1rem;border:4px solid var(--ink);background:var(--yellow);color:var(--ink);font-weight:800;letter-spacing:.04em;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform 80ms ease,box-shadow 80ms ease}.primary-cta:hover:not(:disabled){transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}.primary-cta:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.join-card button:disabled{opacity:.6;cursor:not-allowed;box-shadow:0 0 0 var(--ink);transform:none}.ghost{padding:.85rem 1rem;border:3px solid var(--ink);background:#fff;color:var(--ink);font-weight:700;cursor:pointer;box-shadow:6px 6px 0 var(--ink);transition:transform 80ms ease,box-shadow 80ms ease}.ghost:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--ink)}.ghost:active{transform:translate(1px,1px);box-shadow:4px 4px 0 var(--ink)}.error-text{color:#e11d48;margin:0;font-weight:700;font-size:.95rem}.microcopy{display:flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:700;text-transform:uppercase}.hud-panel{position:fixed;bottom:24px;left:24px;display:flex;gap:1.2rem;padding:1rem 1.25rem;border:3px solid var(--ink);background:#fff;font-size:.95rem;z-index:3;color:var(--ink);box-shadow:8px 8px 0 var(--ink)}.hud-panel p{margin:0}.hud-list{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;max-width:220px;color:var(--ink)}.game-canvas{position:absolute;inset:0}.canvas-overlay{position:absolute;top:12px;left:12px;display:flex;gap:.6rem;font-size:.75rem;padding:.4rem .75rem;border:3px solid var(--ink);background:#fff;color:var(--ink);pointer-events:none;box-shadow:6px 6px 0 var(--ink)}.cube-carousel{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 0}.cube-canvas-container{width:140px;height:140px;display:flex;align-items:center;justify-content:center}.cube-canvas-container canvas{display:block}.carousel-arrow{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:3px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;transition:transform 80ms ease,box-shadow 80ms ease}.carousel-arrow:hover{transform:translate(1px,1px)}.carousel-arrow:active{transform:translate(2px,2px);background:var(--yellow)}.welcome-heading{margin:0;text-align:center;font-size:1.25rem;font-weight:800;color:var(--ink)}.spinner-container{display:flex;align-items:center;justify-content:center}.spinner{width:48px;height:48px;border:4px solid var(--ink);border-top-color:var(--yellow);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.panels-container{position:relative;display:flex;align-items:flex-start;justify-content:center}.settings-panel{position:absolute;right:calc(50% + 200px);top:50%;transform:translateY(-50%);width:280px;background:#fff;border:4px solid var(--ink);border-radius:5px;padding:1rem;display:flex;flex-direction:column;gap:.75rem;max-height:480px;overflow-y:auto}.settings-panel::-webkit-scrollbar{width:8px}.settings-panel::-webkit-scrollbar-track{background:var(--offwhite);border-left:2px solid var(--ink)}.settings-panel::-webkit-scrollbar-thumb{background:var(--ink)}.settings-header{padding-bottom:.75rem;border-bottom:3px solid var(--ink);margin-bottom:.5rem}.settings-title{margin:0;font-size:1.1rem;font-weight:800;letter-spacing:.06em;color:var(--ink)}.settings-tabs{display:flex;flex-direction:column;gap:.5rem}.settings-tab{display:flex;align-items:center;gap:.65rem;padding:.75rem .85rem;border:3px solid var(--ink);background:#fff;cursor:pointer;transition:transform 80ms ease,box-shadow 80ms ease,background 80ms ease;box-shadow:3px 3px 0 var(--ink)}.settings-tab:hover{background:#fffbea;transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}.settings-tab:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.settings-tab-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.settings-tab-label{flex:1;text-align:left;font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}.settings-tab-chevron{width:16px;height:16px;display:flex;align-items:center;justify-content:center;opacity:.5}.settings-tab-status{width:10px;height:10px;border-radius:50%;background:#22c55e;flex-shrink:0}.settings-page-header{display:flex;align-items:center;gap:.5rem;padding-bottom:.75rem;border-bottom:3px solid var(--ink);margin-bottom:.75rem}.settings-back-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:3px solid var(--ink);background:#fff;cursor:pointer;transition:transform 80ms ease,background 80ms ease}.settings-back-btn:hover{background:#fffbea}.settings-back-btn:active{background:var(--yellow);transform:translate(1px,1px)}.settings-page-title{display:flex;align-items:center;gap:.5rem}.settings-page-title h3{margin:0;font-size:.95rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}.settings-page-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.settings-page-content{display:flex;flex-direction:column;gap:.75rem}.settings-field{display:flex;flex-direction:column;gap:.35rem}.settings-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);opacity:.7}.settings-input{padding:.6rem .75rem;border:3px solid var(--ink);background:#fff;font-size:.9rem;font-weight:600;color:var(--ink);font-family:inherit;transition:box-shadow 80ms ease}.settings-input:focus{outline:none;box-shadow:3px 3px 0 var(--ink)}.settings-input::placeholder{color:var(--ink);opacity:.4}.settings-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem .85rem;border:3px solid var(--ink);background:#fff;color:var(--ink);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform 80ms ease,box-shadow 80ms ease,background 80ms ease}.settings-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}.settings-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.settings-btn.connected{background:var(--yellow)}.settings-btn.danger{background:#fee2e2;border-color:#dc2626;color:#dc2626;box-shadow:3px 3px #dc2626;margin-top:auto}.settings-btn.danger:hover{background:#fecaca;box-shadow:2px 2px #dc2626}.settings-btn.danger:active{box-shadow:1px 1px #dc2626}.settings-btn-icon{width:16px;height:16px}.wallet-address{font-size:.75rem;font-weight:700;color:var(--ink);opacity:.6;text-align:center;word-break:break-all;padding:.5rem;background:#fff;border:2px dashed var(--ink)}.settings-status{display:flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.status-dot{width:8px;height:8px;border-radius:50%;background:#e11d48}.status-dot.connected{background:#22c55e}@media(max-width:900px){.settings-panel{position:fixed;left:1rem;top:50%;right:auto;transform:translateY(-50%);width:260px;max-height:calc(100vh - 2rem)}}@media(max-width:720px){.panels-container{flex-direction:column-reverse;align-items:center;gap:1rem;padding:1rem;max-height:100vh;overflow-y:auto}.settings-panel{position:relative;left:auto;top:auto;right:auto;transform:none;width:min(92vw,340px);max-height:none}.join-card{padding:1.2rem;width:min(92vw,340px)}.hud-panel{flex-direction:column;gap:.75rem;right:24px;left:24px}.cube-canvas-container{width:120px;height:120px}.carousel-arrow{width:36px;height:36px}}