html,body{margin:0;padding:0;background-color:#212529;color:#fff;font-family:"Press Start 2P",cursive;font-size:12px;-webkit-text-size-adjust:100%;} .container{max-width:980px;margin:0 auto;padding:20px 0;display:flex;flex-direction:column;align-items:center;} .nav-bar{width:100%;max-width:980px;margin:0 auto;padding:10px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;} .nav-bar-left{display:flex;gap:10px;align-items:center;} .game-title{margin-bottom:20px;text-align:center;} .game-container{position:relative;width:100%;max-width:800px;} .game-ui{width:100%;max-width:800px;margin-bottom:10px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px;} canvas{image-rendering:pixelated;image-rendering:crisp-edges;border:4px solid white;width:100%;max-width:800px;height:auto;aspect-ratio:800 / 600;} .controls{margin-top:20px;background-color:#212529;border:4px solid white;padding:15px;} .auth-container{display:flex;justify-content:flex-end;align-items:center;gap:10px;} .modal{display:none;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);overflow-y:auto;} .modal.is-active{display:flex;align-items:center;justify-content:center;} .modal-content{background-color:#212529;border:4px solid white;width:90%;max-width:500px;padding:20px;position:relative;max-height:90vh;overflow-y:auto;} .modal-close{position:absolute;top:10px;right:10px;cursor:pointer;font-size:1.5em;color:#fff;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;} .tabs{display:flex;margin-bottom:20px;flex-wrap:wrap;gap:4px;} .tabs .tab{padding:10px 20px;cursor:pointer;background-color:#444;border:2px solid #666;} .tabs .tab.is-active{background-color:#212529;border-bottom:none;} .tab-content{display:none;} .tab-content.is-active{display:block;} .help-text{color:#ff6b6b;margin-top:5px;font-size:0.8em;} .is-hidden{display:none !important;} .nes-input,input[type="text"],input[type="password"]{font-size:16px !important;max-width:100%;box-sizing:border-box;} #recoveryKeyDisplay{word-break:break-all;font-size:12px !important;} .leaderboard-container{width:100%;max-width:800px;margin:0 auto 20px auto;overflow-x:auto;-webkit-overflow-scrolling:touch;} .leaderboard-table{width:100%;border-collapse:collapse;margin-top:20px;background-color:rgba(0,0,0,0.7);} .leaderboard-table th,.leaderboard-table td{padding:8px;border:2px solid #666;font-size:0.8em;white-space:nowrap;} .leaderboard-table th{background-color:#444;} .nav-buttons{margin:20px 0;display:flex;justify-content:space-between;width:100%;} #welcome-screen{width:100%;max-width:800px;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:4px solid white;padding:20px;margin-bottom:20px;box-sizing:border-box;} .start-content{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;} .auth-buttons-container{margin:20px 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;} .start-leaderboard{width:100%;max-height:250px;overflow-y:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;} #start-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:800px;min-height:300px;padding:20px;z-index:5;box-sizing:border-box;} .payment-modal-overlay{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.9);} .payment-modal-content{background-color:#212529;margin:5% auto;padding:20px;border:4px solid white;width:90%;max-width:500px;box-sizing:border-box;} .qr-container{display:flex;justify-content:center;margin:20px 0;} .qr-container bitcoin-qr{max-width:100%;} .payment-status{margin-top:20px;padding:10px;text-align:center;} .payment-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:15px;} .copy-feedback{visibility:hidden;color:#28a745;margin-top:5px;} .copy-feedback.visible{visibility:visible;} .game-over-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#212529;border:4px solid white;padding:20px;z-index:10;text-align:center;width:90%;max-width:400px;box-sizing:border-box;} .game-over-overlay .dialog-content{display:flex;flex-direction:column;align-items:center;gap:15px;} .spinner{width:40px;height:40px;margin:10px auto;border:4px solid rgba(255,255,255,0.3);border-radius:50%;border-top:4px solid #fff;animation:spin 1s linear infinite;} @keyframes spin{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}} .touch-controls{display:none;padding:8px 4px;justify-content:space-between;align-items:center;width:100%;max-width:800px;box-sizing:border-box;} .touch-controls .touch-btn{-webkit-user-select:none;user-select:none;touch-action:manipulation;border:2px solid rgba(255,255,255,0.4);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.6);font-family:"Press Start 2P",cursive;font-size:14px;width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;} .touch-controls .touch-btn:active,.touch-controls .touch-btn.active{background:rgba(255,255,255,0.3);border-color:rgba(255,255,255,0.8);color:#fff;} .touch-dpad{display:flex;flex-direction:column;align-items:center;gap:6px;} .touch-dpad-row{display:flex;gap:6px;} .touch-fire{width:66px !important;height:66px !important;border-radius:50% !important;font-size:11px !important;border-color:rgba(255,80,80,0.5) !important;color:rgba(255,80,80,0.7) !important;} .touch-fire:active,.touch-fire.active{background:rgba(255,80,80,0.3) !important;border-color:rgba(255,80,80,0.9) !important;color:#ff5050 !important;} @media (pointer:coarse){.touch-controls{display:flex;} #keyboardControls{display:none;} body.game-active{overflow:hidden;height:100vh;height:100dvh;} body.game-active .nav-bar,body.game-active .site-footer{display:none;} body.game-active .container{padding:0;height:100vh;height:100dvh;display:flex;flex-direction:column;} body.game-active #main-content{flex:1;display:flex;flex-direction:column;min-height:0;} body.game-active #game-section{flex:1;display:flex;flex-direction:column;min-height:0;} body.game-active .game-container{display:flex !important;} body.game-active .game-container.nes-container{border:none !important;border-image:none !important;padding:0 !important;margin:0 !important;} body.game-active .game-ui.nes-container{border:none !important;border-image:none !important;padding:2px 4px !important;margin:0 !important;} body.game-active .game-container{flex:1;display:flex;flex-direction:column;min-height:0;max-width:100%;} body.game-active canvas{width:100%;max-width:100%;flex-shrink:1;min-height:0;border:2px solid white;box-sizing:border-box;aspect-ratio:800 / 600;} body.game-active .game-ui{margin-bottom:2px;flex-shrink:0;} body.game-active .touch-controls{flex-shrink:0;padding:12px 4px 4px 4px;padding-bottom:max(4px,env(safe-area-inset-bottom,4px));} .touch-controls-right{display:flex;align-items:center;}} @media (max-width:480px){html,body{font-size:10px;} .nav-bar{padding:4px 8px;gap:6px;} .container{padding:4px;} #game-section .nes-container{border:none;padding:2px;} .game-ui{margin-bottom:2px;font-size:0.8em;} canvas{border-width:2px;} .modal-content,.payment-modal-content{width:95%;padding:15px;} .tabs .tab{padding:8px 12px;font-size:0.8em;} .leaderboard-table th,.leaderboard-table td{padding:4px 6px;font-size:0.7em;} .touch-controls .touch-btn{width:48px;height:48px;font-size:12px;} .touch-fire{width:60px !important;height:60px !important;font-size:10px !important;} .game-over-overlay{width:95%;padding:15px;}} @media (orientation:landscape) and (pointer:coarse){.nav-bar{padding:2px 10px;gap:4px;} .container{padding:2px;} body.game-active .game-container{display:grid !important;flex-direction:unset !important;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr;max-width:100%;overflow:hidden;} body.game-active .game-ui{grid-column:1 / -1;grid-row:1;font-size:0.7em;} body.game-active canvas{grid-column:2;grid-row:2;max-height:100% !important;width:auto !important;max-width:100% !important;min-width:0;min-height:0;border:2px solid white !important;box-sizing:border-box !important;aspect-ratio:800 / 600;justify-self:center;align-self:center;} body.game-active .touch-controls{display:contents !important;margin-top:0 !important;padding-bottom:0 !important;} body.game-active .touch-controls-left{grid-column:1;grid-row:2;display:flex;align-items:center;padding:8px 16px;padding-left:max(16px,env(safe-area-inset-left,16px));} body.game-active .touch-controls-right{grid-column:3;grid-row:2;display:flex;align-items:center;padding:8px 16px;padding-right:max(16px,env(safe-area-inset-right,16px));} .touch-controls .touch-btn{width:48px;height:48px;font-size:12px;} .touch-fire{width:56px !important;height:56px !important;font-size:9px !important;} .touch-dpad{gap:4px;} .touch-dpad-row{gap:4px;} #start-screen{min-height:auto;padding:10px;} #welcome-screen{min-height:auto;}} .github-link{color:#fff;display:inline-flex;align-items:center;margin-left:8px;opacity:0.7;transition:opacity 0.2s;vertical-align:middle;} .github-link:hover{opacity:1;} .profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .stat-row{display:flex;flex-direction:column;gap:2px;} .stat-label{font-size:0.7em;opacity:0.7;} .stat-value{font-size:0.85em;} .site-footer{text-align:center;padding:16px;margin-top:24px;font-size:0.7em;opacity:0.6;} .site-footer:hover{opacity:1;} .site-footer a{text-decoration:none;} .has-text-centered{text-align:center;}