@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";body{margin:0;overflow:hidden;user-select:none;touch-action:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-force-touch:none;-webkit-touch-force:none;overscroll-behavior:none;-webkit-overflow-scrolling:auto;height:100dvh;height:calc(var(--vh, 1vh) * 100)}body.in-game{overflow:hidden;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-overflow-scrolling:auto}canvas{display:block;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-force-touch:none;-webkit-touch-force:none;touch-action:none}#lobby{position:fixed;top:0;left:0;width:100vw;height:calc(var(--vh, 1vh) * 100);background:#f8f8f8;font-family:"Press Start 2P",monospace;overflow:hidden}#lobby>h2{text-align:center;margin:0;padding:15px 0}.lobby-grid{display:grid;grid-template-columns:25% 1fr;height:calc((var(--vh, 1vh) * 100) - 50px);margin-right:20px;position:relative}.lobby-grid:after{content:"";position:absolute;top:30px;right:0;width:42.42px;height:4px;background:#9b9b9b;transform:rotate(45deg);transform-origin:top right;pointer-events:none;z-index:10}.lobby-nav{background:transparent;padding:0 0 20px 20px;display:flex;flex-direction:column;overflow:visible;z-index:2}.player-name-display{font-size:clamp(8px,1.5vw,12px);font-weight:700;color:#444;margin-bottom:15px;margin-right:15px;margin-top:-25px;padding:10px;text-align:left;min-height:48px;cursor:pointer;border:4px solid #9b9b9b;border-bottom:7px solid #9b9b9b;transition:all .1s ease;background:#ebebeb;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,0 100%);box-sizing:border-box}.player-name-display:after{content:"";position:absolute;top:11px;right:-4px;width:21.21px;height:4px;background:#9b9b9b;transform:rotate(45deg);transform-origin:top right;pointer-events:none;z-index:1}.player-name-display .tank-design-preview{width:56px;height:56px;margin-right:-5px;margin-left:-10px;flex-shrink:0;display:block}.player-name-display .player-name-text{flex:1;text-align:left;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:normal}.player-name-display:active{transform:translateY(3px);border-bottom-width:4px;margin-bottom:18px}.nav-buttons{display:flex;flex-direction:column}.nav-button{font-family:"Press Start 2P",monospace;padding:16px 16px 16px 24px;cursor:pointer;text-align:left;font-size:clamp(8px,1.7vw,12px);width:100%;border:none;background:transparent;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;position:relative;word-wrap:break-word;white-space:normal}.nav-button:hover{scale:1.03;transition:scale .2s ease-in-out}.nav-button.active{background:#ebebeb;border:4px solid #9b9b9b;border-right:none;border-bottom:7px solid #9b9b9b}.nav-button.active:before{content:"";position:absolute;background:#ebebeb;top:0;bottom:0;right:-4px;width:10px}.nav-button[data-target=teamSelectionContainer]{color:red}.nav-button[data-target=loadoutContainer]{color:green}.nav-button[data-target=settingsContainer]{color:#00f}.nav-button[data-target=controlSettings]{color:purple}.nav-button[data-target=leaderboardContainer]{color:orange}.lobby-content{background:#ebebeb;padding:20px 30px 20px 20px;overflow-y:auto;position:relative;text-align:center;display:flex;flex-direction:column;border:4px solid #9b9b9b;border-bottom:none;overflow-x:hidden;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}*{scrollbar-width:thin;scrollbar-color:#9b9b9b transparent}.content-section{display:none;background:transparent;border:none;padding:0;margin-bottom:20px;overflow:visible}.content-section.active{display:block}.content-section.slide-in-from-above{animation:slideFromAbove .4s ease-out}.content-section.slide-in-from-below{animation:slideFromBelow .4s ease-out}@keyframes slideFromAbove{0%{opacity:0;transform:translateY(-80px)}to{opacity:1;transform:translateY(0)}}@keyframes slideFromBelow{0%{opacity:0;transform:translateY(80px)}to{opacity:1;transform:translateY(0)}}.content-section h3{margin-top:30px;margin-bottom:20px;text-align:left}.content-section h3:first-of-type{margin-top:0}.content-section h3:not(:first-of-type){border-top:2px solid #ddd;padding-top:20px}body.dark-mode .content-section h3:not(:first-of-type){border-top:2px solid #444}#nameInput{text-align:center;margin-bottom:20px}#nameInput h2{margin-top:0;margin-bottom:20px;color:#333}.play-tab-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.play-tab-header h3{margin:0}.action-buttons-inline{display:flex;gap:10px}.retro-button{font-family:"Press Start 2P",monospace;font-size:10px;padding:10px 16px;cursor:pointer;color:#fff;background:#666;border:3px solid #9b9b9b;border-bottom:6px solid #9b9b9b;transition:all .1s ease;user-select:none;-webkit-user-select:none;margin:0;display:block;box-sizing:border-box}.retro-button:hover{transition:all .2s ease}.retro-button:active{transform:translateY(3px);border-bottom-width:3px;margin-bottom:3px}.retro-button.small{font-size:9px;padding:6px 12px;border-width:2px;border-bottom-width:4px}.retro-button.small:active{border-bottom-width:2px;margin-bottom:2px}#rpg-interact-btn.retro-button:active{transform:translate(-50%) translateY(3px);margin-bottom:0}#startButton.retro-button{background:red}#becomeHostButton.retro-button{background:purple}.bot-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}.bot-controls-label{font-family:"Press Start 2P",monospace;font-size:10px;color:#666}#playerList{max-width:400px;margin:20px auto}#playerList:empty{display:none}#playerName{font-family:"Press Start 2P",monospace;padding:10px;margin:10px 0;width:calc(100% - 24px);max-width:300px;font-weight:700;border:4px solid black;background:#fff;box-sizing:border-box}#playerName:focus{outline:none;background:#f0f0f0}#joinButton{background:#00f}.player-item{margin:10px 0;display:flex;align-items:center;padding:5px;font-size:12px}.player-color{display:block;display:none;width:20px;height:20px;margin-right:10px;border:2px solid black}.winner-announcement{padding:10px 20px;text-align:center;margin:10px auto;animation:pulse 2s infinite;display:inline-block;box-sizing:border-box;max-width:320px;word-wrap:break-word}.error-message{color:red;margin-top:5px;font-size:14px}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.settings-container{display:block;background:transparent;border:none;padding:0;margin:0;max-width:none}.in-lobby .settings-container{display:block}.settings-container+.settings-container{margin-top:10px}.settings-container:empty{display:none}#lobbyContainer #playerList{margin:0}#lobbyContainer #playerList:empty:after{content:"Waiting for players...";display:block;color:#666;font-size:14px;font-style:italic;text-align:center;margin-top:10px}.settings-container h3{margin-top:10px;margin-bottom:20px;color:#333;font-size:18px}.setting-row{display:flex;flex-direction:column;margin-bottom:15px}.setting-row:has(input[type=range]:disabled){margin-bottom:8px}.setting-row:has(input[type=range]:disabled) .setting-header{margin-bottom:0}.setting-row:has(input[type=range]){flex-direction:row;align-items:center;gap:10px}.setting-row:has(input[type=range]) .setting-header{margin-bottom:0;margin-top:0;flex-shrink:0;width:180px;min-width:180px;justify-content:flex-start}.setting-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;margin-top:5px}.setting-row label{font-size:14px;color:#444}.setting-row input[type=range]{width:100%;height:8px;background:#ddd;outline:none;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}.setting-row:has(input[type=range]) input[type=range]{flex:1;width:auto}.setting-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:#000;cursor:pointer}.setting-row input[type=range]:disabled{opacity:.3;cursor:not-allowed;display:none}.setting-row input[type=range]:disabled::-webkit-slider-thumb{background:#999;cursor:not-allowed;display:none}.setting-row span{font-size:14px;color:#666}.setting-row:has(input[type=range]) span{flex-shrink:0;width:50px;min-width:50px;text-align:right}.setting-row input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #000000;cursor:pointer;position:relative;margin:0;padding:0;border-radius:0;-webkit-border-radius:0;-webkit-transition:none!important;transition:none!important;animation:none!important;-webkit-animation:none!important}.setting-row input[type=checkbox]:checked{background-color:#000;-webkit-transition:none!important;transition:none!important;animation:none!important;-webkit-animation:none!important}.setting-row input[type=checkbox]:disabled{opacity:.3;cursor:not-allowed}.setting-row input[type=checkbox]:focus{outline:none}.setting-row:has(input[type=checkbox]){flex-direction:row;justify-content:space-between;align-items:center}.setting-row:has(input[type=checkbox]) .setting-header{margin-bottom:0}.stats-tables{display:flex;flex-direction:column;margin-top:0;margin-bottom:0;align-items:flex-start}.game-stats,.overall-stats{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.team-stats{width:100%;max-width:100%;margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}.stats-tables table{width:100%;border-collapse:collapse;background:#9b9b9b1a;border-radius:0}.stats-tables th,.stats-tables td{padding:8px;text-align:center;white-space:nowrap}.stats-tables th{background:#0003;font-size:12px;font-family:"Press Start 2P",monospace}.stats-tables td{font-family:"Press Start 2P",monospace;font-size:12px}.stats-tables th:first-child,.stats-tables td:first-child{text-align:left}.stats-tables th:last-child,.stats-tables td:last-child{text-align:right}#winnerAnnouncement{width:100%;text-align:center;margin:10px 0 20px;display:flex;justify-content:center}#winnerAnnouncement:empty{display:none}select{padding:4px;border:2px solid black;border-radius:0;font-family:inherit;font-size:11px;color:#444}select:focus{outline:none}#changeNameButton{background:#00f}body.dark-mode{background:#2d2d2d}body.dark-mode #lobby{background:#2d2d2d;color:#e0e0e0}body.dark-mode #lobby h2{color:#9b9b9b}body.dark-mode #lobbyContainer #playerList .player-item{background:#2d2d2d}body.dark-mode #playerName{background:#1a1a1a;border:4px solid #666;color:#e0e0e0}body.dark-mode #playerName:focus{background:#333}body.dark-mode .settings-container{background:#2d2d2d;border-color:#9b9b9b}body.dark-mode .settings-container h3,body.dark-mode .setting-row label{color:#9b9b9b}body.dark-mode .setting-row input[type=range]{background:#404040}body.dark-mode .setting-row input[type=range]::-webkit-slider-thumb{background:#9b9b9b}body.dark-mode .setting-row input[type=checkbox]{border-color:#9b9b9b}body.dark-mode .setting-row input[type=checkbox]:checked{background:#9b9b9b}body.dark-mode .winner-announcement{color:#9b9b9b}body.dark-mode #leaderboardContainer h3,body.dark-mode .stats-tables h4,body.dark-mode .stats-tables th,body.dark-mode .stats-tables td{color:#9b9b9b}body.dark-mode .stats-tables table{background:#9b9b9b1a}body.dark-mode .stats-tables th{background:#9b9b9b33}.team-selection{display:flex;justify-content:center}.team-selection table{width:100%;max-width:360px;border-collapse:collapse;margin:10px auto;background:#9b9b9b1a;border-radius:0}.team-selection th,.team-selection td{padding:8px;text-align:center;font-family:"Press Start 2P",monospace;font-size:12px}.team-selection th{background:#0003}.team-selection td:first-child{text-align:left}.team-box{width:18px;height:18px;margin:0 auto}.red-box{background-color:red}.blue-box{background-color:#00f}.green-box{background-color:green}.orange-box{background-color:orange}.team-selection input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background-color:#0000001a;cursor:pointer;position:relative;margin:0;padding:0;border-radius:0%;-webkit-border-radius:0;-webkit-transition:none!important;transition:none!important;animation:none!important;-webkit-animation:none!important}.team-selection input[type=radio].team-red:checked{background-color:red;border-color:red}.team-selection input[type=radio].team-blue:checked{background-color:#00f;border-color:#00f}.team-selection input[type=radio].team-green:checked{background-color:green;border-color:green}.team-selection input[type=radio].team-orange:checked{background-color:orange;border-color:orange}.dark-mode .team-selection input[type=radio]{background-color:#9b9b9b33}body.dark-mode .player-name-display{color:#9b9b9b;border-color:#444;background:#383838}body.dark-mode .player-name-display:after{background:#444}body.dark-mode .lobby-content{border-color:#444;background:#383838}body.dark-mode *{scrollbar-color:#444 transparent}body.dark-mode .lobby-grid:after{background:#444}body.dark-mode .nav-button.active{border-color:#444;background:#383838}body.dark-mode .nav-button.active:before{background:#383838}body.dark-mode .retro-button{border-color:#444;border-bottom-color:#444}body.dark-mode .bot-controls-label{color:#888}body.dark-mode .players-content h3{color:#9b9b9b}.card-grid{display:flex;gap:15px;overflow-x:auto;padding-bottom:10px;margin:10px 0}.card{--card-color: green;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;background:#ddd;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;width:90px;min-width:90px;height:90px;min-height:90px;border:4px solid #9b9b9b;border-bottom-width:7px;position:relative;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);box-sizing:border-box;transition:all .1s ease}.card:after{content:"";position:absolute;top:8px;right:-4px;width:16.97px;height:4px;background:#9b9b9b;transform:rotate(45deg);transform-origin:top right}.card:active{transform:translateY(3px);border-bottom-width:4px;margin-bottom:3px}.card--toggle:active,.card[data-mode-id]:active{transform:translateY(2px);margin-bottom:0}.rpg-card:active{transform:translateY(2px);border-bottom-width:3px!important;margin-bottom:2px}.card.selected{background:var(--card-color)}.card.selected .card-label,.card.selected .card-title,.card.selected .card-description{color:#fff}.card.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}body.dark-mode .card{background:#404040;border-color:#444}body.dark-mode .card:after{background:#444}body.dark-mode .card.selected{background:var(--card-color);border-color:var(--card-color)}body.dark-mode .card.selected:after{background:var(--card-color)}.card-label,.card-title{font-family:"Press Start 2P",monospace;font-size:8px;color:#333;text-align:center;line-height:1.3;-webkit-hyphens:auto;hyphens:auto}.card-description{font-family:"Press Start 2P",monospace;font-size:7px;color:#666;text-align:center;line-height:1.4}.card-canvas{display:block;margin-bottom:4px}.card-image{width:60px;height:60px;object-fit:cover;margin-bottom:8px;border:1px solid #999}.card-placeholder{width:60px;height:60px;background:#999;margin-bottom:8px;display:flex;align-items:center;justify-content:center;font-family:"Press Start 2P",monospace;font-size:8px;color:#fff;text-align:center}body.dark-mode .card-label,body.dark-mode .card-title{color:#9b9b9b}body.dark-mode .card-description{color:#999}body.dark-mode .card-image{border-color:#666}body.dark-mode .card-placeholder{background:#666}.card--green{--card-color: green}.card--blue{--card-color: blue}.card--purple{--card-color: purple}.card--orange{--card-color: orange}.card--toggle{width:70px;min-width:70px;height:70px;min-height:70px;padding:8px}.perks-container{display:flex;flex-direction:column;gap:15px;margin-top:10px}.perks-category{display:flex;flex-direction:column;gap:8px}.perks-category:not(:first-child){border-top:2px solid #ddd;padding-top:15px}body.dark-mode .perks-category:not(:first-child){border-top:2px solid #444}.perks-category-label{font-family:"Press Start 2P",monospace;font-size:10px;color:#333;text-align:left}body.dark-mode .perks-category-label{color:#9b9b9b}.card-icon{margin-bottom:8px}.perk-description{font-family:"Press Start 2P",monospace;font-size:8px;color:#444;line-height:1.5;text-align:left}.perk-description:empty{display:none}body.dark-mode .perk-description{color:#aaa}.content-section{overflow:visible}body.dark-mode #nameInput h2{color:#e0e0e0}body.dark-mode select{border:2px solid #9b9b9b;outline:none;background-color:#404040;color:#9b9b9b}.orientation-overlay{display:none;position:fixed;top:0;left:0;width:100vw;height:calc(var(--vh, 1vh) * 100);padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0);box-sizing:border-box;background:#f8f8f8;z-index:10001;font-family:"Press Start 2P",monospace;text-align:center;justify-content:center;align-items:center;flex-direction:column;gap:30px}.orientation-overlay h1{font-size:38px;margin-bottom:30px;color:#333}.orientation-overlay p{font-size:12px;margin:0;color:#666;line-height:1.6;max-width:280px;padding:0 40px}body.dark-mode .orientation-overlay{background:#333}body.dark-mode .orientation-overlay p{color:#ccc}body.dark-mode .orientation-overlay .phone-vertical{stroke:#888;fill:#888}body.dark-mode .orientation-overlay .phone-horizontal{stroke:#ccc;fill:#ccc}body.dark-mode .orientation-overlay .arrow{stroke:#ccc;fill:none!important}body.dark-mode .orientation-overlay .arrowhead{fill:#ccc;stroke:#ccc}.gamepad-focused{outline:2px solid #444!important;outline-offset:2px!important}.gamepad-focused input[type=checkbox],.gamepad-focused input[type=range]{transform:scale(1.1)!important}.gamepad-focused input[type=radio]{transform:scale(1.25)!important}.dark-mode .gamepad-focused{outline:2px solid #9b9b9b!important}.setting-group{margin-top:10px}.settings-popup-btn{position:fixed;top:8px;right:20px;z-index:10000;padding-top:8px;padding-bottom:8px;touch-action:manipulation;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.settings-popup-btn.open .settings-popup-btn-line:nth-child(1){transform:rotate(45deg) translate(3px,3px)}.settings-popup-btn.open .settings-popup-btn-line:nth-child(2){opacity:0}.settings-popup-btn.open .settings-popup-btn-line:nth-child(3){transform:rotate(-45deg) translate(3px,-3px)}.settings-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1001;display:flex;justify-content:flex-end;align-items:center;pointer-events:none}.settings-popup-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto}.settings-popup{width:25%;max-height:80%;background:#ebebebf2;padding:15px;margin-right:20px;font-family:"Press Start 2P",monospace;overflow-y:auto;position:relative;border:4px solid #9b9b9b;border-bottom-width:7px;pointer-events:auto}.settings-popup h3{margin:0 0 12px;font-size:12px;color:#333;text-align:center}.settings-popup .setting-row{margin-bottom:8px}.settings-popup .setting-header{margin-bottom:8px;margin-top:0}.settings-popup .setting-row label,.settings-popup .setting-row span{font-size:12px}.settings-popup .setting-row:has(input[type=range]){flex-direction:column}.settings-popup .setting-row:has(input[type=range]) .setting-header{width:100%;min-width:auto;justify-content:space-between;margin-bottom:8px}.settings-popup .setting-row:has(input[type=range]) input[type=range]{width:100%;flex:none}.settings-popup .setting-row:has(input[type=range]) span{width:auto;min-width:auto;text-align:left}body.dark-mode .settings-popup{background:#2a2a2ae6;border-color:#555}body.dark-mode .settings-popup h3{color:#ddd}@keyframes medal-pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.medal-glow{filter:drop-shadow(0 0 2px rgba(255,215,0,.7))}.medal-legendary{animation:medal-pulse 2s infinite ease-in-out;filter:drop-shadow(0 0 4px rgba(147,112,219,.9))}.graffiti-editor{display:flex;gap:10px;margin-top:10px}.graffiti-controls{display:flex;flex-direction:column;gap:8px}.graffiti-controls-divider{height:12px}.graffiti-controls .retro-button.small{width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center}.graffiti-controls .retro-button.small.active{background:green}.graffiti-controls .retro-button.graffiti-icon{font-size:22px;font-family:"Press Start 2P",monospace}#graffitiCanvas{height:70vh;max-height:400px;width:auto;aspect-ratio:1;border:4px solid #9b9b9b;border-bottom-width:6px;cursor:crosshair;touch-action:none}body.dark-mode #graffitiCanvas{border-color:#444}body.dark-mode .graffiti-controls .retro-button.small.active{background:green}