*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#ddd;font-family:Lucida Grande,Segoe UI,Geneva,sans-serif;font-size:13px}#game{display:flex;width:100vw;height:100vh}#viewport{flex:1;position:relative;overflow:hidden}#view{display:block;image-rendering:pixelated;cursor:crosshair}#sidebar{width:230px;flex:none;background:#1b1b1b;border-left:2px solid #444;padding:10px 12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}#sidebar h1{font-size:26px;letter-spacing:8px;text-align:center;color:#9adb6c;text-shadow:0 0 8px #2c5;font-family:Georgia,Times New Roman,serif}#sidebar label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#999}.gauges{display:flex;flex-direction:column;gap:4px}.gauge-row{display:grid;grid-template-columns:52px 1fr 24px;align-items:center;gap:6px}.gauge-track{height:10px;background:#333;border:1px solid #555}.gauge-bar{height:100%;width:0;transition:width .1s linear}.gauge-shells{background:#e8b22d}.gauge-mines{background:#d84a4a}.gauge-armour{background:#58a6e8}.gauge-trees{background:#5ec45e}.gauge-value{text-align:right;font-variant-numeric:tabular-nums;color:#bbb}.range-row{display:flex;align-items:baseline;gap:6px}.range-row span{color:#eee;font-weight:700}.range-row small{color:#777}.status-section{display:flex;flex-direction:column;gap:4px}.status-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.status-dot{aspect-ratio:1;border:1px solid #555;border-radius:2px}.status-dot[data-status=dead]{opacity:.25}.status-dot[data-status=carried]{border-style:dashed;border-color:#fff}.status-dot[data-status=vulnerable]{border-color:#f55;border-style:dashed}.tools{display:flex;flex-direction:column;gap:4px}.tools button,.mute,#overlay button{background:#2a2a2a;border:1px solid #555;color:#ddd;padding:5px 8px;text-align:left;cursor:pointer;font-size:12px;border-radius:3px}.tools button:hover,.mute:hover,#overlay button:hover{background:#3a3a3a}.tools button.active{background:#3a5a2a;border-color:#8c8}.tools kbd{display:inline-block;background:#444;border-radius:2px;padding:0 4px;margin-right:4px;font-family:inherit}.messages{min-height:80px;border-top:1px solid #333;padding-top:6px;font-size:12px;color:#9adb6c;display:flex;flex-direction:column;gap:2px}.messages div{opacity:.9}.help{margin-top:auto;border-top:1px solid #333;padding-top:6px;color:#888;font-size:11px;line-height:1.5}.carrying{display:none;background:#2c4a1e;border:1px solid #8c8;border-radius:3px;padding:4px 6px;font-size:11px;color:#cfc}#overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d1;display:flex;align-items:center;justify-content:center;z-index:10}#overlay.hidden{display:none}#overlay .panel{width:460px;max-width:92vw;background:#181818;border:2px solid #555;border-radius:6px;padding:28px 32px;display:flex;flex-direction:column;gap:14px;line-height:1.5}#overlay h1{font-size:42px;letter-spacing:14px;text-align:center;color:#9adb6c;text-shadow:0 0 12px #2c5;font-family:Georgia,Times New Roman,serif}#overlay .subtitle{text-align:center;color:#e8b22d;font-weight:700}#overlay select{background:#2a2a2a;color:#ddd;border:1px solid #555;padding:3px 6px;margin-left:6px}#overlay button{font-size:16px;text-align:center;padding:10px;background:#2c4a1e;border-color:#8c8}#overlay button:hover{background:#3a5e28}#overlay .menu-options{display:flex;gap:18px;flex-wrap:wrap}#overlay .goal-note{color:#999;font-size:12px}#overlay .map-blurb{color:#9adb6c;font-size:12px;font-style:italic;min-height:16px}#overlay button.secondary{background:#2a2a2a;border-color:#555;font-size:13px;padding:7px}#overlay button.secondary:hover{background:#3a3a3a}#controls-panel{max-height:300px;overflow-y:auto;border-top:1px solid #333;padding-top:10px}#controls-panel.hidden{display:none}table.bindings{width:100%;border-collapse:collapse;font-size:12px}table.bindings td{padding:3px 4px;border-bottom:1px solid #2a2a2a}table.bindings td:last-child{text-align:right}button.key-chip{background:#333;border:1px solid #666;border-radius:3px;color:#eee;padding:2px 10px;font-size:12px;min-width:70px;text-align:center;cursor:pointer}button.key-chip:hover{background:#444}button.key-chip.capturing{background:#5a4a1e;border-color:#e8b22d;color:#ffd}button.reset-keys{margin-top:8px;font-size:12px;text-align:center;background:#2a2a2a;border-color:#555;padding:5px 10px}.name-field{display:flex;flex-direction:column;gap:4px}.name-field input{background:#2a2a2a;border:1px solid #555;color:#eee;padding:8px;font-size:15px;border-radius:3px}#overlay .panel.lobby{width:520px}.room-list{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}.room-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#222;border:1px solid #444;border-radius:4px;padding:8px 10px}.room-meta{display:flex;flex-direction:column;gap:2px}.room-meta b{color:#eee}.room-meta span{color:#999;font-size:12px}.join-btn{background:#2c4a1e;border:1px solid #8c8;color:#dfe;padding:6px 16px;border-radius:3px;cursor:pointer}.join-btn:disabled{background:#333;border-color:#555;color:#777;cursor:not-allowed}#create-box summary{cursor:pointer;color:#e8b22d;padding:6px 0}.create-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:8px}.create-form label{display:flex;flex-direction:column;gap:3px}.create-form select{background:#2a2a2a;color:#ddd;border:1px solid #555;padding:4px}.create-form #create{grid-column:1 / -1;background:#2c4a1e;border-color:#8c8}#roster{position:absolute;top:8px;left:8px;background:#141414d1;border:1px solid #444;border-radius:4px;padding:6px 8px;font-size:12px;min-width:150px;pointer-events:none;z-index:5}.roster-title{color:#999;text-transform:uppercase;font-size:10px;letter-spacing:1px;margin-bottom:4px}.roster-row{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:6px;padding:1px 0}.roster-row.me .rn{color:#9adb6c;font-weight:700}.roster-row .dot{width:10px;height:10px;border-radius:2px;border:1px solid #000}.roster-row .kd{color:#bbb;font-variant-numeric:tabular-nums}.roster-row i{color:#888}.net-toast{position:absolute;bottom:12px;left:50%;transform:translate(-50%);background:#141414e6;border:1px solid #5a5;color:#9adb6c;padding:6px 14px;border-radius:4px;font-size:13px;z-index:6;pointer-events:none}