@import"https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap";body{margin:0;overflow:hidden;background:linear-gradient(135deg,#232d1a,#3a4a23);font-family:Courier Prime,monospace;letter-spacing:.5px}#game-canvas-container{width:100vw;height:100vh;position:absolute;top:0;left:0;z-index:1}#ui-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;color:#fff;display:flex;flex-direction:column;justify-content:space-between}#stats{position:absolute;top:10px;left:10px;background:#0009;padding:8px 12px;border-radius:5px;pointer-events:none;font-size:14px;line-height:1.4;box-shadow:0 4px 24px #3a4a2222}#stats div{margin-bottom:4px}#stats div:last-child{margin-bottom:0}#score,#health{color:#b6d47a;text-shadow:0 0 8px #6b8e23aa;font-weight:700}.red{color:#ff6b5f}.blue{color:#69a7ff}#faction-select-overlay,#spawn-map-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#080c08db;pointer-events:auto}#faction-select-overlay.hidden,#spawn-map-overlay.hidden{display:none}.faction-select-panel,#spawn-map-panel{width:min(520px,calc(100vw - 32px));background:#171d14;border:1px solid #b6d47a55;border-radius:8px;box-shadow:0 20px 80px #00000073;padding:24px;color:#fff;pointer-events:auto}.faction-select-panel h1{margin:0 0 8px;font-size:2rem}.faction-select-panel p{margin:0 0 20px;color:#d7e5c0}.faction-select-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.faction-select-actions button{height:56px;border:0;border-radius:6px;color:#fff;font:inherit;font-weight:700;cursor:pointer}.faction-red{background:#b8332f}.faction-blue{background:#2967bd}#spawn-map-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}#spawn-map-header h3{margin:0}#spawn-map-stage{position:relative;width:100%;aspect-ratio:1 / 1;border:1px solid #b6d47a55;border-radius:6px;background:linear-gradient(rgba(182,212,122,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(182,212,122,.08) 1px,transparent 1px),#202a19;background-size:10% 10%;overflow:hidden}.control-point{position:absolute;width:22px;height:22px;margin-left:-11px;margin-top:-11px;border-radius:50%;border:2px solid #fff;cursor:pointer;transform:scale(1);z-index:2}.control-point:before{content:"";position:absolute;left:9px;bottom:9px;width:3px;height:28px;background:#fff;border-radius:2px}.control-point:after{content:"";position:absolute;left:12px;bottom:27px;width:18px;height:12px;background:currentColor;clip-path:polygon(0 0,100% 12%,82% 68%,0 55%)}.spawn-region{position:absolute;border-radius:50%;border:1px solid currentColor;opacity:.2;pointer-events:none;transform:translate(-50%,-50%);z-index:1}.spawn-region.spawn-enabled{background:currentColor;opacity:.16;pointer-events:auto;cursor:crosshair}.spawn-region.contested{border-style:dashed}.control-point:disabled{cursor:not-allowed;opacity:.45}.control-point.flag-red:after{background:#ff6b5f}.control-point.flag-blue:after{background:#69a7ff}.control-point.flag-neutral:after,.control-point.phase-neutral:after{display:none}.control-point.phase-lowering:after{bottom:17px}.control-point.phase-locked{outline:3px solid rgba(255,255,255,.45)}.owner-red{background:#c43d37;color:#ff6b5f}.owner-blue{background:#2f71cb;color:#69a7ff}.owner-neutral{background:#777;color:#aaa}.control-point.contested{box-shadow:0 0 0 4px #ffda6073}.control-point.spawn-enabled{box-shadow:0 0 0 5px #b6d47a47}#touch-controls{width:100%;height:150px;position:absolute;bottom:0;left:0;pointer-events:auto}#joystick-move{position:absolute;left:15px;bottom:15px;width:100px;height:100px;border-radius:50%;pointer-events:auto}#joystick-turret{position:absolute;right:15px;bottom:15px;width:100px;height:100px;border-radius:50%;pointer-events:auto}#fire-button{position:absolute;right:40px;bottom:140px;width:80px;height:80px;border-radius:50%;background-color:#b22222cc;border:2px solid #6b8e23;color:#fff;font-size:16px;display:flex;justify-content:center;align-items:center;pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:0 0 8px #b2222244}#fire-button:hover{background-color:#d32f2fcc;border-color:#b6d47a}.nipple{opacity:.5;position:absolute!important}.nipple .front{background-color:#ffffff80!important}#top-right-buttons{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:10px;pointer-events:auto;z-index:5}.ui-button{background:#0009;color:#fff;border:none;border-radius:5px;box-shadow:0 4px 24px #3a4a2222;font-family:Courier Prime,monospace;font-size:1.1rem;font-weight:700;width:40px;height:40px;padding:0;transition:background .2s,box-shadow .2s,transform .1s;outline:none;cursor:pointer;line-height:1;pointer-events:auto;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:flex;justify-content:center;align-items:center}.ui-button:hover{background:#000c;box-shadow:0 4px 16px #0006;transform:translateY(-2px) scale(1.04)}.ui-button:active{background:#000000e6;box-shadow:0 2px 8px #00000080;transform:scale(.98)}.menu{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#282828;box-shadow:0 8px 32px #6b8e2326;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #555;border-radius:8px;padding:25px;min-width:250px;max-width:85vw;max-height:80vh;overflow-y:auto;z-index:20;color:#fff;text-align:center;pointer-events:auto;box-shadow:0 4px 24px #3a4a2222;margin:0 auto}.menu h3,.menu h4{font-family:Courier Prime,monospace;color:#b6d47a;letter-spacing:1px}.menu button{background-color:#444;border:1px solid #666;color:#fff;padding:8px 15px;border-radius:4px;cursor:pointer;font-family:Courier Prime,monospace;font-size:1rem;margin-top:10px;width:100%;box-sizing:border-box;transition:background-color .2s}.menu button:hover{background-color:#555}.menu button:active{background-color:#333}#reset-timer{margin-top:10px;color:#fc0}.setting-item{display:flex;align-items:center;gap:10px;margin-bottom:15px}.setting-item label{flex-shrink:0}.setting-item input[type=text]{flex-grow:1;max-width:200px;min-width:100px;background-color:#232d1a;border:1.5px solid #b6d47a55;color:#fff;border-radius:4px;font-family:Courier Prime,monospace;font-size:1rem;padding:6px 10px;transition:border .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-item input[type=text]:focus{border:1.5px solid #b6d47a;outline:none}.setting-item button{flex-shrink:0;width:auto;margin-top:0}.checkbox-setting{display:flex;align-items:center;margin-bottom:8px;text-align:left}.checkbox-setting input[type=checkbox]{margin-right:10px;cursor:pointer;accent-color:#6b8e23;width:18px;height:18px}.checkbox-setting label{cursor:pointer}.setting-item h4{width:100%;text-align:left;margin-top:5px;margin-bottom:10px;color:#fc0}.error-message{color:#f44;font-size:.9em;margin-top:-10px;margin-bottom:10px}hr{border:none;border-top:1.5px solid #6b8e2333;margin:15px 0}#leaderboard-content{margin:20px 0}.leaderboard-step{display:none;text-align:left}.leaderboard-step.active{display:block}.control-bindings{display:flex;flex-direction:column;gap:15px}.controls-header{display:flex;margin-bottom:15px;border-bottom:1px solid #444;padding-bottom:5px}.controls-column-header{flex:1;text-align:center;font-weight:700;color:#b6d47a}.control-group-container{margin-bottom:20px}.control-group-row{display:flex;gap:20px}.control-column{flex:1}.control-group{margin-bottom:10px}.control-group h5,.control-group-container h5{margin:0 0 8px;color:#b6d47a;font-size:1rem;border-bottom:1px solid #444;padding-bottom:5px}.control-binding{display:flex;align-items:center;margin-bottom:8px}.control-binding label{flex:1;margin-right:10px}.key-binding{background-color:#444;border:1px solid #666;color:#fff;padding:5px 10px;min-width:80px;text-align:center;border-radius:4px;cursor:pointer;font-family:Courier Prime,monospace;font-size:.9rem;transition:background-color .2s}.key-binding:hover{background-color:#555}.key-binding:active,.key-binding.active{background-color:#6b8e23;border-color:#b6d47a}.control-actions{margin-top:15px}#reset-controls-button{background-color:#444;border:1px solid #666;color:#fff;padding:8px 15px;border-radius:4px;cursor:pointer;font-family:Courier Prime,monospace;font-size:.9rem;transition:background-color .2s}#reset-controls-button:hover{background-color:#555}#reset-controls-button:active{background-color:#333}#key-binding-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.key-binding-prompt{background-color:#2a2a2a;border:2px solid #6b8e23;border-radius:8px;padding:20px;text-align:center;max-width:300px}.key-binding-prompt p{margin:0 0 15px;font-size:1.1rem}#binding-action-name{color:#b6d47a;font-weight:700}#cancel-binding-button{background-color:#b22222;border:1px solid #ff6347;color:#fff;padding:8px 15px;border-radius:4px;cursor:pointer;font-family:Courier Prime,monospace;font-size:.9rem;transition:background-color .2s}#cancel-binding-button:hover{background-color:#d32f2f}@media(max-width:600px){.control-binding{flex-direction:column;align-items:flex-start;margin-bottom:12px}.control-binding label{margin-bottom:5px}.key-binding{width:100%}.control-group-row{flex-direction:column;gap:10px}.controls-header{display:none}.control-column{margin-bottom:15px}.control-column:first-child{border-bottom:1px dashed #444;padding-bottom:15px}.control-column:first-child:before{content:"Primary Controls";display:block;font-weight:700;color:#b6d47a;margin-bottom:10px;font-size:.9rem}.control-column:last-child:before{content:"Alternative Controls";display:block;font-weight:700;color:#b6d47a;margin-bottom:10px;font-size:.9rem}}.leaderboard-step h4{margin-top:0;margin-bottom:10px;color:#fc0}#leaderboard-data,#player-stats{margin:15px 0;padding:10px;border-radius:8px;background-color:#0003;box-shadow:inset 0 0 10px #0000004d}#leaderboard-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:20px;border-top:1px solid #444;padding-top:15px}#leaderboard-prev,#leaderboard-next{background-color:#444;border:1px solid #666;color:#fff;padding:8px 15px;border-radius:4px;cursor:pointer}#leaderboard-prev:hover,#leaderboard-next:hover{background-color:#555}#leaderboard-prev:disabled,#leaderboard-next:disabled{background-color:#333;color:#777;cursor:not-allowed}#leaderboard-progress{color:#ccc;font-size:14px}#leaderboard-content table{width:100%;border-collapse:collapse;margin:0 auto;font-size:1rem;color:#ddd}#leaderboard-content thead{background-color:#6b8e234d;border-bottom:2px solid #6b8e23}#leaderboard-content th{padding:12px 8px;text-align:left;font-weight:700;color:#b6d47a;text-transform:uppercase;font-size:.9rem;letter-spacing:1px}#leaderboard-content td{padding:10px 8px;border-bottom:1px solid rgba(107,142,35,.2)}#leaderboard-content tr:last-child td{border-bottom:none}#leaderboard-content tr:nth-child(2n){background-color:#ffffff0d}#leaderboard-content tr:hover{background-color:#6b8e231a}#leaderboard-content .local-player{background-color:#ffcc0026!important;font-weight:700;color:#fc0;text-shadow:0 0 5px rgba(255,204,0,.3)}#leaderboard-content td:first-child{text-align:center;font-weight:700;width:60px}#leaderboard-content td:last-child{text-align:right;font-weight:700;color:#b6d47a}#leaderboard-content tr:nth-child(1) td:first-child{color:gold;text-shadow:0 0 5px rgba(255,215,0,.5)}#leaderboard-content tr:nth-child(2) td:first-child{color:silver;text-shadow:0 0 5px rgba(192,192,192,.5)}#leaderboard-content tr:nth-child(3) td:first-child{color:#cd7f32;text-shadow:0 0 5px rgba(205,127,50,.5)}.empty-leaderboard{padding:20px;color:#aaa;font-style:italic;text-align:center;background-color:#0003;border-radius:5px;margin:10px 0}.player-stat-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;margin-bottom:10px;background-color:#6b8e231a;border-radius:5px;border-left:3px solid #6b8e23}.player-stat-item:last-child{margin-bottom:0}.stat-label{font-weight:700;color:#b6d47a}.stat-value{color:#fc0;font-weight:700}.hidden{display:none}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:100;pointer-events:auto;color:#fff;text-align:center;box-shadow:0 4px 24px #3a4a2222}.overlay.hidden{display:none;pointer-events:none}.overlay-content{background-color:#333;padding:30px;border-radius:8px;border:1px solid #555;box-shadow:0 4px 24px #3a4a2222;width:85%;max-width:500px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.overlay-content p{margin-bottom:20px}#manual-reconnect-button{background-color:#444;border:1px solid #666;color:#fff;padding:8px 15px;border-radius:4px;cursor:pointer;font-family:Courier Prime,monospace;font-size:1rem;transition:background-color .2s,box-shadow .2s,transform .1s;margin-top:15px;width:auto;text-align:center}#manual-reconnect-button:hover{background-color:#555;box-shadow:0 4px 16px #0006;transform:translateY(-2px) scale(1.04)}#manual-reconnect-button:active{background-color:#333;box-shadow:0 2px 8px #00000080;transform:scale(.98)}#manual-reconnect-button:disabled{background-color:#333;color:#777;cursor:not-allowed;transform:none;box-shadow:none}.modal{position:fixed;left:0;top:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:50;pointer-events:auto;box-shadow:0 4px 24px #3a4a2222}.modal.hidden{display:none;pointer-events:none}.modal-content{background-color:#282828;padding:25px;border-radius:8px;border:1px solid #555;text-align:center;max-width:500px;width:85%;max-height:80vh;overflow-y:auto;position:relative;color:#fff;box-shadow:0 4px 24px #3a4a2222;margin:0 auto}@media(max-width:768px){#tutorial-modal .modal-content,#billboard-modal .modal-content{width:75%;padding-left:20px;padding-right:20px;margin:0 auto}}.modal-close{position:absolute;top:10px;right:15px;background:none;border:none;font-size:24px;color:#aaa;cursor:pointer;padding:0;line-height:1}.modal-close:hover{color:#fff}.modal-content h3{margin-top:0;margin-bottom:15px}.modal-content img{max-width:100%;max-height:30vh;margin-bottom:15px;border-radius:4px}.modal-content p{margin-bottom:20px;text-align:left;line-height:1.5}.modal-content a{display:inline;padding:0;background-color:transparent;color:#b6d47a;text-decoration:underline;border-radius:0;transition:color .2s}.modal-content a:hover{background-color:transparent;color:#fc0}.modal-content a.button-link{display:inline-block;padding:10px 20px;background-color:#4caf50;color:#fff;text-decoration:none;border-radius:4px;transition:background-color .2s}.modal-content a.button-link:hover{background-color:#45a049}#tutorial-content{margin:20px 0}.tutorial-step{display:none;text-align:left}.tutorial-step.active{display:block}.tutorial-step h4{margin-top:0;margin-bottom:10px;color:#fc0}.tutorial-step p{margin-bottom:10px}.tutorial-step img{display:block;margin:15px auto;max-width:100%;max-height:200px;border-radius:4px}#tutorial-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:20px;border-top:1px solid #444;padding-top:15px}#tutorial-prev,#tutorial-next{background-color:#444;border:1px solid #666;color:#fff;padding:8px 15px;border-radius:4px;cursor:pointer}#tutorial-prev:hover,#tutorial-next:hover{background-color:#555}#tutorial-prev:disabled,#tutorial-next:disabled{background-color:#333;color:#777;cursor:not-allowed}#tutorial-progress{color:#ccc;font-size:14px}#game-header{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px;margin-bottom:18px;pointer-events:none}#game-logo{height:56px;width:auto;filter:drop-shadow(0 0 12px #00eaffcc)}#game-title{font-family:Courier Prime,monospace;font-size:2.6rem;color:#00eaff;text-shadow:0 0 12px #00eaff99,0 2px 8px #000a;margin:0;letter-spacing:2px}.settings-section{margin-bottom:18px;padding-bottom:8px;border-bottom:1px solid #3a4a23}.settings-section:last-child{border-bottom:none}.settings-icon{margin-right:6px;font-size:1.1em;vertical-align:middle;color:#b6d47a}.settings-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}.settings-tab{background-color:#444;border:1px solid #666;color:#fff;padding:8px 15px;border-radius:4px;cursor:pointer;font-family:Courier Prime,monospace;font-size:1rem}.settings-tab:hover{background-color:#555}.settings-tab.active{background-color:#6b8e23;border-color:#b6d47a}#set-name-button,#reset-tank-button{background-color:#444;border:1px solid #666;color:#fff;padding:8px 15px;border-radius:4px;cursor:pointer;font-family:Courier Prime,monospace;font-size:1rem;transition:background-color .2s}#set-name-button:hover,#reset-tank-button:hover{background-color:#555}#set-name-button:active,#reset-tank-button:active{background-color:#333}#reset-tank-button:disabled{background-color:#333;color:#777;cursor:not-allowed}@media(max-width:600px){.menu,.modal-content{min-width:unset;width:85vw;max-width:90vw;padding:15px 5vw;font-size:1rem;margin:0 auto}.menu h3,.menu h4{font-size:1.2rem}.settings-section{padding-bottom:4px;margin-bottom:10px}.menu button{font-size:1rem;padding:8px 12px}.ui-button{font-size:1rem;width:36px;height:36px}.setting-item input[type=text]{font-size:.95rem;padding:5px 6px;max-width:150px}#top-right-buttons{top:10px;right:10px;gap:6px}#stats{top:10px;left:10px}}@media(max-width:400px){.menu,.modal-content{width:80vw;padding:12px 4vw;font-size:.95rem;margin:0 auto}.menu h3,.menu h4{font-size:1rem}.menu button{font-size:.95rem;padding:8px 12px}.ui-button{font-size:.95rem;width:32px;height:32px}#game-canvas-container{width:100vw;height:100vh;margin:0;padding:0}}#powerup-display{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:10px;justify-content:center;align-items:center;z-index:10;pointer-events:none}.powerup-item{background-color:#0009;border-radius:8px;padding:8px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 8px #0000004d;border:1px solid rgba(107,142,35,.5)}.powerup-icon{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:24px;color:#fff;margin-bottom:5px}.powerup-time{font-size:12px;color:#fc0;font-weight:700}.powerup-health .powerup-icon{color:#f55}.powerup-speed .powerup-icon{color:#5af}.powerup-damage .powerup-icon{color:#f95}.powerup-shield .powerup-icon{color:#a5f}@media(orientation:portrait){.setting-item input[type=text]{max-width:120px}}